前端回顧：2016年 JavaScript 之星

来源:http://www.cnblogs.com/lhb25/archive/2017/04/04/javascript-start-of-2016.html
-Advertisement-
Play Games

JavasScript社區在創新的道路上開足了馬力，曾經流行過的也許一個月之後就過時了。2016已經結束了。你可能會想你是否錯過一些重要的東西？不用擔心，讓我們來回顧2016年前端有哪些主流。通過比較過去12個月里Github所增加的star數，我們依次來看看哪些項目吸引了大多數眼光。 ...


　　JavasScript社區在創新的道路上開足了馬力，曾經流行過的也許一個月之後就過時了。2016已經結束了。你可能會想你是否錯過一些重要的東西？不用擔心，讓我們來回顧2016年前端有哪些主流。通過比較過去12個月里Github所增加的star數，我們依次來看看哪些項目吸引了大多數眼光。

　　在2015，React是當之無愧的王者，Redux贏得了與flux之間的戰爭，攻陷了Flux的城池。那麼，誰會是2016年的JavaScript之星呢？

您可能感興趣的相關文章

 

我們利用bestof.js.org分析所涉及的項目技術。（bestof.js.org羅列了一系列與web平臺相關的最好的項目）

1. 2016最流行項目

通過比較去年最火的10個項目，你可以總覽2016的web前端技術發展，會發現：

這彰顯了2016年JavaScript應用的全面性以及多樣性。

2016年的王者是······

Vue.JS在去年獲得了超過25000個star，這意味著每天有72個star，超過了包含React以及Angular在內的其它任何框架。

Vue.JS於10月發佈了2.0版本，這一版本為了更好的表現加入了Virtual DOM渲染方式。

Vue.JS已經在很多大公司的生產環境投入使用（包括阿裡巴巴，中國最大的電子商務公司），所以，你可以放心地使用它。

現在Vue.JS已經有一個相對成熟的生態體系，包括路由（vue-router）以及狀態管理庫（Vuex）。

看起來Vue.JS結合了React（組件化思路）以及Angular（html模板增強語法）的精華。

2. 前端框架

這個前端框架清單可能是2016年JavaScript疲勞的元凶之一。似乎每個月都有一個新的競爭者流行起來，推動著JavaScript的創新。

準確地說，這裡涉及兩種不同類型的框架：

  • 全能型框架，創建一個現代web應用所需的特性全部有，包括路由、數據獲取、狀態管理。例如AngularJS，Angular 2，Ember或者Aurelia。
  • 專註於UI層的輕量級解決方案，例如React，Vue.JS，以及Inferno等等。

我們已經提到了Vue.JS(排名第1的那個)，讓我們來看看其它的競爭者。

React以及它的競爭者

React排名第2，沒有一個前端會忽視React以及它那豐富的生態圈。

React如此流行以至於其它的庫總想取其精華，去其糟粕，在構建以及瀏覽器渲染方面提高效率。

Inferno是這類類庫里最流行的項目了，它聲稱自己是最快的React替代品。

Preact在排行榜中緊鄰Inferno，同樣是React一個很好的替代品。它的生態系統相當成熟，舉個例子，擁有離線緩存、路由以及相容模板功能的樣板，你可以利用這個樣板使用你Preact項目裡面的已存在的React庫。

Angular 1 和 2

Angular如今已經分成2個倉庫了，因為Angular2是對Angular1的全部重寫，儘管有一些概念仍然相同。

Angular 2 基於 TypeScript 以及 ES6 編寫，使其更加“現代”、“縝密”。

AngularJS這個項目指代的是其分支 1.x ，它仍然在許多項目中使用，並且仍會流行一段時間。

。Ember也值得一提，雖然它排不到前十，它的生態圈依然龐大。

因此，看起來，相比於封裝好的包含所有特性的全能型框架，2016年開發者們更青睞輕量型框架，更願意自定義解決方案。

3. Node.js 框架

在2016，從未如此簡單去創建以及部署一個node.js應用，可利用：

  • Now
  • Webtask.io
  • Stdlib

類似於 Gomix 的工程項目更是降低了進入 node.js 世界的門檻，它使任何人只需要通過一些點擊操作就能夠直接在瀏覽器編寫以及分享 node.js 代碼。

那麼，如果你不得不寫一個web應用，你會選擇哪一個框架？

Express

當你想用 node.js 寫一個web應用的時候，Express 經常會被認為web伺服器的選擇之一。大多數 node.js 開發者對於它的設計哲學（核心很小，但可以通過各種中間件進行拓展）非常熟悉。

