2017前端發(fā)展回顧

lmxdawn 發(fā)布于2019-08-22 13:47 / 518人閱讀

摘要：前端開發(fā)在年依然持續(xù)火熱，本文將對熱點事件做一個總結。版的和協(xié)議在前端領域，一直獨占鰲頭。年又發(fā)布了一個重大的版本更新。主要是配合使用了服務工作線程。而且還提供了供前端開發(fā)者接入?？焖侔l(fā)布了和在悄悄地跳過之后，在月號正式發(fā)布。

譯者按： 老技術日趨成熟，新技術層出不窮。

原文: A recap of front-end development in 2017

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。

前端開發(fā)在2017年依然持續(xù)火熱，本文將對熱點事件做一個總結。

16版的React和MIT協(xié)議

在前端領域，React一直獨占鰲頭。2017年又發(fā)布了一個重大的版本更新 version 16。在新版本中，引入了fiber結構來支持異步UI渲染。該版本也提供了一些錯誤機制方便處理未預料的應用失敗，以及很多其它功能。

不過，最令人驚訝的不是它的新功能新特性，而是對開源協(xié)議的更改。Facebook新的協(xié)議使得很多公司不再使用React。另外，Jest, Flow, Immutable.js和GraphQL也使用了該協(xié)議。

Progressive Web Apps (PWA)

我們一直在尋找一個可以使用網(wǎng)頁技術完美支持其它客戶端的方法。谷歌專研于對網(wǎng)頁應用增強，將它轉換為progressive web apps(PWA"s)。這一思路在2017年被大眾迅速接受。PWA使用現(xiàn)代的瀏覽器技術使得訪問網(wǎng)頁應用的體驗和原生移動應用一樣。并且在性能上有了大幅度的提升，而且支持離線訪問，像推送通知這樣原生APP才有的功能也支持了。PWA主要是配合manifest.json使用了服務工作線程(service workders)。

Yarn的出現(xiàn)完善了JS軟件包系統(tǒng)

NPM自從誕生以來已經(jīng)成長巨大，但是卻缺失一些很重要的特性，好在被Yarn支持了。Yarn最主要的功能就是包緩存、一個保證構建確定的鎖文件、并行操作、平鋪依賴關系。這些功能非常有用，以至于NPM在5.9版本也實現(xiàn)了。Yarn累計已經(jīng)有10億次下載(現(xiàn)在平均每個月125萬)，在Github上有28000+的收藏。就算你沒有使用Yarn，Yarn對整個包管理系統(tǒng)的提升也讓你受益。

CSS網(wǎng)格單元布局

CSS終于支持網(wǎng)格單元布局，瀏覽器很快也會進行支持。在過去，我們需要使用表格(table),float,flex和inline-block來實現(xiàn)網(wǎng)格布局。如今，原生的CSS網(wǎng)格布局讓我們可以定義行列。趕緊來學習吧: https://gridbyexample.com/。

主流瀏覽器支持WebAssembly

WebAssembly(wasm)已經(jīng)開始被所有主流瀏覽器支持。wasm是一個針對瀏覽器的腳本，它是一種底層級(low-level)字節(jié)碼格式。因為它的底層性，執(zhí)行效率可以非常高。而且還提供了JavaScript API供前端開發(fā)者接入?；鸷呀?jīng)聲明所有瀏覽器對wasm的支持。詳情查看: WebAssembly support now shipping in all major browsers

Serverless架構

2017年Serverless應用持續(xù)增熱，這是一種新的可以提高性能又減少資源耗費的架構。你的客戶端完全從服務器從分離出來，這樣就可以只關注應用本身而不是架構。一個常見的實現(xiàn)方法是用AWS API Gateway和AWS Lambda函數(shù)作為后臺服務。如果想體驗一下，從這篇博客開始吧：A crash course on Serverless with Node.js。

Vue.js持續(xù)火爆

