前端每週清單第 53 期:Go 與 WebAssembly, React Suspense 演練, CSS 技巧

王下邀月熊發表於2019-03-03

前端每週清單專注前端領域內容,以對外文資料的蒐集為主,幫助開發者瞭解一週前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID: frontshow),及時獲取前端每週清單。

新聞熱點

國內國外,前端最新動態

  • Go 語言的 WebAssembly 架構: 本文件描述了 Go 編譯器中即將加入的 WebAssembly 架構設計方案,該方案會被合入目前的 Go 1.11 版本。這也意味著我們可以使用 Go 來編寫 WebAssembly 模組程式碼,從而也為 Go 提供了類似於 JavaScript 這樣能夠編寫 Web 端應用的能力。可預見該架構會對軟體工程生態體系有一定積極的影響。

  • Flutter beta 1 釋出: 作為 Mobile Word Congress 2018 的一部分,近日 Flutter 正式釋出了其首個 Beta 版本。Flutter 是 Google 新的移動端介面框架,用來幫助開發者快速構建高質量的跨平臺原生介面。Flutter 致力於實現以下目標:原生的無縫整合與效能保障,高效率的開發以及大量跨平臺的 UI 工具/元件庫。

  • 再見,PhantomJS: 隨著 Chrome 與 Firefox 紛紛推出了 Headless 模式,原本許多的 PhantomJS 開發活動都逐漸停滯。近日,PhantomJS 宣佈將會歸檔其專案,並且停止開發操作;PhantomJS 2.1.1 將會是最後一個穩定版本。感謝 PhantomJS 這些年來帶給我們的功能特性,它已經很好地完成了最初的目標與歷史使命,感謝 & 再見。

開發教程

步步為營,掌握基礎技能

  • Google 釋出機器學習速成課程: 為了幫助更多的人瞭解與學習機器學習相關的知識技能,Google 釋出了人工智慧學習網站 Learn with Google AI。本次課程,一共是 15 小時,其中包括 25 節課程以及 40 多項練習,該課程並不要求任何前置的學習內容,非常適合於各個層次的初學者。非常值得一提的是,本次課程提供了非常完美的中文支援,包括中文配音,中文課程材料以及中文概念講解。更多相關內容參考 資料科學與機器學習實戰手冊

  • 深入探究 ES2018 與 ES2019: 本小冊是對於 ES2018 與 ES2019 的特性進行全面的介紹與講解,目前涵蓋了 ES2018 中的 Asynchronous iteration, Rest/Spread Properties, RegExp named capture groups, RegExp Unicode property escapes, RegExp lookbehind assertions, s (dotAll) flag for regular expressions, Promise.prototype.finally(), Template Literal Revision 等特性。更多相關內容參考 現代 JavaScript 開發:語法基礎與工程實踐

  • React Suspense 演練: Dan 在 JSConf Iceland 上演示的 Async React Demo 吸引了大量的關注,併為我們介紹了 Time Slicing 與 React Suspense 這兩個特性。本文即是對於 Movie Search 案例的分析與實踐,從而瞭解 React Suspense API 的相關特性,包括了 simple-cache-provider.SimpleCache, simple-cache-provider.createResource, ReactDOM.unstable_deferredUpdates 等。更多相關內容參考現代 Web 開發基礎與工程實踐–React 篇

工程實踐

