前端每週清單第 55 期: MobX 4 特性概覽，iOS Hacks 分享, 分佈式事務詳解

前端每週清單第 55 期: MobX 4 特性概覽，iOS Hacks 分享, 分佈式事務詳解

做者：王下邀月熊 編輯：徐川

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

新聞熱點

國內國外，前端最新動態

• Firefox 59.0 發佈: 近日，Firefox 發佈了從桌面端到移動端的各平臺更新版本；特別是對於桌面端的 Firefox，咱們優化了頁面加載時間，增長了可以編輯與裁剪 Firefox 截圖的工具，而且提高了 Firefox 首頁的站點排布體驗。值得一提的是，對應的 MAC 版本中引入了 Off-Main-Thread Painting (OMTP) 技術，從而提升圖形化渲染的效率；而在 Android 版本中則增長了對於 HLS 協議的支持。
• Let's Encrypt 宣佈支持 ACME v2 與通配符證書: 近日 Let's Encrypt 正式宣佈支持 ACME v2 與通配符證書。ACME v2 是 ACME 協議的更新版本，接收了來自 IETF 標準以及行業組織的建議；而通配符協議則容許用戶使用單一證書對於全部的子域名開啓 HTTPS 功能，其大大簡化了證書管理的複雜度，推動了 Web HTTPS 化的進程。同時，Let's Encrypt 得到了 IdenTrust 交叉簽名，這意味着只須要在服務器的證書鏈中配置好交叉簽名，各瀏覽器客戶端會自動處理其餘任務。
• 2018 Stack Overflow 開發者調查報告: 今年，超過十萬名開發者參與到了調查之中，爲咱們提供了充足的數據源。今年的報告中，值得注意的點包括：DevOps 與機器學習已然成爲了現今軟件行業最重要的趨勢，開發者們大都樂觀於人工智能帶來的變革與可能性，而不一樣意其潛在的威脅。去年 Python 的流行程度已經超過了 C#，成爲了增加最快的語言，就像前些年它超越 PHP 那樣；另外值得一提的是，Rust 成爲了去年最受歡迎的語言，Kotlin 緊隨其後。

開發教程

步步爲營，掌握基礎技能

• MobX 4: 更好，更小，更快:近日 MobX 發佈了 4.0 大版本更新，本文則是對於該版本的那些引人入勝的特性進行介紹。這些特性包括了：不使用裝飾器語法的裝飾器，Observable 對象的動態擴展，內置的用於簡化異步流程的 await when 以及 flow 函數，用於自動化進行數據抓取的 onBecome(Un)Observed，生產環境構建優化等。更多相關內容參考 現代 Web 開發--架構優化篇。
• 異步剪貼板操做: 過去的數年中，各瀏覽器基本上都在使用 document.execCommand 來進行剪貼板交互。這種方式雖然提供了簡單並且普遍接受的複製與粘貼操做，可是也帶來了必定的缺陷：只能同步訪問剪貼板，而且只能直接讀寫 DOM 元素。而 Chrome 66 提供了新的 Clipboard API，則爲咱們提供了另外一種異步式的剪貼板操做方式，本文便是對該機制與接口規範的詳細介紹。更多相關內容參考 現代 Web 開發--基礎篇
• 不一樣方案的 APK 尺寸對比: 如今已經有了不少種不一樣的開發應用的方式，從傳統的原生開發到花式跨平臺解決方案；或許不少人會好奇不一樣開發方案對於最終包體的大小影響幾何，本文便是嘗試用不一樣的方式實現相同功能的應用，而且比較他們的大小。文中給出的對比數據以下：Java 約 539KB，Kotlin 約 550KB，React Native 約 7MB，Flutter 約 7.5MB；更多相關內容參考 大前端的工程實踐--Android 篇。

工程實踐

立足實踐，提示實際水平

