摘要:在整個年,看到發布版增加了許多功能,包括新的生命周期方法新的上下文指針事件延遲函數和。它在等待渲染異步響應時數據,是延遲函數背后用來管理組件的代碼分割的。發布自第版開始將近年后,于年發布。
前端發展發展迅速,非常的快。 本文將回顧2018年一些重要的前端新聞,事件和 JavaScript 趨勢。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
WebAssembly 發布 1.0 版本的核心規范WebAssembly被認為是 web 的未來。它的目標是通過提供在web上運行的二進制格式來最大化性能、減少文件大小并支持多種語言的 web 開發。
2017年底,所有主流瀏覽器都宣布支持 WebAssembly。在2018年2月,WebAssembly有三個主要版本:
核心規范1.0
WebAssembly的JavaScript接口
WebAssembly的 Web API
NPM 各個熱門前端庫(框架)下載量比較下載數排名前的分別為 React,jQuery,Angular 和 Vue。以下是它們的拆線圖:
react 庫不斷改進,依舊稱霸前端React在 web 開發領域占據主導地位已有多年,而且在 2018 年期間絲毫沒有放緩。根據Stackoverflow 的調查,它仍然是最受歡迎的一個前端庫。
核心 React 團隊在更新庫和添加功能方面非常活躍。在整個2018年,看到React v16發布版增加了許多功能,包括新的生命周期方法、新的上下文API、指針事件、延遲函數和 React.memo 。還有,最受關注的兩個特性是 React Hook和 Suspense API。
React Hooks 得到了一些強烈的反饋,許多開發人員都喜歡這個更新。Hooks 是一種使用 useState 功能向函數組件添加狀態的方法,它還將管理生命周期事件。
另一個新的特性是 React Suspense,它是一種管理 在 React 組件內部獲取數據的方法。它在等待渲染異步響應時數據,Suspense 是延遲函數背后用來管理組件的代碼分割的。最終的設想是能夠通過Suspense 管理所有異步加載,例如API請求,它還允許緩存來自請求的結果。
一般顯示加載狀態的例子是如 isFetching 為 true 時在屏幕上顯示加載圖標。 使用 Suspense,可以對UI進行細粒度控制,以指定等待時要顯示的回退組件,等待時間以及如何管理導航。 許多人甚至認為 Suspense 可以消除對 Redux 的需求。
Vue 迅速成長,github stars 數量超過 React在 2017 年實現爆炸式增長后,Vue在2018年繼續增長。事實上,它在GitHub stars 數量已經超過了 React。
雖然 Vue深受歡迎,但它在實際(國外)使用中仍遠遠落后于 React 和 Angular。但,Vue 擁有一個仍在增長的充滿激情的用戶群,而且這個庫將在未來幾年成為一股強大的力量。
vue 3 更新計劃在11月14日-16日于多倫多舉辦的 VueConf TO 2018 大會上,尤雨溪發表了名為 “ Vue 3.0 Updates ” 的主題演講,對 Vue 3.0 的更新計劃、方向進行了詳細闡述。目前該演講的 PPT 也已上傳至 Google 文檔,感興趣的可點此查閱。本次版本主要圍繞以下幾個版本來升級:
更快
更小
更易于維護
更多的原生支持
更易于開發使用
完整的ppt地址:https://link.juejin.im/?targe...
Angular 依然活躍,版本7發布今年10月,Angular在其流行的UI框架的第7版中又發布了另一個主要版本。 從早期的 AngularJS MVC架構到使用更為現代的組件的Angular包,Angular 已經有了大量的增長, 隨著這種增長,它已被進一步采用。
雖然 Angular 沒有 React 和 Vue 等庫中看到的那種狂熱開發都及使用者,但它仍然是大型專業項目的主要選擇。許多開發人員在使用 React 時都會感到疲憊,因為它需要工程師在管理構建管道的同時做出許多依賴和架構決策。
另一方面,Angular 從開發人員那里省去許多決策,并提供更常見的代碼模式。Angular 是一個非常規范化的完整框架,CLI 管理所有構建步驟。專業環境的另一個好處是,Angular 需要TypeScript。Angular 已經在 web 開發世界中挖掘出了它的價值,并繼續被采用。
注意:@angular/core 代表新的 Angular, angular 代表舊的 AngularGraphQL 學習意愿高漲,但仍未超過 REST
GraphQL 已經被 GitHub 等技術領導者采用。然而,它并沒有像一些人預測的那樣迅速起飛。根據State of JS survey ,只有1/5的前端開發人員使用過 GraphQL,但是令人吃驚的是,62.5% 的開發人員聽說過并希望使用它。
js 內嵌 css 使用更加廣泛Web開發似乎已經走上了在 JavaScript 下統一所有內容的道路,這一點在 CSS-in-JS 的采用中得到了體現,其中樣式是使用 JavaScript 字符串創建的。這允許通過使用JS語法 import/export 共享樣式和依賴項。它還簡化了動態樣式,因為 CSS-in-JS 組件可以將道具插入到它的樣式字符串中。下面是一個經典的 CSS vs CSS-in-JS 的例子。
要使用 CSS 管理動態樣式,必須管理組件中的類名并根據 state/props更新它,還需要一個保存CSS類的變量:
使用 CSS-in-JS ,不用再管理CSS類。只需通過 props 傳遞給樣式組件,它就可以處理動態樣式。 代碼更清晰,通過基于 props 管理 CSS 的動態樣式,更清晰地分離了樣式和React的關注點。 它現在讀取就像普通的 React 和JavaScript代碼一樣:
CSS-in-JS的兩個主要庫分別是 styled-components 件和 emotion 。styled-components] 已經存在了很長一段時間,并且被越來越多的人采用,但是 emotion 正在迅速得到普及,許多開發人員發現它是首選庫。事實上,Kent C. Dodds 甚至不贊成他自己的 CSS-in-JSS庫,,更傾向于emotion 因為它很有魅力。
當使用單個文件組件時,Vue 還支持開箱即用的有作用域的CSS。通過 scoped 屬性添加到組件的樣式標記,Vue 將使用 CSS-in-JS技術來定義樣式,以便它們不會滲透到其他組件中。
此外,Angular 通過“視圖封裝”支持CSS的作用域,這是默認打開的。
疲于使用各種 CLI 工具的情況有所改善跟上最新的庫、正確配置應用程序并做出正確的架構決策,這些都不是什么秘密。這種痛苦催生了管理工具的 CLI 包的創建,讓開發人員能夠專注于應用程序。在 2018 年,這種 CLI 已成為開發人員創建應用程序的主要方式。流行的框架包括 Next.js (SSR代表React), Create-React-App(客戶端React), Nuxt.js(用于Vue的SSR)、Vue CLI(客戶端Vue)、Expo CLI(用于React Native),Angular 默認情況下支持。
靜態網站生成工具繼續發展隨著JavaScript革命的發展,每個人都喜歡學習最新最好的庫,但是完成一些項目時,我們意識到并非每個網站都需要成為一個復雜的單頁面應用程序(SPA)。這導致了靜態站點生成的增長。這些工具允許在自己喜歡的庫(如React或Vue)中編寫代碼,但在構建期間生成靜態HTML文件,允許我們立即為用戶提供完整構建的頁面。
靜態站點很棒,因為它們提供了性能與簡單性的結合。使用在構建時呈現的HTML文件,可以立即向用戶發送一個頁面,并不需要 SSR 或 CSR 代碼,允許頁面幾乎在瞬間加載。然后在客戶機上下載必要的 JavaScript文件,從而實現單頁體驗。
靜態站點非常適合構建個人網站或博客,但是它們可以很容易地擴展到更大的應用程序。已經看到了構建靜態網站的流行框架的興起,比如 Gatsby 和 React static for React應用,以及 VuePress for Vue應用。
無服務器架構與 JAMstack隨著靜態網站的日益普及,我們也看到了后端的持續增長以補充它們。在過去的幾年里,無服務器架構已經成為web開發中的一個流行詞,因為它能夠在降低成本的同時解耦客戶機和服務器代碼。
無服務器架構的一個擴展是 JAMStack (JavaScript、Api、Markup)。JAMStack 理念基于上一節討論的靜態站點概念。由于預先構建的標記,它允許快速加載時間,并通過為服務器使用可重用 Api 在客戶機上成為一個動 態SPA。在2018年,甚至看到了有史以來的第一場J AMStack 黑客馬拉松。freeCodeCamp、Netlify和GitHub聯手舉辦了一場面對面和在線的黑客馬拉松,開發人員可以在 GitHub 總部編寫代碼,或者與世界各地的其他開發人員聯系。
TypeScript可能是JavaScript的未來(但對于Flow就不一樣了)JavaScript 因為沒有靜態類型變量而受到批評。試圖糾正這一問題的兩個主要庫是 TypeScript 和 Flow,但TypeScript似乎是最受歡迎的。事實上,在 Stack Overflow 調查中,TypeScript的受歡迎程序高于 JavaScript 本身,分別為 67% 和 61.9%。根據 JS 的現狀調查,超過80%的開發者想要使用 TS 或者已經在使用它。對于Flow,只有 34% 的開發人員正在使用它或希望使用它。
所有跡象表明,TypeScript 是 JS 中靜態類型的首選解決方案,許多人選擇它而不是 JavaScript。2018年,TS 的npm 下載量大幅增長,而流量卻非常平穩。TypeScript看起來正在從一個狂熱的追隨者轉變為廣泛的采用。
webpack 4 發布Webpack 3發布僅8個月后,版本4就發布了。Webpack 4 繼續推動簡單和更快的構建,聲稱改進了98%。它選擇了合理的默認值,在沒有插件的情況下處理更多的開箱即用的功能,并且不再需要開始使用配置文件。Webpack 現在也支持 WebAssembly,并允許直接導入 WebAssembly 文件。
Babel 7 發布自第6版開始將近3年后,Babel 7 于 2018 年發布。Babel 是將 ES6 + 代碼轉換為 ES5 的庫,使JavaScript 代碼跨瀏覽器兼容。
7.0 帶來的不兼容性變更:刪除對未維護的 Node 版本的支持:0.10,0.12,2,5
通過切換到使用“scoped”包將現已遷移到 @babel 命名空間,這有助于區分官方軟件包,因此 babel-core 將成為 @babel/core
刪除(并停止發布)任何年度預設(preset-es2015 等), @babel/preset-env 取代了對這些內容的需求,因為它包含了所有年度添加內容以及針對特定瀏覽器集的能力
同時刪除“Stage”預設(@babel/preset-stage-0 等),轉而選擇多帶帶的提案。同樣,默認情況下從 @babel/polyfill 刪除提案
對部分軟件包進行重命名:任何關于 TC39 提議的插件現在更改為 -proposal 而不再是 -transform 。即,@babel/plugin-transform-class-properties 變更為 @babel/plugin-proposal-class-properties
為某些面向用戶的軟件包在 @babel/core 上引入 peerDependency (如,babel-loader, @babel/cli, etc)
2019年的預測隨著基礎的建立和對改進 web 體驗的不斷推動,WebAssembly將開始普及。
React 依然高居榜首,但 Vue 和 Angular 的用戶數量仍會增長。
CSS-in-JS 可能會成為默認的樣式化方法,而不是普通的CSS樣式。
開發人員是否可以重新審視原生Web組件?
毫無疑問,性能仍然是關注的焦點,諸如 PWAs 和代碼分離之類的事情成為每個應用程序的標準。
在使用 PWA 的基礎上,web 變得更加本地化,具有離線功能和無縫的桌面/移動體驗。
CLI工具繼續的改進,以抽象出構建應用程序的繁瑣方面,讓開發人員專注于業務開發。
更多的公司采用具有統一代碼庫的移動解決方案,如React Native或Flutter。
docker、k8s 等工具會更加流行
GraphQL 使用方面會有了飛的增長,并被更多的公司使用。
虛擬現實技術利用A-Frame、React VR和谷歌VR等庫取得了長足的進步。
原文:https://levelup.gitconnected....
編輯中可能存在的bug沒法實時知道,事后為了解決這些bug,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具Fundebug。
你的點贊是我持續分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100250.html
摘要:然而這次的文章,就像賀師俊所說的這篇文章是從程序員這個老年度總結前端掘金年對我來說,是重要的一年。博客導讀總結個人感悟掘金此文著筆之時,已經在眼前了。今天,我就來整理一篇,我個人認為的年對開發有年終總結掘金又到 2016 Top 10 Android Library - 掘金 過去的 2016 年,開源社區異常活躍,很多個人與公司爭相開源自己的項目,讓人眼花繚亂,然而有些項目只是曇花一...
摘要:年,已經成為了最受歡迎的前端框架。年前端框架情況上圖顯示了年月至年月的個月期間,各個框架的絕對受歡迎程度及其增長情況。葡萄城公司成立于年,是全球領先的集開發工具商業智能解決方案管理系統設計工具于一身的軟件和服務提供商。 概述: 對于 JavaScript 社區來說,npm 的主要功能之一就是幫助開發者發掘所需的 npm Registry 中的庫和框架。npm 強大的搜索功能能夠幫助找到...
摘要:年已經過去,這一年前端領域發生了什么有哪些技術和項目引人注目工程師們觀點和看法又有怎樣的變化在此,整理了一些對過去的年盤點的資料,一是希望能借此提高自己的姿勢水平,二是希望能為年的學習有所指導。 2016年已經過去,這一年前端領域發生了什么?有哪些技術和項目引人注目?工程師們觀點和看法又有怎樣的變化?在此,整理了一些對過去的2016年盤點的資料,一是希望能借此提高自己的姿勢水平,二是希...
摘要:組件成為前端最基本的物料,融合在組件中的方案日趨成熟。組件成為最基本的前端物料,讓組件化更徹底在的調研報告中,開發者有愿意繼續,有愿意繼續。需要留意的是,有表示對感興趣,因此獲得的最感興趣獎。 簡介: JavaScript 應用范圍廣泛,靜態類型語言 TypeScript 會繼續得到更多開發者的青睞。 組件成為前端最基本的物料,CSS 融合在組件中(CSS in JS)的方案日趨成熟...
摘要:確定新的包命名規則為了盡可能避免包的誤植域名現象,將不會再允許使用相似的包命名不過會進一步鼓勵開發者使用自己的命名空間來發布包。本文是對其幾十年來技術之路的回顧與展望,也是一代技術人的青春回憶。 showImg(https://segmentfault.com/img/remote/1460000012846628); 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了...
閱讀 1128·2021-08-12 13:24
閱讀 2974·2019-08-30 14:16
閱讀 3301·2019-08-30 13:01
閱讀 2064·2019-08-30 11:03
閱讀 2768·2019-08-28 17:53
閱讀 3079·2019-08-26 13:50
閱讀 2263·2019-08-26 12:00
閱讀 942·2019-08-26 10:38