 |
VOOZH | about |
|
VOOZH | about |
JavaScript的框架、庫和工具的冒出似乎有點超出大家的想像，截止到2017年5月，在GitHub上搜索JavaScript項目，你會發現其已經超過了110萬；npmjs.org上有50萬個可用的軟體包，每月下載量近100億次。
對於正在學習web前端但不知道學習路線，不知道學習方法，不知道該如何找到工作的朋友，我還是要推薦下我自己建的前端學習群：528576461，首先你要是學前端的，其次不管你是小白還是大牛，小編都挺歡迎，群里每天都會分享前端相關乾貨，包括我自己（一名工作六年的前端老司機）最近熬夜花了一星期整理出的一份適合2017年自學的最新web前端資料，都送給大家，歡迎初學和進階中的小夥伴。
為了幫助大家更好地選擇JavaScript框架、庫和工具，本文將對流行的框架、庫和工具進行一些對比，但是由於篇幅有限，可能並不能包含到所有的框架、庫和工具，所以歡迎大家在下方補充評論，共同學習進步。
為了讓大家的討論在共同的水平線上，首先我們先來確定一下框架、庫和工具的概念。可能每個人對於這三者都有自己的理解，但是本文是基於以下的概念來進行討論的。
庫
庫是有用功能的有組織的集合。庫的典型功能包括處理字符串、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等。每個函數將值返回給調用應用程式，但是你可以從中選擇參數來應用。如果用汽車來做比喻，那就是你可以任意使用所有的零部件來搭建汽車，但是你必須自行構建引擎。
庫通常是提供一個更高的抽象層，平滑的實現細節和矛盾。例如，Ajax通常依賴於XMLHttpRequest API，但是由於各瀏覽器之間的差異，你可能需要修改幾行代碼來實現。但是庫可以提供一個更簡單的ajax函數，讓程式設計師更專注於高層次的業務邏輯。
因為庫不必在意更多的細節，所以開發時間可能會縮短20%，但是它也不是沒有缺點的：
庫內的錯誤可能難以定位和修復
開發團隊不能保證快速發布補丁
修補程序可能會更改API，並對您的代碼進行重大更改。
框架
框架是一個應用程式的骨架，它要求你以特定的方式處理軟體設計，並在某些點插入自己的邏輯。 通常框架提供事件、存儲和數據綁定等功能。 如果我們還是用汽車了來做類比，那麼框架就是一輛車的底盤、車身和發動機，為了讓車輛始終保持運行狀態，你可以添加、刪除或修改某些組件。
框架通常會提供比庫更高的抽象層，並且幫助用戶快速構建項目的08%，但它的缺點是：
如果應用程式超出了框架的範圍，那麼剩下的20%可能會很難完成；
框架更新可能很困難 ；
框架核心代碼和概念很少更新，但是同樣的事情，程式設計師往往都會在短時間內發現一個更好的解決方式；
工具
工具有助於開發，但並不是項目的組成部分。 工具包括系統構建，編譯器， transpilers，代碼分割器，圖像壓縮器等。
工具的應用使得開發過程變得更加容易，例如很多程式設計師都喜歡將Sass to CSS，因為它提供了代碼分離，嵌套，渲染時間變量，循環和函數。 瀏覽器不了解Sass / SCSS語法，因此在測試和部署之前，必須使用適當的工具將代碼編譯為CSS。
JavaScript框架和庫
jQuery
jQuery是最常用的JavaScript庫，它革命性的在客戶端開發，將CSS選擇器引入到DOM節點檢索加連結來應用事件處理程序、動畫和Ajax調用。jQuery近年來備受青睞，對於一個很需要JavaScript功能的項目來說，jQuery絕對是一個可行的選擇。
優點：
分布規模小；
學習曲線平緩，在線幫助多；
語法簡潔；
容易延伸；
缺點：
增加了本機API的速度開銷
瀏覽器兼容性的改善降低了它的重要性；
用法扁平
有些行業反饋有很多不必要的使用。
React
React可能是去年一年最受關注的庫了吧。React聲稱是一個用於構建用戶界面的JavaScript庫，它專注於MVC開發的「View」部分，並且可以輕鬆創建保留狀態的UI組件。 它是實現虛擬DOM的第一個庫， 內存結構計算差異，有效地更新頁面。
從使用情況來看，React的情況似乎有些不好，但這是因為它是在應用程式中使用而不是網站，38%的程式設計師表示他們正在使用該庫。
優點：
小巧，高效，快捷靈活；
簡單的組件模型；
良好的文檔和在線資源；
伺服器端渲染；
處於高速發展期；
缺點：
需要學習新的概念和語法；
構建工具必不可少；
要求其他庫或框架提供Model和Control；
與修改DOM的代碼和其他庫不兼容；
Lodash and Underscore
Lodash和Underscore提供了數百個功能性的JavaScript實用程序來補充本地字符串，數字，數組和其他原始對象方法。 它在客戶端使用率較低，但是可以在伺服器端的Node.js應用程式中使用很頻繁。
優點：
小而簡單；
擁有優質文檔，易於學習；
與大多數庫和框架兼容；
不擴展內置對象；
可以在客戶端或伺服器上使用；
缺點：
有些方法只適用於ES2015及更高版本的JavaScript。
AngularJS 1.x
Angular最流行的版本是1.x版本，它使用雙向數據綁定擴展HTML，同時將DOM操作與應用程式邏輯脫鉤。儘管版本2已經發布（當然現在已經到了版本4），但是Angular 1.x仍在開發中。
優點：
眾多大公司採用；
以單一的解決方案來生產現代Web應用程式；
一個解決方案來生產現代Web應用程式；
MEAN堆棧（MongoDB，Express.JS，AngularJS，NodeJS），有眾多文檔和教程可用來參考；
缺點：
學習曲線更加陡峭；
大代碼庫
不能升級到Angular 2.x
Angular 2.x (now 4.x)
Angular 2.0於2016年9月發布。這是一個完整的重寫，它引入了使用TypeScript（被編譯為JavaScript）創建的基於模塊化組件的模型。 Angular 4.0版本於2017年3月發布。
Angular2+和1.0版本截然不同，與其他也不兼容，所以也許谷歌應該給該項目另外起一個名字。
優點：
單一的解決方案來生產現代Web應用程式；
儘管Angular 2+的可用文檔較少，但它仍是MEAN堆棧的一部分；
對於熟悉靜態類型語言（如C＃和Java）的人員，TypeScript提供了一些優勢。
缺點：
更陡峭的學習曲線；
大代碼庫；
不能從Angular 1.x升級；
與1.x相比，Angular 2.x的使用率相對較低；
儘管是Google的項目，但Google似乎並沒有使用它？
Vue.js
Vue.js是一個用於構建用戶界面的輕量級漸進框架。 該核心提供了一個React-like 的虛擬 DOM-powered層，它可以與其他庫集成，也可以支持單頁應用程式。
Vue.js使用HTML模板語法將DOM綁定到實例數據。 模型是在更改數據時更新視圖的純JavaScript對象。 附加工具提供了scaffolding，路由，狀態管理，動畫等功能。
優點：
易於上手，普及度高；
起點簡單，但完成滿意度高；
依賴性小，性能好；
缺點：
是一個新項目，所以風險可能會很大；
依賴開發人員來更新；
相對同類框架，資源較少；
Backbone.js
Backbone.js是提供常見的伺服器端框架MVC結構最早的客戶端選項之一，它唯一的依賴是由同一開發人員創建的Underscore.js。
Backbone.js聲稱是一個庫，因為它可以與其他項目集成，但我認為大多數程式設計師都認為它是一個框架。
優點：
體積小，重量輕，複雜度低；
不添加HTML的邏輯；
文檔豐富；
採用了許多應用，包括Trello，WordPress.com，LinkedIn和Groupon；
缺點：
與AngularJS等相比，抽象度較低；
需要額外的組件來實現數據綁定等功能；
新的框架基本已經不再採用MVC架構；
Ember.js
Ember.js是基於Model-View-ViewModel（MVVM）模式的框架之一。 它在單個包中實現模板化，數據綁定和庫。如果 Ruby on Rails體驗的用戶，能夠迅速熟悉其配置概念。
優點：
為客戶端應用程式提供單一解決方案；
程式設計師可以快速開發—其使用jQuery；
良好的向後兼容性和升級選項；
採用了現代Web開發標準；
缺點：
與其他正在向較小組件結構移動的框架相比，被認為是單一的；
陡峭的學習曲線 ；
Knockout.js
較早的MVVM框架之一，Knockout.js使用觀察者來確保UI與底層數據保持同步，它具有模板和依賴關係跟蹤。
優點：
小而輕便，無依賴
支持回溯到IE6
優質文檔；
缺點：
較大的項目可能變得複雜；
發展速度已經放緩；
使用情況正在下降；
值得注意，下面這些項目雖然不如上面的受歡迎，但還是值得一試的：
Polymer- 可以跨瀏覽器支持HTML5網頁組件的庫
Meteor - 一個用於Web應用程式的全棧平台。
Aurelia - 一種相對較新的，輕量級的跨平台框架
Svelte - 一個將框架原始碼轉換為JavaScript的新項目
Conditioner.js - 一個基於狀態自動加載和卸載模塊的庫。
工具：General-Purpose Task Runners
構建工具可以自動執行各種Web開發任務，例如預處理，編譯，優化圖像，縮小代碼，運行測試等等。所有的任務都可以在一個可執行包中管理，比較受歡迎的工具包括：
Gulp.js
Gulp雖然不是第一個工具，但是它是最受歡迎的工具，Gulp使用易於閱讀的JavaScript代碼，將源文件加載到流中，並在將數據輸出到構建文件夾之前通過各種插件管理數據。
npm
npm是Node.js包管理器，但其腳本工具可用於運行通用任務。 對於具有很少依賴關係的簡單項目來說，這是一個有吸引力的選擇，但是對於複雜的任務來說，它可能就有些有心無力。
Grunt
Grunt是第一個實現批量採用的JavaScript任務的工具，但其速度和複雜的JSON配置，使得Gulp異軍突起。如今，這些問題解決了，Grunt仍然是一個不錯的選擇。
工具：Module Bundlers
多個JavaScript文件的管理成為了程式設計師們的煩惱，在默認情況下，瀏覽器文件未被編譯，因此依賴關係必須以適當的順序加載或連接。雖然有各種選項，如ES6模塊和CommonJS，但瀏覽器支持畢竟是有限的，因此Module Bundlers就變得至關重要。
Webpack
Webpack支持所有流行的模塊選項，並已成為React開發的代名詞。 雖然它聲稱是一個Module Bundlers，但是也可以用作通用任務運行程序。
Browserify
Browserify支持Node.js使用的CommonJS模塊，將所有模塊編譯成單個瀏覽器兼容的文件。
RequireJS
RequireJS是一種瀏覽器中的模塊加載器，它也可以在Node.js中使用。
Tools: Linting
「Linting」是分析你的代碼的潛在錯誤或偏離語法標準。 有了這種工具，你永遠不出現只有一半括號或者未聲明變量的情況。
ESLint
ESLint是一種可插拔的Linting工具，每個規則都是一個插件，因此可以根據您的喜好進行配置。
JSHint
一個靈活的JavaScript linter，在真正的錯誤和迂腐的語法需求之間取得了很好的平衡！
JSLint
JSLint是最早的Linter之一，遵循一套嚴格的默認規則。
Tools: Test Suites
在應用程式的編寫過程中有一個很重要的步驟那就是代碼測試。代碼測試的工具有很多，如Ava、Tape和Jest。下面，我們就為大家介紹最受歡迎的三個選擇：
Mocha
Mocha是一個JavaScript測試框架，可以在Node.js或瀏覽器中運行測試。 它支持異步測試，並且經常與Chai配對，以使測試代碼能夠以可讀取的方式表達。
Jasmine
Jasmine是一個行為驅動的測試套件，可以在瀏覽器中自動測試您的UI和交互。
QUnit
QUnit是一個單元測試框架，可以通過特定參數檢查函數結果。
Tools: Miscellaneous
雖然JavaScript比較常見常用，但是也並不是每個程式設計師都喜歡JavaScript，例如TypeScript，LiveScript和CoffeeScrip這些也可以使得程式設計師的開發過程很愉快。
JavaScript-powered HTML的引擎模板有數十種，其中包括Mustache，Handlebars，Pug（Jade）和EJS。但在我而言， 更喜歡保留JavaScript語法（如EJS和doT）的輕量級選項。
如何自己來編寫文檔呢？ES2015兼容的文檔生成器包括ESDoc，JSDoc，YUIdoc，documentation.js和Transcription。
寫在最後
如果你想要走在技術的前端，那麼React以及和其相關的技術發展方向值得關注。如果你想要為Web應用程式選擇一個安全的選項，那麼你可以考慮Vue.js。
雖然整體框架現在不再那麼受歡迎，但是如果你是要做嚴格的大型項目結構，AngularJS會是一個不錯的選擇。雖然，現在大多數人還在使用1.0版本，但是從長遠來看，學習一下TypeScript，選擇4.0版本會更加安全。
jQuery雖然在技術新聞中很少被提到，但是它的學習曲線平緩，幾乎所有的程式設計師都可以理解，而且它現在還在積極開發。
工具的選擇會因項目而異，但是不可否認，大多數項目都會選擇Gulp和WebPack。每個項目和團隊的技能都是不同的，所以你在選擇的時候要在有限時間內準確評估。
最後，永遠不要忘記庫，框架和工具是可選的！ JavaScript在過去的十年中發生了革命性的變化，幾乎每隔幾個月都會有熱門框架的出現，所以很容易就掉進陷阱之中。所以，在選擇時，就要考慮自己的實際需求，也要積極學習新的知識。
