kinanson的技術回憶

前言

因為最近有一個新任務，就是要把舊版web form的網站整個翻成web api和前端框架的方式，leader希望我能實做出angular 2 vue react的三種example來給member參考，這三套框架我都實作了組件的構通，而狀態管理則分別是redux+redux thunk vs vuex vs ngrx，因為三種框架都實作過了，所以更有一點深刻的感觸，所以想來修改之後給新手可以參考的文章，這邊使用的ide則是vs code來做這三種的比較。

一切皆從jquery開始

這是一個偉大的前端library，也讓很多人可以開始寫些ajax的應用，因為jquery的發展，這種可以像gmail的應用也越來越盛行，用久了大家也認為理所當然起來，也因為jquery對一些原生javascript的包裝，所以大家更是不用擔心各種瀏覽器的問題，早期我甚至看過有公司是以jquery來做spa的應用，只是一個div全部用$.load來戴入相對應的頁面，結果這種spa實際上體驗卻非常差，因為一重整之後，整個頁面回到最原始狀態，甚至因為試圖全部用jquery來開發，整個js只有混亂到不行，後來漸漸的前端framework就流行了起來。

single page application的流行

這個也就是前端常說的SPA，也就是只跟json溝通，然後所有路由的切換皆是由javascript來控制，整個頁面都不會重讀，只有router的入口點在切換，可以降低伺服器的負擔，也可以加強使用者體驗，但真的是如此嗎?如果是在舊IE的時代，可能只要IE10以下，過多的javascript反而會讓使用者感覺網頁慢，也會讓搜尋引擎找不到，但是最大的好處卻是前端架構性的提升，讓前後端更加分離了，我常在mvc的網站裡面，VIEW的部份一下子看到是razor一下子是jquery，然後一下子是c#在包裝helper，寫一個畫面可能要使用多種語言，假設團隊沒有嚴格限制，就會看到很多奇奇怪怪的寫法，所以越來越多團隊把view的部份交給完完全全的javascript framework來處理，但是請注意一下SPA因為永遠都不會重整頁面，所以代表要更高深的javascript理解，不然很容易造成memory leak的問題，傳統網頁就算有memory leak，只要重整過全部的狀態都會回到原始，就比較不容易因為memory leak而造成瀏覽器當掉的問題。

什麼場景不適用於SPA

如上述所談，只要SEO就不適合SPA，把最重要的部份從server端就render出來，以利搜尋引擎，需要互動的在給javascript來處理，當然這種做法有很多種方式，可以使用(angularjs or vue or jquery etc....)來簡單做ajax的應用，雖然現在有很多框架有server render可以去處理SEO的問題，但是相對帶來的也是複雜度的提升，所以如果團隊對前端技術著墨還不深的話，其實用傳統由後端去操控路由的方式，還是可以套一些vue或angularjs來幫助一些binding的ajax效果，對前端的開發也是很有效率的幫助。

那麼多種前端框架，我該怎麼選擇呢?

引入在現有網站

如果要在現有的網站，直接套上javascript的framework，我個人目前最佳建議就是vue，或者團隊實在需要選擇大廠的話，angularjs也是一種選擇，只要拉進一個js檔就可以直接開始，這兩種框架都可以直接跟現有的網站順利搭上，但是react的話就要先熟悉一切都是javascript，甚至用javascript來寫html，然後需要學習jsx的語法，但是其實我覺得react本身也並不難學，重點是旁枝細節非常的亂，大家都有自己的一套實作方式，所以真的要整合成一套穩定的架構，確實是一個不小的挑戰。

各種framework的比較

vs code對angular2的支援度非常良好，除了typescript和scss之外，甚至是html都會有intellisense和錯誤檢查非常強大，按F12從template直接跳到ts，或者是直接跳到某個類別的某個方法，都非常方便，而且因為angular2定義為一個framework，所以很多東西只要用angular2的就好了，省去要決定用什麼路由什麼xhr什麼前端驗證機制等等，官方文件也寫得很齊全，在版本上的整合來說，相對react和vue確實是比較優秀一點，但是angular 2有幾個缺點。

