大開源計劃 - 社課資訊

大開源計劃

第一堂社課

初探 Node.js 與網頁前端工具

過去 JavaScript 只能在瀏覽器中執行基本數值運算、處理資料結構、操作 DOM、發送 HTTP 請求等基本功能，讓網頁跟使用者的互動更直觀、更多元，同時也減少使用伺服器的運算資源。

如今 Node.js 提供了 JavaScript 另一個伸展的舞台，搭配 NPM 實現了高度模組化的開發模式，又與作業系統緊密的結合只要使用 JS 語法就能操作檔案結構、執行程序、連線處理等功能，讓開發者可以架小型伺服器、使用前端工具簡化開發過程的負擔。

這門課將會帶來「如何正確且乾淨地安裝 Node.js 並可以持續更新到最新版本」、「開發 Node.js 專案的必備知識」。

現代瀏覽器根據 W3C 所制定的標準去實作網頁中 HTML/CSS/JS 的表現，隨著時代的演進，很多網頁上的功能往往需要反覆組合這些原生的語法才能實現，使得程式碼變得非常複雜、難以維護。

於是出現了各式各樣的前端工具，包含模板引擎、前編譯處理器、套件管理器等等，透過自動化、模組化、插件化讓開發過程變簡單與容易維護。

這門課會簡單介紹 Pug, Sass, JSX 三種語言，並且透過 Gulp 自動化部屬工具串連各個前端工具。

使用前端框架與組合 JS 套件

由 Facebook 所開發、維護並開源釋出的一套前端框架，其概念是期望將網頁上出現的每一個 UI 元件變成獨立的模組，讓網頁前端工程師更容易維護每一個元件在使用者操作下的行為，並且將這些元件組裝成一個網頁應用程式。

學完 React 的概念之後還可以透過 React Native 撰寫手機應用程式並發佈到 App Store 或 Google Play 平台上提供其他使用者下載。

React 衍伸的開發生態也非常活躍，包含負責資料管理的 Flux, Reflux, Redux 等套件、定義路徑的 React Router 或是其他以 react- 開頭的 Plugins 都可以跟這個框架整合在一起。

目前網頁瀏覽器提供的功能已經有很多成熟的套件可以直接拿來用，省去前端工程師反覆組合原生瀏覽器 API 的瑣碎細節，讓開發者可以花更多心力處理操作使用者的邏輯與各個套件的搭配使用。

無論主題樣式、動畫效果、資料視覺、時間操作、資料處理都有相對應的 JS 套件可以使用，有時候相同的功能還會有多個套件同時存在、彼此競爭，各有各的支持者。

這堂課沒有特定的主題，全看當天台下的反應或是我在準備期間看到的有趣套件都有可能成為範例。