前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析
生活随笔
收集整理的這篇文章主要介紹了
前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(ID: frontshow),及時獲取前端每周清單。
新聞熱點
國內(nèi)國外,前端最新動態(tài)
- iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers: 本周,Safari Technology Preview 48 版本發(fā)布,其引入了包括密碼自動填充機制變更、啟用 Storage Access API 等一系列特性。更值得一提的是,這也意味著 iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers,從而允許開發(fā)者利用后臺腳本提供更強大的可離線使用的 Web 應(yīng)用;此外,iOS 11.3 還允許將 Web Apps 添加到屏幕桌面,并且支持 Manifest 文件,更多 PWA 相關(guān)資料參考這里。
- Parcel v1.5.0 發(fā)布: 雖然發(fā)布不久,但是 Parcel 已然在 Github 上獲取了超 17000 的點贊,并且在 npm 上有超百萬的下載量與數(shù)十位來自各地的貢獻(xiàn)者。Parcel v1.5.0 是發(fā)布以來的重量級更新,其引入了 JavaScript Source Map,WebAssembly 支持,Rust 與 WebAssembly 轉(zhuǎn)換的支持,配置文件緩存失效,.env 文件等特性,并且進(jìn)一步優(yōu)化了小型項目的編譯效率。
- Expo SDK v25.0.0 發(fā)布: 本周發(fā)布的 Expo SDK v25.0.0 基于最近的 React Native 0.52 版本,其帶來了如下新特性:支持在獨立應(yīng)用中打包字體、視頻與音頻資源;優(yōu)化發(fā)布通道,允許回滾更新,交叉發(fā)布,查看歷史等;為 AWS Cognito 提供了開箱即用的支持。除此之外,該版本還優(yōu)化了 Calendar、MailComposer、GLView 等一系列接口與擴展。
- Bootstrap 4: 盡管等待了多年,但是 Bootstrap 4 最終還是發(fā)布了;正式版本與上一個 Beta 版本相比未有重大變化,主要著眼于部分錯誤修復(fù)與提升。本版本中優(yōu)化了打印樣式與工具類,添加了額外的邊輔助函數(shù),更新了 $spacers 與 $sizes 映射,并且修改了主題文檔等。
開發(fā)教程
步步為營,掌握基礎(chǔ)技能
- webpack 4 beta? 嘗鮮: 本周,webpack 4.0.0-beta.0 發(fā)布,本文即是對于 Webpack 4 的特性與使用進(jìn)行簡要介紹。Webpack 4 為我們帶來了如下特性:多場景下更好的性能提升,更好的默認(rèn)配置,支持 package.json 中的 sideEffects 配置,更好的 JSON Tree Shaking 支持,更新到 UglifyJS2,更多的類型支持,WebAssembly 支持,取消 CommonsChunkPlugin 替換為默認(rèn)優(yōu)化配置。更多 Webpack 相關(guān)資料參考這里。
- 有趣的 JavaScript Proxies 用法: JavaScript 中還有很多尚未廣泛使用的新特性,JavaScript proxies 可能就是其中之一,它能夠在運行時復(fù)寫或者攔截某個對象的屬性以及方法。本文中,作者使用 Proxy 完成了幾個有趣的小功能:僅有二十行代碼的 API SDK,以可讀性更好的方式查詢數(shù)據(jù)屬性值,監(jiān)控異步函數(shù)調(diào)用等。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開發(fā)基礎(chǔ)。
- 一些有趣的 ECMAScript 2017 尚未接納的提案: 隨著 Polyfills 與轉(zhuǎn)換器的流行,很多還處于早期的提案在完成之前就在開發(fā)者之間獲得了極大的歡迎,本文即是對 ECMAScript 2017 尚未接納的提案中一些有趣的進(jìn)行分享。作者首先討論了 ECMAScript 提案的五個進(jìn)程,然后討論了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開發(fā)基礎(chǔ)。
工程實踐
立足實踐,提示實際水平
- 利用 Windowing 創(chuàng)建高效的 React 視圖: 本文是 bvaughn 討論 React 性能、搜索與應(yīng)用架構(gòu)相關(guān)演講上的 Presentation,他著眼于到底是什么拖慢了 React 應(yīng)用性能,并且分享了如何解決問題以及學(xué)到的經(jīng)驗。值得一提的是,他討論了很多關(guān)于 Windowing 工作原理,以及如何僅創(chuàng)建那些用戶可見數(shù)據(jù)的實踐;更多 React 教程參閱 React 與前端工程化實踐。
- SPA 技術(shù)選型時的考量: 本文作者討論了他在對于網(wǎng)頁的技術(shù)選型中,是否應(yīng)該采用 SPA 方案的考量,需要注意的是,本文帶有了較多的主觀態(tài)度,請批判性地看待。作者提出的考量點包括:速度與性能,高開發(fā)成本,不穩(wěn)定性,不易長期維護(hù),低安全性,重造輪子,社交媒介屬性,低可訪問性,對于內(nèi)存的浪費等。 更多 Web 架構(gòu)相關(guān)資料參考這里。
- 基于 IntersectionObserver 進(jìn)行資源延遲加載: 本文中,我們將會討論頁面滾動交互里經(jīng)常涉及到的資源懶加載,不僅僅是圖片,而是基于 IntersectionObserver 的任何資源懶加載。本文也會討論如何根據(jù)元素的可見性來判斷是否觸發(fā)某個函數(shù),更多 Web 性能優(yōu)化相關(guān)內(nèi)容參考 Web 開發(fā)基礎(chǔ)與工程實踐。
深度閱讀
深度思考,升華開發(fā)智慧
- why is setState asynchronous?: MobX 的作者,mweststrate,近日提了某個 Issue 討論為何 setState 需要設(shè)置為異步。我們耳熟能詳?shù)脑蚴?異步的 setState 用于進(jìn)行異步渲染,并且確保 state 對象是反饋了那些被渲染好的狀態(tài)。而 Gaearon 也澄清了這個問題,異步的 setState 主要是為了保證內(nèi)部一致性,并且為后續(xù)的并發(fā)更新打下基礎(chǔ)。更多 React 教程參閱 React 與前端工程化實踐。
- JavaScript 工作原理系列:Web Workers 淺析與典型的使用場景: 本文是 How JavaScript Works 系列文章的第七篇,主要討論了 Workers 的類型,它們的特性與作用,以及它們在不同的場景下的優(yōu)勢與不足。眾所周知的是,異步代碼以及 Event Loop 機制能夠幫助緩解 JavaScript 單線程的不足;而 Web Worker 則是能夠創(chuàng)建輕量級的、瀏覽器內(nèi)線程,從而運行那些并不會阻塞 Event Loop 的代碼。Web Worker 典型的使用場景包括了 Ray tracing,數(shù)據(jù)加解密,數(shù)據(jù)預(yù)抓取,Progressive Web Apps 以及拼寫檢查等等;更多 Web Worker 相關(guān)資料參考這里。
- Firefox 58: The Quantum Era Continues: 對于 Mozilla 而言,2017 年是個非常有意義里程碑,正式發(fā)布了 Firefox Quantum,通過徹底重寫的方式極大地提升與優(yōu)化了 Firefox 的性能與使用體驗。本文即是對于 Firefox 58 版本正式發(fā)布時,其帶來的新特性進(jìn)行解讀:非主線程渲染、后臺 Tab 限流、WebAssembly 流式編譯器、CSS 字體呈現(xiàn)、新的 Promise 特性等,更多 Firefox 59 的規(guī)劃可以查看這里。
開源項目
樂于分享,共推前端發(fā)展
- Rejoiner: Rejoiner 是由 Google 開源的,能夠基于 gRPC 或者其他的 Protobuf 資源自動生成統(tǒng)一 GraphQL Schema 的工具。它致力于靈活化 GraphQL 的定義與交互,方便多數(shù)據(jù)源連接。
- CSS Gridish: CSS Gridish 能夠基于產(chǎn)品的網(wǎng)格設(shè)計,自動生成多個資源文件:包含畫板與網(wǎng)格布局設(shè)計的 Sketch 文件,包含了 Flexbox 兼容的 CSS/SCSS CSS Grid 代碼,能夠用于監(jiān)測網(wǎng)頁布局的 Chrome 插件。需要注意的是,該工具并不致力于輔助構(gòu)建網(wǎng)格,而是幫你自動化地生成產(chǎn)品開發(fā)全流程中需要的資源文件,更多信息查閱這里。
- Greenlet: Greenlet 能夠?qū)惒胶瘮?shù)移入獨立線程中,可以看做 workerize 函數(shù)的單函數(shù)簡化版。不過需要注意的是,Greenlet 僅支持純函數(shù),其會在獨立的作用域中運行這些函數(shù)。
- Purgecss: 當(dāng)我們開發(fā)網(wǎng)頁時,往往會使用 Bootstrap,Materializecss 以及 Foundation 這樣的 CSS 庫;不過實際上我們僅會使用其中的部分樣式,其余的樣式對于當(dāng)前界面而言都可以算作冗余樣式。Purgecss 即可以幫助我們清除界面上的無用樣式,它能夠自動分析輸入的 HTML 文件與 CSS 樣式,并且進(jìn)行選擇器匹配,最終移除無用的 CSS 代碼。
巔峰人生
- 專訪 ECharts 團隊:無 KPI 驅(qū)動如何做出成功開源項目: 近日,國內(nèi)知名的數(shù)據(jù)可視化開源項目 ECharts 發(fā)布了 4.0 版,InfoQ 編輯對 ECharts 團隊做了一個采訪,了解團隊的一些近況,對可視化的看法,以及在開源方面的一些經(jīng)驗。
前端之巔
「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群,加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù) “ 加群 ”。投稿請發(fā)郵件到 editors@cn.infoq.com,注明 “ 前端之巔投稿 ”。
總結(jié)
以上是生活随笔為你收集整理的前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: C#读取AD域用户信息
- 下一篇: 单表关联