摘要:前端開發在年依然持續火熱,本文將對熱點事件做一個總結。版的和協議在前端領域,一直獨占鰲頭。年又發布了一個重大的版本更新。主要是配合使用了服務工作線程。而且還提供了供前端開發者接入。快速發布了和在悄悄地跳過之后,在月號正式發布。
譯者按: 老技術日趨成熟,新技術層出不窮。
原文: A recap of front-end development in 2017
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。
前端開發在2017年依然持續火熱,本文將對熱點事件做一個總結。
16版的React和MIT協議在前端領域,React一直獨占鰲頭。2017年又發布了一個重大的版本更新 version 16。在新版本中,引入了fiber結構來支持異步UI渲染。該版本也提供了一些錯誤機制方便處理未預料的應用失敗,以及很多其它功能。
不過,最令人驚訝的不是它的新功能新特性,而是對開源協議的更改。Facebook新的協議使得很多公司不再使用React。另外,Jest, Flow, Immutable.js和GraphQL也使用了該協議。
Progressive Web Apps (PWA)我們一直在尋找一個可以使用網頁技術完美支持其它客戶端的方法。谷歌專研于對網頁應用增強,將它轉換為progressive web apps(PWA"s)。這一思路在2017年被大眾迅速接受。PWA使用現代的瀏覽器技術使得訪問網頁應用的體驗和原生移動應用一樣。并且在性能上有了大幅度的提升,而且支持離線訪問,像推送通知這樣原生APP才有的功能也支持了。PWA主要是配合manifest.json使用了服務工作線程(service workders)。
Yarn的出現完善了JS軟件包系統NPM自從誕生以來已經成長巨大,但是卻缺失一些很重要的特性,好在被Yarn支持了。Yarn最主要的功能就是包緩存、一個保證構建確定的鎖文件、并行操作、平鋪依賴關系。這些功能非常有用,以至于NPM在5.9版本也實現了。Yarn累計已經有10億次下載(現在平均每個月125萬),在Github上有28000+的收藏。就算你沒有使用Yarn,Yarn對整個包管理系統的提升也讓你受益。
CSS網格單元布局CSS終于支持網格單元布局,瀏覽器很快也會進行支持。在過去,我們需要使用表格(table),float,flex和inline-block來實現網格布局。如今,原生的CSS網格布局讓我們可以定義行列。趕緊來學習吧: https://gridbyexample.com/。
主流瀏覽器支持WebAssemblyWebAssembly(wasm)已經開始被所有主流瀏覽器支持。wasm是一個針對瀏覽器的腳本,它是一種底層級(low-level)字節碼格式。因為它的底層性,執行效率可以非常高。而且還提供了JavaScript API供前端開發者接入。火狐已經聲明所有瀏覽器對wasm的支持。詳情查看: WebAssembly support now shipping in all major browsers
Serverless架構2017年Serverless應用持續增熱,這是一種新的可以提高性能又減少資源耗費的架構。你的客戶端完全從服務器從分離出來,這樣就可以只關注應用本身而不是架構。一個常見的實現方法是用AWS API Gateway和AWS Lambda函數作為后臺服務。如果想體驗一下,從這篇博客開始吧:A crash course on Serverless with Node.js。
Vue.js持續火爆盡管React占據這主流市場,尤雨溪大神的Vue作為一個后起之秀大放異彩。Vue基于組建的架構,它已經成為繼React之后的首選。Vue已經被大型公司使用比如GitLab。
Fundebug是全棧JavaScript錯誤監控平臺,支持各種前端和后端框架,可以幫助您第一時間發現BUG!
CSS-in-JSJavaScript的技術不斷的演進,生態系統逐漸穩定。CSS技術也不斷在進步。2017年,主要的進步一些單調的特性改進和吸收CSS-in-JS,也就是說我們可以通過寫JS代碼來定義CSS。現在還不清楚該技術是否能否主導未來的CSS走向,不多這種新穎的技術確實解決了基于組件開發的應用中很多的問題。
2017年,Max Stoiber, Glen Maddern, Phil Plückthun開發的styled-components占據了主導地位。Kye Hohenberger開發的Emotion庫被廣泛使用。Glamorous也是一個不錯的選擇,由PayPal的Kent C. Doods, 和一批充滿激情的開發者維護。閱讀這篇文章了解更多: CSS-in-JS Roundup: Styling React Components。
靜態網站生成2017年靜態網站生成也開始熱起來。像Gatsby這樣的網站可以使用React等現代工具來構建靜態網頁。不是所有的網站都需要復雜的網頁技術。靜態網站生成會給您更加極致的網頁訪問速度。如果您在尋找合適的例子,React官方文檔就是使用Gatsby生成的。
靜態網站生成有一套工具簡稱為JAMStack:JavaScript,APIs,Markup。JAMStack使用預編譯好的HTML文件,可復用的APIs以及JavaScript代碼來處理請求。Netlify是一個很好的工具并且提供免費的Host服務。Brian Douglas 寫了一篇很好的文章:通過實現Hacker News來對比JAMStack和服務端渲染APP的優劣。
GraphQLGraphQL日趨火爆,有勝過REST之勢。Samer Buna甚至宣傳REST已死。GraphQL允許客戶端自定義數據,然后一次獲取。而REST方案需要維護獲取很多無效數據。Github的新版API已經使用GraphQL重寫。Johannes Schickling為此開發了Graphcool(GraphQL Backend Development Framework)框架。
React Router 4由Ryan Florence和Michael Jackson開發的React Router最開始僅僅是React中可以使用的一個router包,而現在已經完全變成真正的React Router,成為React的部件之一。所有的API都基本穩定,React Training Team承諾該項目不會有大的變動,可以放心使用。
Angular快速發布了v4和v5在悄悄地跳過Angular 3之后,Angular 4在3月23號正式發布。在Angular 4中,Angular團隊吸收了社區項目Angular Universal。Angular Universal提供了服務端渲染Angular應用的機制。Angular Animation從@angular/core中移出。如果你需要使用,需要手動引入。Angular的AOT編譯(Ahead Of Time compilation)經過重構,性能提升。而生成的代碼的體積也大幅縮小,最多可達60%。
在版本5中實現了一些等待了很久的改進功能。Angular 5提供了@angular/service-worker,因此創建PWA變得非常簡單。Angular的編譯器經過優化,編譯時間縮短。Angular Router將所有生命周期Hook暴露,包括ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd。
TypeScript和FlowTypeScript有大量的開發者擁泵,Flow提供了一個靈活地引入類型的方法可以避免對現有代碼進行大量的重構。很多開發者都抱怨JavaScript沒有類型,微軟設計的TypeScript應運而生,在最新版本的Angular中,TypeScript已經是默認配置。Flow是Facebook實驗室研發的一個類型檢查工具。
2018年我們期待什么在找到基于組件架構APP適合的CSS方式之前,CSS技術還將持續發酵;
越來越多的公司會使用統一的代碼庫來處理移動端和網頁端,比如React Native和Flutter;
隨著離線能力和和移動的無縫銜接,網頁APP會更加接近原生;
WebAssembly將會前進一大步;
GraphQL持續挑戰REST;
Flow和TypeScript使得JavaScript更加地結構化;
容器技術會影響到前端架構的設計;
虛擬現實會繼續成熟,依托于大量成熟的庫A-Frame,React VR,Google VR;
將會有人使用區塊鏈和web3.js開發出很酷的應用;
版權聲明:
轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/12/25/a-recap-of-frontend-dev-2017/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92440.html
摘要:楊冀龍是安全焦點民間白帽黑客組織核心成員,被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創業者技術創業踩過的坑給技術創業者建議等內容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領域內容,以對外文資料的搜集為...
摘要:業界動態引擎發布,在速度和內存優化上又帶來了一些提升。程序人生前端技術發展回顧前端領域在年再次以狂熱的節奏向前發展。技術周刊由小組出品,匯聚一周好文章,周刊原文。 業界動態 V8 release v6.4 V8引擎發布v6.4,在速度和內存優化上又帶來了一些提升。對于instanceof操作符的優化,帶來了3.6x速度提升,同時使得uglify-js提高了15-20%(結果來自Web ...
摘要:年,已經成為了最受歡迎的前端框架。年前端框架情況上圖顯示了年月至年月的個月期間,各個框架的絕對受歡迎程度及其增長情況。葡萄城公司成立于年,是全球領先的集開發工具商業智能解決方案管理系統設計工具于一身的軟件和服務提供商。 概述: 對于 JavaScript 社區來說,npm 的主要功能之一就是幫助開發者發掘所需的 npm Registry 中的庫和框架。npm 強大的搜索功能能夠幫助找到...
摘要:回顧上一次參加還是年。年的還是真正的,年的會議早已經把英文全稱去掉,改稱全球大前端技術大會。同時與產品協作從產品設計方面突出關注點,做產品設計方面的優化,如站新版改造減少頁面元素,將播放器窗口直接顯示在第一屏。 回顧 上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...
摘要:通過對比各項目過去個月在上新增數量,來評估其在年度的受關注程度,進而選出年度領域崛起的明星項目。也許正因為上述最后一點,在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用,也獲得了與這些公司青睞。 共 4741 字,讀完需 8 分鐘,速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作,感謝 Sacha Grief,Micheal Ramberu 的統計整理,以及 Fr...
閱讀 1553·2021-11-19 09:55
閱讀 2777·2021-09-06 15:02
閱讀 3533·2019-08-30 15:53
閱讀 1070·2019-08-29 16:36
閱讀 1229·2019-08-29 16:29
閱讀 2285·2019-08-29 15:21
閱讀 620·2019-08-29 13:45
閱讀 2679·2019-08-26 17:15