盡管React占據(jù)這主流市場，尤雨溪大神的Vue作為一個后起之秀大放異彩。Vue基于組建的架構，它已經(jīng)成為繼React之后的首選。Vue已經(jīng)被大型公司使用比如GitLab。

Fundebug是全棧JavaScript錯誤監(jiān)控平臺，支持各種前端和后端框架，可以幫助您第一時間發(fā)現(xiàn)BUG！

CSS-in-JS

JavaScript的技術不斷的演進，生態(tài)系統(tǒng)逐漸穩(wěn)定。CSS技術也不斷在進步。2017年，主要的進步一些單調的特性改進和吸收CSS-in-JS，也就是說我們可以通過寫JS代碼來定義CSS。現(xiàn)在還不清楚該技術是否能否主導未來的CSS走向，不多這種新穎的技術確實解決了基于組件開發(fā)的應用中很多的問題。

2017年，Max Stoiber, Glen Maddern, Phil Plückthun開發(fā)的styled-components占據(jù)了主導地位。Kye Hohenberger開發(fā)的Emotion庫被廣泛使用。Glamorous也是一個不錯的選擇，由PayPal的Kent C. Doods, 和一批充滿激情的開發(fā)者維護。閱讀這篇文章了解更多: CSS-in-JS Roundup: Styling React Components。

靜態(tài)網(wǎng)站生成

2017年靜態(tài)網(wǎng)站生成也開始熱起來。像Gatsby這樣的網(wǎng)站可以使用React等現(xiàn)代工具來構建靜態(tài)網(wǎng)頁。不是所有的網(wǎng)站都需要復雜的網(wǎng)頁技術。靜態(tài)網(wǎng)站生成會給您更加極致的網(wǎng)頁訪問速度。如果您在尋找合適的例子，React官方文檔就是使用Gatsby生成的。

靜態(tài)網(wǎng)站生成有一套工具簡稱為JAMStack：JavaScript，APIs，Markup。JAMStack使用預編譯好的HTML文件，可復用的APIs以及JavaScript代碼來處理請求。Netlify是一個很好的工具并且提供免費的Host服務。Brian Douglas 寫了一篇很好的文章：通過實現(xiàn)Hacker News來對比JAMStack和服務端渲染APP的優(yōu)劣。

GraphQL

GraphQL日趨火爆，有勝過REST之勢。Samer Buna甚至宣傳REST已死。GraphQL允許客戶端自定義數(shù)據(jù)，然后一次獲取。而REST方案需要維護獲取很多無效數(shù)據(jù)。Github的新版API已經(jīng)使用GraphQL重寫。Johannes Schickling為此開發(fā)了Graphcool(GraphQL Backend Development Framework)框架。

React Router 4

由Ryan Florence和Michael Jackson開發(fā)的React Router最開始僅僅是React中可以使用的一個router包，而現(xiàn)在已經(jīng)完全變成真正的React Router，成為React的部件之一。所有的API都基本穩(wěn)定，React Training Team承諾該項目不會有大的變動，可以放心使用。

Angular快速發(fā)布了v4和v5

在悄悄地跳過Angular 3之后，Angular 4在3月23號正式發(fā)布。在Angular 4中，Angular團隊吸收了社區(qū)項目Angular Universal。Angular Universal提供了服務端渲染Angular應用的機制。Angular Animation從@angular/core中移出。如果你需要使用，需要手動引入。Angular的AOT編譯(Ahead Of Time compilation)經(jīng)過重構，性能提升。而生成的代碼的體積也大幅縮小，最多可達60%。

在版本5中實現(xiàn)了一些等待了很久的改進功能。Angular 5提供了@angular/service-worker，因此創(chuàng)建PWA變得非常簡單。Angular的編譯器經(jīng)過優(yōu)化，編譯時間縮短。Angular Router將所有生命周期Hook暴露，包括ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd。

TypeScript和Flow