Koa

Koa的設計哲學與 Express 類似，只不過它使用了 ES6 中的 generators 來避免回調地獄問題。

Feathers

對於以“服務端導向”架構設計，Feathers是一個非常靈活的解決方案，很適合用來構建node.js 微服務。

Nodal

Nodal框架立志於解決連接到PostgreSQL資料庫的無狀態分散式服務問題。

Keystone

Keystone是最好的MongoDB數據管理以及運行終端解決方案之一，它主要是用來處理從MongoDB資料庫傳來的內容。管理界面是直接從模型裡面生成的，擁有所有的CRUD操作以及很好的過濾功能。

Sails

Sails是一個完全的MVC框架，靈感來源於Ruby on Rails（所以把它命名為Sails！）。它已經發佈了挺長一段時間了，相容各種類型的資料庫，SQL或者no-SQL。

Loopback

Loopback是另一個擁有很多特性的成熟框架，其中包括需要token驗證的許可權以及相容任何資料庫。

最牛逼的特性是其API探測功能。這個特性讓開發者以直觀的方式檢測所有的API端點，在此過程中，開發者還可以去檢測所有用戶的token。如果你想要去開發一個新的API，它會是很好的選擇。

4. React模板生成器

React是一個非常棒的UI庫，但是利用React配合現代web開發工作流工具需要很多配置。那麼，怎麼才能開始構建一個真實存在的應用呢？

React模板生成器以及其它的starter開發工具包給了我們這個答案。

創建React應用

Facebook為了滿足這個需求，提供了一種更輕便的路線，被稱為 Create React App，利用它可以很方便地開始一個新的React項目。

Dan Abramov（Redux的創建者，目前在Facebook工作）為尋找構建簡單性和自主配置性之間的平衡做了很大的貢獻。例如，不需要繁雜的樣式解決方案（僅僅只是單純的CSS），不需要服務端渲染，依舊可以將應用很好地打包，同時，開發體驗也非常棒。

與其競爭者最主要的區別在於，如果你使用了 Create React App，它就會成為你項目中的一個依賴，你只會看到你的應用的代碼，其它的黑魔法都被隱藏起來了。當然，你可以自由選擇何時升級依賴包，這並不僅僅是開始。

React模板生成器

被稱為 React boilerplate 的生成器擁有你所需要的一切，包括 Redux 以及一些比較好的本地特性，很好地利用了 web worker的技術優勢。

它允許開發者創建一個被稱為漸進式web應用（或者PWA）：web應用本地運行，使用了一種被稱為Service Worker的技術，你可以閱讀Nicolás Bevacqua所寫的這篇文章。

Next.js

Next.js，由來自Zeit忙碌的開發者所創建，擁有服務端渲染特性，可以通過此特性創建“萬能應用”（或者我們在2015年所說的同構應用），這代表應用不管是在客戶端還是服務端都基本上可以運行同一套代碼。

5. Mobile

JavaScript無處不在，現在你都可以使用web開發者的技術（HTML，JavaScript，CSS）來創建移動端應用。

React Native

利用React Native，基於相同的代碼以及React開發者熟悉的理念方法，你可以構建iOS和Android不同平臺的移動端應用。想要瞭解更多關於構建iOS以及Andriod平臺應用的知識，請移步官方教程。

其它的解決方案，基於Cordova，常常依賴於Webview去渲染頁面，但並沒有原生流暢。“Write Once Run Everywhere···”開發者們的夢想終於成真啦！

Ionic

Ionic是“hybrid”應用概念的先鋒。本質上，它是基於Cordova來獲取移動設備的各種特性。它非常成熟，擁有一個龐大的生態系統。

NativeScript

NativeScript與React Native目的（利用web技術開發真正的移動端應用）相同。它有兩種形式，NativeScript Core以及NativeScript + Angular 2

以及······

2017年有一項快完成的項目：Weex，一個基於Vue.JS的跨平臺移動端UI框架。

6. 編譯器

我們現在這裡討論的編譯器（或者“轉換器”）是指其將其他語言（或者JavaScript的超集）轉換JavaScript。它們將代碼轉換成“標準JavaScript”代碼，即瀏覽器（或者node.js）可以執行的代碼。

舉個例子，編譯器使開發者可以使用最新版本的JavaScript（ES6）而不需要擔心瀏覽器相容問題。

TypeScript

