--- title: Introduction to Web Programming tags: 107-2 Ric's Web Programming slideOptions: theme: league transition: 'fade' slidenumber: true # parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg' --- ### Introduction to Web Programming <br> <br> <br> Spring 2019 。 Ric Huang --- ### Web。Programming * 顧名思義，就是提供各式各樣「網路服務」的程式 * 對於使用者而言，可以透過瀏覽器(Web Browser)、APP、或是特定裝置上的軟體獲得服務 * 簡化起見，本課程將 focus 在透過瀏覽器所產生的網路服務 --- ### Web Browser ![](https://i.imgur.com/svC405B.png) --- ### 前端。後端 * 顧名思義，前端就是在前面利用各種介面(UI)設計、服務使用者的程式，而後端就是在後面負責各種(較為消耗資源的)運算與儲存、回傳給前端服務資料的程式 * 也許更精確的講法是：client-side (客戶端) vs. server-side (伺服器端) --- ### 伺服器 ![](https://i.imgur.com/9povJQ5.png) --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/VqKIaOX.png) First web browser: WorldWideWeb (aka. Nexus), by Tim Berners Lee, 1990 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/i5D7H0s.png) 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](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/UwJ0MBy.png) 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](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/ADUdKRn.png) 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](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/FjClIn1.png) --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/7COwYcj.png) Internet Explorer (IE), by Microsoft, in 1995 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/VHZilSN.png) Opera, by Telenor, in 1996 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/fsYAAOu.png) Safari, by Apple, in 2003 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/41F8ysZ.png) Firefox, by Mozilla, in 2004 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/GJLUZud.png) Chrome, by Google, in 2008 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/h4jbYF0.png) Edge, by Microsoft, in 2015 --- ### 前端。瀏覽器 (Web Browser) \[[ref](https://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief-history.html)\] ![](https://i.imgur.com/sK4LTzl.png) --- ### 前端。網頁 * 這二十幾年來網頁有許多的改變：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 在瀏覽器上，網頁的內容不會隨著使用著的瀏覽行為而有所改變 * 如果按下超連結或是提交表單，是跳掉別的網址，網頁內容會重新下載 * 換頁時會有「白畫面」 --- ### 靜態網頁 ![](https://i.imgur.com/zVOgvms.png) --- ### 動態網頁 網頁內嵌會聽取(listen)某些事件(events, 如：滑鼠點擊、移動，鍵盤輸入，登入...等)的腳本語言(script language, 如：JavaScript)，當事件發生時，瀏覽器會根據腳本的描述去伺服器(i.e. web server)與資料庫抓取資料，回傳到瀏覽器，而更動「部分」的網頁內容 --- ### 動態網頁 * 計數器：登入時人數加一 * 相簿：按下按鈕可以切換相片 * 搜尋框：輸入文字可以搜尋資料 * 會員登入：根據會員資料顯示不同內容 * 社群網路：朋友互動的即時顯示 --- ### 動態網頁 ![](https://i.imgur.com/g5qiv0P.png) --- ### Ajax: Asynchronous JavaScript and XML * Ajax 透過非同步的方式跟後台拿資料，在這中間使用者還是可以進行其他操作，不會被打斷 * 雖然叫 Ajax, 但現代的網頁都用 JSON \[[ref](http://indus3.org/json-and-game-data/#.WpuZ1xNuYnM)\] ![](https://i.imgur.com/7J0wIhe.png) --- #### Ajax: Asynchronous JavaScript and XML * XML vs. JSON ![](https://i.imgur.com/7ujsTnC.png) ![](https://i.imgur.com/oQGYkUE.png) --- ### 前後端的分工逐漸明確 * 前端：JavaScript 來負責顯示畫面 (client-side rendering) * 後端：as an API server, 負責透過定義好的介面來產生資料 * 框架：使用Ajax，並定義一些 MVX (如：MVC) 的架構 --- ### 前端。Client-side Rendering 的演進 * 從 2010 年開始，風向一直在變 ![](https://i.imgur.com/S6Js9OO.png) --- ### 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 --- ### 後端語言更是百花齊放～ 可以跑在伺服器 (電腦) 的程式語言都可以用 ![](https://i.imgur.com/YneTMvU.png) --- ## End