Introduction to Web Programming

Web。Programming

• 顧名思義，就是提供各式各樣「網路服務」的程式
• 對於使用者而言，可以透過瀏覽器(Web Browser)、APP、或是特定裝置上的軟體獲得服務
• 簡化起見，本課程將 focus 在透過瀏覽器所產生的網路服務

Web Browser

前端。後端

• 顧名思義，前端就是在前面利用各種介面(UI)設計、服務使用者的程式，而後端就是在後面負責各種(較為消耗資源的)運算與儲存、回傳給前端服務資料的程式
• 也許更精確的講法是：client-side (客戶端) vs. server-side (伺服器端)

伺服器

前端。瀏覽器 (Web Browser) [ref]

First web browser: WorldWideWeb (aka. Nexus), by Tim Berners Lee, 1990

前端。瀏覽器 (Web Browser) [ref]

Lynx, a text-based browser, by a team of students and staff at the university (of Kansas), 1992 (http://lynx.browser.org/)

前端。瀏覽器 (Web Browser) [ref]

Mosaic, often regarded as the first graphical web browser, was developed by National Center for Supercomputing Applications (NCSA) of UIUC, in late 1992 (Led by Marc Andreessen)

前端。瀏覽器 (Web Browser) [ref]

Netscape, founded by Marc Andreessen, James H. Clark, and 4 others from Mosaic, was the most successful commercial web company in 90’s

前端。瀏覽器 (Web Browser) [ref]

前端。瀏覽器 (Web Browser) [ref]

Internet Explorer (IE), by Microsoft, in 1995

前端。瀏覽器 (Web Browser) [ref]

Opera, by Telenor, in 1996

前端。瀏覽器 (Web Browser) [ref]

Safari, by Apple, in 2003

前端。瀏覽器 (Web Browser) [ref]

Firefox, by Mozilla, in 2004

前端。瀏覽器 (Web Browser) [ref]

Chrome, by Google, in 2008

前端。瀏覽器 (Web Browser) [ref]

Edge, by Microsoft, in 2015

前端。瀏覽器 (Web Browser) [ref]

前端。網頁

• 這二十幾年來網頁有許多的改變：https://archive.org/

• Web 1.0 (90’s ~ early 00’s)

  • 文字 + 圖片 + 超連結 (HyperText Markup Language, HTML)
  • 各種小花招 (跑馬燈、計數器、奇怪的游標…)
  • 開始有搜尋功能

前端。網頁

• Web 2.0 (early 00’s ~ now)
  • wikipedia.org、各種論壇/部落格
  • 各種需要會員登入的網站
  • e-commerce
  • Social network

靜態網頁

• 瀏覽器打開某網址，而從該網址的 web server 回傳 HTML 檔，show 在瀏覽器上，網頁的內容不會隨著使用著的瀏覽行為而有所改變
• 如果按下超連結或是提交表單，是跳掉別的網址，網頁內容會重新下載
• 換頁時會有「白畫面」

靜態網頁

動態網頁

網頁內嵌會聽取(listen)某些事件(events, 如：滑鼠點擊、移動，鍵盤輸入，登入…等)的腳本語言(script language, 如：JavaScript)，當事件發生時，瀏覽器會根據腳本的描述去伺服器(i.e. web server)與資料庫抓取資料，回傳到瀏覽器，而更動「部分」的網頁內容

動態網頁

• 計數器：登入時人數加一
• 相簿：按下按鈕可以切換相片
• 搜尋框：輸入文字可以搜尋資料
• 會員登入：根據會員資料顯示不同內容
• 社群網路：朋友互動的即時顯示

動態網頁

Ajax: Asynchronous JavaScript and XML

• Ajax 透過非同步的方式跟後台拿資料，在這中間使用者還是可以進行其他操作，不會被打斷
• 雖然叫 Ajax, 但現代的網頁都用 JSON [ref]

Ajax: Asynchronous JavaScript and XML

• XML vs. JSON
  

前後端的分工逐漸明確

• 前端：JavaScript 來負責顯示畫面 (client-side rendering)
• 後端：as an API server, 負責透過定義好的介面來產生資料
• 框架：使用Ajax，並定義一些 MVX (如：MVC) 的架構

前端。Client-side Rendering 的演進

• 從 2010 年開始，風向一直在變
  

React.js。元件式開發+狀態決定 UI

• 以前：某個 UI 呈現出來的 bug 可能要數個操作步驟來重現，debug 過程可能會讓你很崩潰
• With React.js components/states：
  var AppUI = AppComponent(state);
  • 讓資料儲存在單一地方 (i.e. single source of truth)，所有的改變會立即反應在 component 上面
  • 除了 debug 較為輕鬆之外，頁面更新的速度也可以變快 (more to cover later)
    // more to cover in later meetings

後端語言更是百花齊放～

可以跑在伺服器 (電腦) 的程式語言都可以用

End