引領潮流的轉換器是TypeScript，它為web開發者帶來了Java以及C#開發者所使用的靜態類型。Angular 2 正是基於TypeScript增加了許多的特性（traction）。這裡也存在在JavaScript中使用類型的優勢與劣勢，你可以讀下麵的兩篇文章來思考自己的觀點。

Babel

，同Webpack，Babel基本上已經成為一個標準工具，用來編譯ES6代碼以及使用類似React（JSX）類庫的模板。最初，它只是用來編譯ES6，現在藉助那些插件，已經成為一個用來做代碼轉換的更加通用的工具。

Flow

Flow並不是一個編譯器，它只是一個靜態類型檢測工具，用來“標註”JavaScript代碼。基本上，在代碼中使用Flow只是增加對於已知類型的註釋
（這裡閱讀更多關於使用Flow去寫模塊）

它用在Faceboook項目的代碼中。自從Facebook成為開源世界（開源項目例如React，React Native，Flux， Immutable，Jest···）的主角之一，這裡面有太多的意義了。

CoffeeScript

在過去幾年中，基於Python以及Ruby語法的CoffeeScript以及它精妙的語法成為最流行的編譯器，但在2016，它不再那麼流行，很多開發者由CoffeeScript轉向搭配Babel的ES6。

7. 構建工具

在2016，很難想象一個web應用沒有經過任何構建過程。你經常需要通過構建來轉換模板以及優化資源，保證你的web應用在生產環境正常運行。

Wepack

Webpack是用來構建單頁應用的主要工具，它與React生態良好相容。最新發佈的版本2增加一些前瞻性功能（可通過這篇介紹查看）

Gulp

Gulp是一個通用任務運行器，可以用來處理任何形式（包括文件系統）的自動化過程，，所以，它並不是Webpack或者Browserify的直接競爭對手。

類似於Grunt，Gulp通過整合任務的方式工作：你可以讓它壓縮合併一系列的資源。但它跟Webpack以及Browserify不同，並不處理模塊化的JavaSript代碼。

但它可以與Webpack很好地配合使用，即使開發更願意使用npm scripts。

Browserify

Browserify，由於其簡便性，很多node.js開發者喜歡它。

大體上，它會利用幾個node.js包來生成一個簡單的構建後的文件作為輸出。但看起來，一個類似Webpack這種自主配置更強的工具更適用於web應用開發工作。

以及······

2017年一個模塊化處理工具正在崛起，它更強調性能問題，那就是rollup。

它使用了具有被稱作“Tree shaking”的特性ES6模塊來創建bundle，裡面只有在你代碼中使用的函數，而不是一整個類庫。

8. 測試框架

Jasmine以及 Mocha是最著名的兩個測試框架，但AVA和Jest在2016年發展更加迅速。。

AVA

AVA，由多產的Sindre Sorhus創建，主要關註於性能（平行測試）以及ES6。AVA的語法與標準測試框架（例如Tape和Node-tap）相似。

Jest

Jest，又一個Facebook項目，在上個星期獲得了很多的關註。在React社區，它很出名，越來越多的人開始向Jest遷移（看這個故事），
在2017年，它有可能成為最流行的測試框架。

Jest擁有很好的內置Mock數據能力，而其它的測試框架需要依賴類似於Sinon.js這樣的類庫。

9. IDE

關於IDE，不得不提2個最受歡迎的開源IDE是利用web技術開發的。

Visual Studio Code

在我們的統計結果中，微軟的Visual Studio Code獨占鰲頭。

它很好的整合了TypeScript以及node.js。一些開發者提到了開發速度的提升，這得感謝“IntelliSence”特性（整合了高亮以及自動補全）
它提供了很好的TypeScript和node.js的集成環境。一些開發者覺得這個IDE的“IntelliSense”功能（即高亮和自動補全）加快了開發速度。
提到“開源”和“微軟”，再也不是矛盾的啦！

Atom

Atom，由Github主推，利用Electron創建（類似於其它的桌面應用，包括桌面客戶端），其並不輸於Visual Studio Code太多。關於Atom，有一個有趣的事情：它主要用CoffeeScript編寫的！

10. 靜態網頁生成器

靜態網頁生成器（或者被稱為“SSG”）用來生成一系列html，css以及JavaScript文件的工具。你可以將這些文件部署在任意一個簡單的web伺服器上面（Apache或者NGNX），不需要大動干戈或者設置一個資料庫或者使用任何的web框架。正如Gatsby網站這麼說：

