不知道大家有沒有發現

在fb聊天室打字不送出去

在點到fb的其他頁面

聊天室的字還會留著

Imgur

或是在滑IG timeline的時候

點進一張妹子的照片

出來timeline還是停在同一個地方

而不是回到該死的最上面害我忘了看到哪個妹子

啊斯~這網頁也太貼心了吧

這些都跟現在web的發展有著很大的關係

也就是這篇要介紹的主題

網頁來做按摩浴囉 (SPA)

大家剛開始在學寫web的時候

都是一個頁面一個檔案

各個頁面用超連結連起來 輕鬆簡單

所以以前都說我們是在寫一個web page

但是隨著網站愈做愈大

功能愈來愈複雜

像是gmail之類的網頁

已經開始不能用一頁一頁的網頁來思考了

他已經變成一種應用程式的感覺了

這類型的東西我們就會稱他是一個web application

通常web app都是由大量的javascript在控制頁面

html的部分反而不多

而最激猛 最潮的做法

就像下面這樣

1
2
3
4
5
<html>
<body>
<script src="stanley.js"></script>
</body>
</html>

就是html只有一頁

然後所有東西都用javascript做

然後只要你瀏覽器disable javascript你就不什麼都看不到了QQ

這種做法我們叫他Single Page Application (SPA)

因為太潮了就像SPA會噴水一樣

差別在哪

傳統的web page

當我按了一個連結

會對server發出一個請求

然後server回給我一整個頁面

然後瀏覽器就會跳到新的一頁

所以通常會有一個明顯的換頁的感覺

而SPA做事情的方式就稍微不同了

當我按了一個連結

server回給你的不是整個頁面

而是只有一小部分的資料

然後再用javascript來更新你畫面上的東西

Imgur

你唬我啊,不就是用ajax動態載入資料嗎,講的這麼複雜

沒錯,基本上就是這樣

但還是有點差別的

SPA網頁真的只會有一個網頁

所有畫面更新都是用javascript在做

所以不會有傳統的換頁的感覺

也就是使用者體驗會更加流暢

而且因為換頁不是透過瀏覽器跳到另一個網址

是自己的javascript在控制

所以可以做到一些更激猛的事

像是切換的轉場動畫

Imgur

Google IO 2015

大家可以注意看上面的網址跟分頁的地方

網址換了 可是tab的地方沒有在loading的圈圈

畫面也不會先白掉再載一個新的進來 而是一個順暢的轉場動畫

這就是一種潮潮的SPA

而我一開始提到的FB,IG也是屬於這種類型

那要怎麼做呢

因為SPA太博大精深了

所以這邊不詳細介紹怎麼做

就提幾個我有用過的framework

有興趣可以自己去看看或是之後有機會會在發文

  • React: Facebook出的,一出來大家都高…興的不得了,也是現在最紅的東東
  • Angular: Google老大出的,入門容易專精難,angular 1似乎因為react爆紅被比下去,第2版要出了感覺潛力無窮
  • Vue: 2016很多人說很潮的東西,也是簡單好上手

另外還有Polymer, EmberBackbone

太多了喇,web真是一個大坑QQ (難怪會被…?

太猛了,立馬來搞一個

Imgur

等等!並不是所有網站都適合這種做法

像是部落格這種靜態網站

沒有什麼跟使用者互動的複雜操作

用SPA可能就有點多此一舉

而且由於SPA不會有一頁一頁的東西可以讓爬蟲爬

爬蟲進來你的網站可能不會執行javascript

他就只會看到一頁空白的東西

所以在搜尋引擎最佳化這方面就還要另外處理

結語

最近可能會有一系列科普型的文章

因為感覺之後再寫別的東西的時候可以引用一下比較好介紹

就這樣QQ

參考資料

SPA wiki

How Instagram.com Works; Pete Hunt (超猛的talk,在介紹IG的前端)