1. 因為我們在工作上很多時候都要維護一個舊專案，這時候angular2很難直接在舊有網站使用，並不能像angularjs1或vue一支js檔就能在舊網站開始使用。
2. 目前來說angular2修改完程式碼重整的速度還是比vue要慢，但只是慢一點點而已，根本可以直接忽略掉，不過如果需要hot reload的話，還是必須自己實作，官方cli並無提供。
3. angular2的更版非常快速，而且新增的東西也是直線上升，學習曲線越來越大，在這種都只是出來一年時間的框架，我個人是覺得有點誇張。
4. 版本和名字混亂，比如說從angular2升到angular4再升到angular5，其實造成了我們google angular的時候，會需要自己篩選一堆angularjs的文章，一開始google還只需要angular2就好了，現在筆者都不知道怎麼google會比較好了。

react如果對於非常熟悉javascript的人，會開發得很舒服，而且社群可說是目前的前端最強大的，可找到的第三方元件非常多，資源也非常多，vs code的配合也不錯，不過開發上來說比較邏嗦，而且className的原因無法享受class的intellisense的好處，而且因為jsx的特性，我們隨便定義一個變數就是一個內部的component，寫起來非常舒服，隨時都能在一支檔案裡面把結構重整過，那react的缺點呢?

1. jsx語法，這種用javascript來寫全部的前端，就會造成美工人員很難跟前端人員配合，而且也可能會失去intellisense的好處。
2. 因為社群太強大了，有很多東西要整合，光是看一下在2016年學javascript是一種什麼體驗，就能知道有多少東西等著去學。
3. 寫法上跟angular 2和vue比真的比較囉嗦多了，基本上如果不套一些第三方的支援，react本身其實就乏善可陳，而且做一個大一點的應用，redux或flux在react是必用的，而不是一個選擇性而已。
4. 在一支jsx隨便一個常數就是一個元件，是好處也是一個極大的壞處，如果有某個developer在一支jsx裡面寫了上百個元件，維護起來就會很恐怖。
5. 官方幾乎除了react之外，其餘不做造成社群隨時都有一套做法出來，想也知道光是react本身跟一堆第三方的東西做整合，版本上的差異比對，或各種package的選擇，光要開始決定架構就是很頭痛了。

angularjs或許還是現在前端最多人使用的一個技術，因為他出來的久了，只要官方繼續支援，應該有很多前端人員會認為也不一定要學習新的技術，因為其實都大同小異，而且angularjs基本上自己有很好的封裝，不需要webpack甚至gulp都能封裝的很良好，在少人開發的專案裡面，只要掌握得宜，two way binding也不會是有多大的問題，可用的元件也挺多的，而且可以很方便的加入js就直接開發了，需要驗證相關等的再找相關的js來引入就行，又能方便的跟美工人員直接做配合，但缺點呢?

1. 官方還有很多angularjs的開發人員，可能都會跳去angular2了，angularjs肯定會越來越少支援。
2. two way binding在多人開發會是一場災難，數據流難以掌握，甚至我們使用了第三方的library，當要去修改原始碼會發現很多第三方的library有些都會因為dirty check造成效能的一些問題
3. 有一些概念和觀念上的混亂，讓人家很難決定要怎麼使用，比如provider and service and factory，還有如果想要開發一個元件的話，觀念上也複雜許多。
4. 就算你怎麼調校效能，都很難比新框架要好，所以如果考慮到效能問題，直接放棄angularjs就對了
5. devtool非常糟糕，基本上新的三大框架的devtool都好太多了，而對於開發抓問題和了解整個資料流來說，devtool太重要了，所以還是建議新框架吧，如果是從angularjs換新框架，學vue最快了真心不騙。

vue是一個很簡單的框架，看看官方文件很快就能上手了，可以快速的引入一支js檔開始開發，也有官方提供的cli甚至有多種版本，非常方便，體積小修改後反應快，跟原始的開發也沒什麼兩樣，如果我們使用vue cli的單文件結構，其實在拆成一個一個的元件，就像react一樣很容易維護，不用在html和js和css中切來切去，而且我個人對vue的一些設計都覺得好寫好讀不囉嗦，官方預設也就是hot reload了，改完成之後不會需要重整頁面，就能即時反應改後的狀況，而且光是讀一讀官方文件隨便會寫js的人都能上手了，而且最大的優點就是因為一個元件就是一個vue檔案，就可以極大的逼developer需要把元件拆成另一個檔案，這反而是我認為相對react最大的優點，但缺點呢?