TypeScript有大量的開發(fā)者擁泵，F(xiàn)low提供了一個靈活地引入類型的方法可以避免對現(xiàn)有代碼進行大量的重構。很多開發(fā)者都抱怨JavaScript沒有類型，微軟設計的TypeScript應運而生，在最新版本的Angular中，TypeScript已經(jīng)是默認配置。Flow是Facebook實驗室研發(fā)的一個類型檢查工具。

2018年我們期待什么

在找到基于組件架構APP適合的CSS方式之前，CSS技術還將持續(xù)發(fā)酵；

越來越多的公司會使用統(tǒng)一的代碼庫來處理移動端和網(wǎng)頁端，比如React Native和Flutter；

隨著離線能力和和移動的無縫銜接，網(wǎng)頁APP會更加接近原生；

WebAssembly將會前進一大步；

GraphQL持續(xù)挑戰(zhàn)REST；

Flow和TypeScript使得JavaScript更加地結構化；

容器技術會影響到前端架構的設計；

虛擬現(xiàn)實會繼續(xù)成熟，依托于大量成熟的庫A-Frame，React VR，Google VR；

將會有人使用區(qū)塊鏈和web3.js開發(fā)出很酷的應用；

版權聲明:
轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/12/25/a-recap-of-frontend-dev-2017/

GPU云服務器云服務器業(yè)務發(fā)展回顧與展望 2017前端前端發(fā)展 web前端工程師發(fā)展

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/92440.html

前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術創(chuàng)業(yè)踩過的坑給技術創(chuàng)業(yè)者建議等內容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領域內容，以對外文資料的搜集為...

xorpay 2019-08-22 11:15 評論0 收藏0
ELSE 技術周刊(2017.12.25期)

摘要：業(yè)界動態(tài)引擎發(fā)布，在速度和內存優(yōu)化上又帶來了一些提升。程序人生前端技術發(fā)展回顧前端領域在年再次以狂熱的節(jié)奏向前發(fā)展。技術周刊由小組出品，匯聚一周好文章，周刊原文。業(yè)界動態(tài) V8 release v6.4 V8引擎發(fā)布v6.4，在速度和內存優(yōu)化上又帶來了一些提升。對于instanceof操作符的優(yōu)化，帶來了3.6x速度提升，同時使得uglify-js提高了15-20%(結果來自Web ...

Carbs 2019-08-21 18:22 評論0 收藏0
2017年 JavaScript 框架回顧 -- 前端框架

摘要：年，已經(jīng)成為了最受歡迎的前端框架。年前端框架情況上圖顯示了年月至年月的個月期間，各個框架的絕對受歡迎程度及其增長情況。葡萄城公司成立于年，是全球領先的集開發(fā)工具商業(yè)智能解決方案管理系統(tǒng)設計工具于一身的軟件和服務提供商。概述：對于 JavaScript 社區(qū)來說，npm 的主要功能之一就是幫助開發(fā)者發(fā)掘所需的 npm Registry 中的庫和框架。npm 強大的搜索功能能夠幫助找到...

huashiou 2019-08-22 13:52 評論0 收藏0
GMTC 2019 參會回顧

摘要：回顧上一次參加還是年。年的還是真正的，年的會議早已經(jīng)把英文全稱去掉，改稱全球大前端技術大會。同時與產(chǎn)品協(xié)作從產(chǎn)品設計方面突出關注點，做產(chǎn)品設計方面的優(yōu)化，如站新版改造減少頁面元素，將播放器窗口直接顯示在第一屏。回顧上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...

Zack 2019-08-23 18:15 評論0 收藏0
2017 年崛起的 JS 項目

摘要：通過對比各項目過去個月在上新增數(shù)量，來評估其在年度的受關注程度，進而選出年度領域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作，感謝 Sacha Grief，Micheal Ramberu 的統(tǒng)計整理，以及 Fr...

gaara 2019-08-22 13:57 評論0 收藏0