• 使用 GraphQL 替代 Redux: GraphQL 是著名的服務端查詢語言，Redux 則是客戶端狀態管理框架，兩者貌似風馬牛不相及，本文卻討論如何使用 GraphQL 替代 Redux 在項目中的角色。實際上，大部分狀態管理相關代碼都是用來合併與操做多個 REST 端口的代碼，或者經過 sagas, middleware, thunks 等方式來順序獲取數據，這些也正是 GraphQL 閃耀的地方，本文便是討論了這種可能性；更多相關內容參考微服務架構與實踐--Node.js 篇。
• 整合自 Twitter 的 iOS Hacks: 本系列文章着眼於按期整理分享來自 Twitter 的 iOS 開發調試技巧、Xcode 性能優化技巧以及 Swift 最佳實踐等內容；本週提供了譬如如何提高 Xcode 編譯性能，如何提升代碼的可讀性與可維護性等內容。更多相關內容參考大前端的實踐--iOS 篇。
• 加載第三方 JavaScript 代碼: Addy Osmani 近日編寫了一篇關於 JavaScript 中加載第三方庫的文章，討論瞭如何正確的使用第三方庫。第三方庫爲咱們提供了可被集成的靈活功能，促進了 Web 的動態性、交互性以及鏈接性。本文，則是討論在加載第三方庫過程當中可能遇到的問題：如何保證關鍵路徑加載的性能，隱私性，安全性，避免不可預測或者不可控的結果。更多相關內容參考 Web Performance Optimization MindMap。

深度閱讀

深度思考，昇華開發智慧

• Clean 架構代碼導讀: 做者近來開源了名爲 MovieNight 的示例項目，本文則是其過去幾周應用架構方面的相關思考的分享。本文首先介紹了 Clean Architecture 的基本元素，分析了各個組件間的層級關係，而後以具體的代碼進行實踐介紹。更多相關內容參考軟件工程基礎-軟件架構篇
• How JavaScript works 系列：渲染引擎與優化技巧: 當咱們在構建大型的 Web 應用時，須要提醒本身咱們並不只僅寫好代碼就萬事大吉了，還須要考慮到代碼與運行環境之間的交互。理解 JavaScript 的運行環境，瞭解它的工做原理與組件構成，可以讓咱們編寫出更好的，更穩健的應用。本文便是對於瀏覽器的內部原理進行分析介紹，而且分享了一些性能優化的技巧；更多相關內容查看現代 Web 開發導論。
• 分佈式事務概述: 本文是對於分佈式系統以及分佈式事務的概述，包含了如下內容：分佈式數據模型，樂觀模型與悲觀模型；原子性，多版本併發控制與基於網絡的鎖同步；一致性，兩階段提交協議，Paxos，Raft；隔離性，鏡像隔離，序列隔離；持久性等。更多相關內容參考 Distributed System CheatSheet。

開源項目

樂於分享，共推前端發展

• Rough.js: Rough.js 是輕量級的（約 8KB），基於 Canvas 的手繪樣式的繪圖庫。Rough.js 爲咱們提供了多種不一樣的圖形單元，來繪製直線，曲線，弧線，多邊形，圓形以及橢圓形等，同時其還支持根據路徑繪製 SVG。
• TOAST UI Chart: TOAST UI Chart 是新近開源的，可以運行在包括 IE8 在內的各類瀏覽器中。TOAST UI Chart 提供了直方圖、折線圖、散點圖、餅圖、熱力圖等多種類型格式的圖表，能夠直接查看原文了解安裝與使用的細節。
• fkill-cli: fkill-cli 是很是好用的跨平臺進程關閉工具，它可以運行在 macOS，Linux 以及 Windows 操做系統上。咱們能夠直接經過冒號來指定須要關閉的佔用該端口的進程，也能夠無參數方式進入到交互選擇界面，經過進程名進行快速篩選。

巔峯人生

• 霍金：手握日月摘星辰，世間無我這般人: 3 月 14 日消息，物理學家霍金去世，享年 76 歲。這位英國科學家因黑洞和相對性的開創性著做而聞名，並撰寫過幾本科普著做，包括《時間簡史》。55 年來，病魔逐漸佔據了他的軀體，但他的思想卻蔓延到了整個宇宙。仰望星辰的人，如今成了星辰。

前端之巔

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