Build sites like it's 1995 像在1995年一樣那麼簡單地開髮網站。

靜態網頁很快，很強大並且很容易去維護。

SSG非常流行，因為有很多種好的方法能夠免費去建立網站：

  • Github pages
  • Gitlab pages
  • Netlify
  • Surge
  • Now static
Hexo

在2016，利用node.js構建的最流行的SSG就是Hexo。它是一個一站式SSG，與Wordpress這樣的CMS系統類似，例如可以用來創建博客。它有很多特性，包括國際化的插件。

Gatsby

新的入局者Gatsby是一個非常有趣的解決方案，與競爭者不同，它利用React生態系統來生成靜態html文件。你可以選擇與React組件、markdown文件以及服務端渲染整合，這使得它非常強大。

結論

儘管JavaScript疲勞以及各種戲劇性的事件（還記得“left-pad”門吧？），2016年社區發展良好，Vue.JS以及React Native爆發，Yarn以及 Create React App新軍突起。

我們已經討論了2016年Github上面引領風尚的項目，但真正重要的是開發者的滿意程度。所以，如果你想要更多乾貨，去查一下Sacha Greif的JavaScript現狀調查吧，收集了超過9000個回覆！

 

您可能感興趣的相關文章

 

本文鏈接：前端回顧：2016年 JavaScript 之星

編譯來源：夢想天空 ◆ 關註前端開發技術 ◆ 分享網頁設計資源


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ubuntu離線安裝VSCode（附帶前期準備工作）
    跨平臺系列彙總：http://www.cnblogs.com/dunitian/p/4822808.html#linux 在說正式步驟前先把準備工作做到位： 1.IP設置，這個因為是GUI的，手動設置一下就好了，如果想知道命令行的方式看這篇文章：（http://www.cnblogs.com/dun ...
  • 在Unity編輯器中增加腳本的中文說明
    在游戲中，程式，美術，策劃甚至音效都是分工合作的。很多時候，對於unity3d中一堆英文，大家都會看得很鬱悶。尤其是不同的程式員，命名方式也不盡相同，甚至還是用拼音。因此，在腳本中增加一些中文顯示，就能夠很好地解決這個問題。 首先，unity中對於欄位(Field)已經有了很好的中文顯示方法[Hea ...
  • 建造者模式（Builder Pattern）
    （四）建造者模式（Builder Pattern） 1.建造者模式（Builder Pattern）使用多個簡單的對象一步一步構建成一個複雜的對象。這種類型的設計模式屬於創建型模式，它提供了一種創建對象的最佳方式。 一個 Builder 類會一步一步構造最終的對象。該 Builder 類是獨立於其他 ...
  • 抽象工廠模式（Abstract Factory）
    （二）抽象工廠模式（Abstract Factory） 1.抽象工廠模式（Abstract Factory），提供了一個創建一系列相關或相互依賴對象的介面，而無需指定它們具體的類。 2.抽象工廠模式是圍繞一個超級工廠創建其他工廠。該超級工廠又稱為其他工廠的工廠。這種類型的設計模式屬於創建型模式，它提 ...
  • 資料庫與java的連接
    jdbc: java database connection,也就是java的資料庫連接。 作用： 完成資料庫數據和記憶體數據的交互。 為了屏蔽不同資料庫的差異，在記憶體和各種資料庫之間建立了一個介面標準。每個廠商按照介面的標準來實現介面類。 jdbc 是java連接資料庫的一套標準。該標準中定義了一系 ...
  • Mysql添加用戶，給用戶授權
    創建用戶 ? 1 CREATE USER 'username'@'host' IDENTIFIED BY 'password'; ? 1 CREATE USER 'username'@'host' IDENTIFIED BY 'password'; ? 1 CREATE USER 'username ...
  • C#基礎之簡單工廠模式計算器
    類庫：.dll文件，使用類庫來封裝常用的功能，無法單獨運行。 abstact class Calculator類｛欄位Num1，欄位Num2，abstract int GetResult（）方法｝ Add類：Calculator類｛override int GetResult()返回Num1+Num ...
  • 設計模式學習筆記-抽象工廠模式
    一、概述 提供一個創建一系列相關或相互依賴對象的介面，而無需指定它們具體的類。 二、模式中的角色 AbstarctProduct(IProduct)：為一類產品對象聲明一個介面； ConcreteProduct(MySqlProduct、SqlServerProduct)：定義一個將被相應的具體工廠 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類