changed 5 years ago
Linked with GitHub

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

Select a repo