1. 目前在歐美國家的熱門程度還不如angular和react。
2. 能在props修改對象和物件，但其餘的又不行，這點讓我覺得混亂。

前端構建工具

現在最流行的就屬webpack了，除此之外就是gulp了，一旦只要我們使用react或vue或angular2，只要我們想要模組化，必定需要用到import，這個是es6才引入的，當我們要使用es6的話，就需要前端自動組建工具了，不過如果你使用angularjs的話，倒是可以很快樂的使用，不需要學習任何前端組建工具，因為只要是di和factory，就可以很容易的防止全局汙染，而且也可以有架構的方式來做開發了，這就是很多新手可能會有的疑問，為何有些文章教的是引入一支js，但有些看起來則是要靠什麼工具來安裝，如果你用vue的話其實也可以完全不依賴於es6就方便使用，有興趣也可以看筆者這篇文章了解一下。

javascript語法

當你從jquery跳到前端框架的時候，都要強迫是用數據去影響畫面的觀念，這個時候就要學習更多原生javascript的api，甚至是使用lodash或ramda來方便做array或object的應用，而且最好是開始學習es6或typescript，以開始應付未來的新知識到來。

三種框架流行度比較

以2017年來說，成長最快的新星肯定是vue.js，我們可以從github來分析

我們可以從star和issue來了解一下各大框架的流行和穩定性的狀況，那效能方面呢?雖然vue.js官網已有說明比較，不過筆者有找到另一篇文章的比較(http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html)，而有很多人覺得大公司所推的品牌是比較好的，先不講這三種框架了，你知道jquery也是一個人做的，結果yahoo做的YUI又跑到哪去了呢?

結論

最後談談我為何會學習vue，第一點是因為如果維護一個舊有專案，可以很順利的不改大方向架構，而直接套用，非常的方便，很容易說服現有團隊成員開始學習，如果要做spa的話，vue也有很優秀的現成cli來做開發，在大型專案裡面，也有vuex或vue-rx可以使用，如果要seo的話又有nuxt，甚至是方便的cli跟開發體驗，壓縮後的大小，是我選擇的主要原因，任何技術都有適用場景，但我覺得簡單上手，又能構建大複雜應用，能適用在任何技術場景去適用，一個技術光是要開始就要先學很多東西才能開始，其實很難說服人，有時候我們在選用一個技術的時候，需要思考一下我們的場景真的有那麼複雜嗎?需要使用到那麼複雜的架構嗎，而目前筆者已用vue整合在十幾年的web form和jquery還有一堆第三方元件混合在一起開發，慢慢的把新增的需求甚至是即有頁面的某塊div做成vue元件給掛載回去，相當的成功，並且還能使用cli來大大完善開發體驗，如果有興趣了解筆者是如何進行的話，可以參考筆者的另一篇文章(https://dotblogs.com.tw/kinanson/2017/05/24/075328)，最後來一個簡單的總結比較，筆者不確定的就不比了，確定的才拿出來比較，如果有任何錯誤的地方請指正，而個人喜好的地方就不要拿出來戰了。

易學程度:vue>react>angular4

社群流行程度:react>vue?angular4 ps:vue的github星星數高很多，但以google trend來看，似乎angular還是高一點

ide支援程度:angular4>react=vue

適用場景:vue>react>>angular4 ps:除非你不是web，不然我幾乎找不到任何場景不能直接使用vue在現有頁面

程式碼精簡:vue>angular4>react

效能:http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html   vue>angular4>react

官方支援完整程度:angular4>vue>react ps:當你選擇了angular4幾乎就是一個完整的框架了，而vue官方出的目前是router和狀態管理最主要的部份，而react你要什麼功能幾乎就是去第三方尋找

官方文件:vue>react>angular4 ps:其實我覺得官方文件應該是很容易查閱的，但angular的官方文件就像是一本書，對很多人來說可能很好，但我即然要查官方文件，就是要簡短好查閱而且易懂，如果我想學觀念我會買書或去找教學影片，所以這個很取決於個人觀感，就像如果我想寫文章就是以後自己會回來查，所以我會盡量寫得簡短，以方便自己以後回來查閱，如果都寫得比官方囉嗦的話，那我就查官方文章就好了，我就不會傾向自己寫篇文章記錄了，而vue的易上手程度就跟他的官方文件有非常大的關係，好的官方文件帶你上天堂啊。