立足實踐,提示實際水平

  • 你或許不知道的 CSS 技巧: 本文是對於 CSS 中的一些特性用法進行介紹,有點類似於 30 Seconds of CSS 這樣的 CSS 實用程式碼片。本文涉及到的技巧譬如基於寬度的垂直排版,多背景動畫,字型簡寫等等。更多相關內容參考 CSS CheatSheet

  • Electron 應用自動更新方案設計: 在釋出一個桌面應用之前,必須要考慮的一個問題是:怎麼更新(迭代)?作者設計和實現了 Electron 應用的一整套自動更新方案,並且已應用於產品上,所以寫下這篇文章和大家分享,可以怎麼設計和實現一個 Electron 應用的自動更新,我們對於自動更新需求的考慮可能比你想得稍微複雜一些。本文將首先從需不需要更新開始談起,接著談怎麼從人肉更新一步步進化到無痛的自動更新。然後,我會向你介紹,一個完善後的自動更新需求可以是怎樣的。最後,也是最關鍵的一部分 —— 我們該採取怎樣的更新思路,又該如何設計我們的產品邏輯。更多相關內容參考現代 Web 應用架構與效能調優

  • 前端案例分析: 在前端學習實踐的過程中,我們可能會閱讀很多類似於構建 Todo List 的文章,他們是不錯的入門文章,卻無法告訴你如何來解決真實的,大規模應用中的問題。本文則是列舉了一系列企業級應用的實踐案例,包括了來自 Facebook, Twitter, Google, Airbnb 等公司的演講或者文章。更多相關內容參考 Awesome Web Reference

深度閱讀

深度思考,昇華開發智慧

  • Didact Fiber: Incremental reconciliation: 這是一篇非常不錯的深入講解 Fiber 實現的文章。Didact 是作者實現的類 React 教學型框架,而本文則矚目於如何將 didact 中的部分程式碼重寫以使其適配於最新的 React 16 架構;作者直接使用了來自 React 程式碼庫中的結構、變數以及函式名,從而方便理解。本文依次介紹了為何需要 Fiber,如何排程 MicroTasks,Fiber 的資料結構、流程與實現等內容。更多相關內容參考現代 Web 開發基礎與工程實踐–React 篇

  • 重構 Redux: 隨著 React 釋出新的 Context API,又有了許多關於 Redux 的討論:狀態管理是否依然解決?眾所周知,狀態管理一直是應用開發中的難點之一,本文即是對於狀態管理中常見的問題進行重新考量:我們是否需要額外的狀態管理庫,Redux 是否值得使用,是否有更好地狀態管理方案等。更多相關內容參考現代 Web 應用架構與效能調優

  • 從 JS 到 DOM 的雙向追蹤: Chrome 66 中針對記憶體洩漏分析進行了優化,從而方便開發者除錯記憶體洩漏相關的問題。現在 Chrome DevTools 能夠追蹤並且快照 C++ DOM 物件,然後從 JavaScript 物件開始列舉出所有的可達物件。該特性是 V8 垃圾收集器中提供的新 C++ 追蹤機制的應用之一,更多相關內容參考Web 記憶體洩漏分析

開源專案

樂於分享,共推前端發展

  • Pandora.js: Pandora.js 是阿里開源的 Node.js 應用管理工具,其基於 TypeScript 開發,提供了管理、衡量、追蹤等一系列的特性。Pandora.js 源於多年企業級 Node.js 應用管理實踐,致力於提供從管理監控,到除錯部署等全流程的支援。

  • filepond: filepond 是靈活有趣的 JavaScript 檔案上傳控制元件,它提供了漂亮的過場互動動畫以及良好的使用者體驗,並且利用客戶端圖片優化技術來保證高效能的上傳。

  • just-dashboard: just-dashboard 能夠基於 YAML 或者 JSON 配置檔案生成資料皮膚,從而避免了開發者或者資料工程師重複的勞動。just-dashboard 還允許使用 jq 查詢,或者指定某個元件的資料抓取地址,just-dashboard 會在執行時動態抓取資料並且渲染為圖表。

  • prompts: prompts 是可以在命令列中使用的,輕量級、美觀大方、使用者友好的互動式提示。與其他框架相比,prompts 沒有過多的外部依賴,儘可能地簡化內部複雜度。

巔峰人生

  • 過完年跳槽,要考慮哪些要素?: 發完獎金了,過完年了,又到了人心躁動的時節。不少 IT 圈的小夥伴可能在思考,要不要換工作。今天和大家聊聊 IT 人換工作這個話題,樓主也面試過的不少候選人,站在面試官的角度,談談什麼樣的 IT 人會在面試中加分。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群,加入前端之巔學習群請關注「前端之巔」公眾號後回覆 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com,註明 “ 前端之巔投稿 ”。

前端之巔微信底圖-5.jpg

相關文章