前端週報專注大前端領域內容,以對外文資料的蒐集爲主,幫助開發者瞭解一週前端熱點,分爲新聞熱點、深度閱讀、開源項目 & 工具等欄目。歡迎關注【前端之巔】微信公衆號(ID: frontshow),及時獲取前端週報內容。
前端新聞
Scala.js 1.0 rc 發佈:Scala 到 JavaScript 編譯器
Scala.js 是一個編譯器,可將用 Scala 編寫的源代碼轉換爲優化的 JavaScript。與TypeScript 相似,可以使用 Scala 的強類型和其他 Scala 功能編寫基於 JavaScript 的 Web 應用程序。它還支持常見的 JavaScript 庫和框架,例如 React 和 Angular,可以直接從 Scala.js 代碼進行靜態和動態類型的集成。
https://www.scala-js.org/news/2019/11/26/announcing-scalajs-1.0.0-RC1/
Scala.js 1.0 將於2020 年初發布。如果你對使用 Scala 來構建前端應用程序感興趣,你可能還會喜歡 Slinky ,它使在 Scala 中編寫 React 應用程序更容易。
Mozilla 爲開發者推出新的網頁調試工具 Firefox Replay
Mozilla 在最近的 Firefox Nightly 更新版本中推出了一項名爲 Firefox Replay 的實驗性工具,它允許 Firefox 內容進程記錄其行爲,稍後重放並回退到早期狀態。重放過程會保留所有相同的 JS 行爲、DOM 結構、圖形更新,以及其他行爲。瀏覽器的 JS 調試器可用於檢查和控制重放。目前這一功能僅支持 macOS。
可以使用 devtools.recordreplay.enabled 首選項手動開啓。通過“工具”->“ Web 開發者”菜單,查看“錄製/回放”選項卡,啓用新調試器界面訪問該功能。
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/WebReplay
2019 年 JavaScript 狀態調查已開放
該項目名爲 StateOfJS,由 Raphaël Benitte、Sacha Greif 和 Michael Rambeau 完成,他們創建了一個網站,向開發者收集反饋,最終以文字和圖表的方式告訴大家最終的結果。2018 年,總共有來自 153 個不同國家的共 20,000 多名 JavaScript 開發者參與調查(中國佔總數的 0.37%,共 75 個開發者)。通過這個調查,我們可以確定開發者正在使用什麼技術,喜歡哪些技術,以及對哪些技術感興趣。希望這個報告能幫助你在 JavaScript 生態之中找到適合自己的技術棧。
查看往年調查報告:https://stateofjs.com/
GSAP 3.0 現已發佈:JavaScript 動畫的”瑞士軍刀“
這個流行的 JavaScript 動畫庫剛剛發佈了3.0版本。這是一次重大升級,具有五十多種新功能和更改,包括簡化的API、新的運動路徑插件、ES6模塊支持等等。你可以在這裏查看完整的發行說明:
https://greensock.com/3-release-notes
行業新聞
IPv4 地址耗盡
本週,歐洲IP資源協調中心(RIPE NCC)宣佈其IPv4可用池已經分配了最後的/22 IPv4網址,全球大約43億個IPv4網址正式用完了。
目前,全球各國大型運營商均在積極推進網絡基礎設施 IPv6 改造,國內很早就在IPv6方面進行了大規模佈局,截至今年 5 月, 我國 1/3 網民已用上 IPv6。
百度宣佈智能小程序月活破3億 覆蓋271個細分行業
本週,百度方面表示,百度智能小程序月活用戶規模已突破3億。據悉,小程序是百度移動生態最重要的兩個生態之一,背後是搜索和信息流兩大入口支持。相比社交和支付,搜索的優勢在於用戶目的的明確性,用戶從搜索到小程序是一個自然的過渡。
數據顯示,目前百度每天響應的搜索需求數十億次,信息流日均推送量150億次。百度智能小程序已經覆蓋271個細分行業,在移動視頻、移動購物、生活服務、旅遊服務、汽車服務、新聞資訊等領域,均出現了衆多月活過百萬的智能小程序。
深度閱讀
現代 JavaScript 應用程序的 CSS 架構
Mike Riethmuller 解釋瞭如何在現代 JavaScript 應用程序的上下文中應用來自 CSS 體系結構的一些經驗教訓。
https://www.madebymike.com.au/writing/css-architecture-for-modern-web-applications
如何從站點中刪除未使用的 CSS?
作者 Chris Coyier 對那些檢測未使用 CSS 的工具提出質疑,這些工具承諾會處理好一切。作者強調它們的問題並提出代替方案。
https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/
在 Redux 中處理副作用:Redux-Saga
如果你之前在 React 項目中使用過 Redux,那麼你將不得不處理副作用(異步),例如 API 調用或設置超時和間隔,因爲在構建“複雜的 Web 應用程序”功能時需要這些。
在本文中,你將學習以下內容:
-
在 Redux 中如何處理副作用;
-
什麼是 Redux-saga;
-
什麼是生成器函數;
-
如何在構建簡單應用程序時使用 redux-saga 處理副作用。
https://blog.soshace.com/handling-side-effects-in-redux-redux-saga/
區塊鏈上的 WebAssembly 和 JavaScript 智能合約
WebAssembly 是一個通用的運行時,正在 Web 之外的許多平臺上引起關注。這篇博客文章探討了一個示例,將 WebAssembly 用作區塊鏈上的智能合約引擎。它研究了 NEAR 協議,一個具有良好的 AssemblyScript 支持的區塊鏈,並創建了一個簡單的聚會活動網站,其票務分配受用 JavaScript 編寫的智能合約控制。
https://blog.scottlogic.com/2019/11/26/webassembly-on-the-blockchain.html
布隆過濾器——你值得擁有的開發利器(中文)
在程序的世界中,布隆過濾器是程序員的一把利器,它可以快速解決項目中一些比較棘手的問題,如網頁 URL 去重、垃圾郵件識別、大集合中重複元素的判斷和緩存穿透等問題。
https://segmentfault.com/a/1190000021136424
在 iPad 上開發 Web 是怎樣的體驗?
本文演示瞭如何在 iPad 上進行全棧開發,包括 iOS 自動化如何提供幫助。
https://notebook.lachlanjc.me/2019-11-05_real_web_development_on_ipad/
工具 & 庫 & 資源
【litegraph.js】圖形節點引擎和編輯器
如果你需要創建一個在線系統供用戶創建和操作圖形或互連“節點”(例如圖形、音頻或數據管道),這一工具將非常有用。
https://github.com/jagenjo/litegraph.js
【DeriveJS】
DeriveJS 是一個數據庫框架(ODM),讓你能夠操作和建立 JavaScript 網頁數據的對象,同時自動將它們持久化保存,更新並同步到(Mongo)DB,而無需任何顯式調用,諸如 .save() 之類的方法。它利用 mongoDB 的批量操作來提高性能。