技術期刊 · 河海不擇細流 | 從根本上了解非同步程式設計體系;Prefresh, Fast-refresh for Preact;Web 動效例項詳解;Doodle

語言: CN / TW / HK

HEADER

蒲公英 · JELLY技術期刊 Vol.46

或許你曾聽過這樣一個說法,最初的知識圖譜設計就是網際網路本身,它如河海不擇細流,故能成就如今龐大的網路,也不斷幫助我們梳理自己的知識體系。比方說對於 Web 動效你知道多少種實現?非同步程式設計的本質是什麼?React like 框架快速更新的原理又是什麼……

觀海志

登山則情滿於山,觀海則意溢於海

從根本上了解非同步程式設計體系

梗概:計算機中有一個非常顯著的特點,就是不同硬體的訪問速度有著天壤之別,這讓幾乎所有的優化都是圍繞這個點來進行。在 20 年前,利用多執行緒就是解決併發的最主流方案,但是由於系統面臨的併發數越來越大,在有限的資源下,我們也不得不尋找更好的解決方法:非同步。非同步的目的不是讓單個任務執行得更快,而是為了讓計算機在相同時間內可以完成更多工。

推薦語:從根本上了解非同步程式設計體系,從硬體、作業系統、執行緒、語言層面逐步分析,抽絲剝繭,通過例子帶領大家一步一步看懂非同步程式設計的一些本質原理,由表及裡,非常好的科普文章。

Prefresh, Fast-refresh for Preact

梗概:文章主要介紹了 Prefresh 的工作原理,閱讀本文讀者能瞭解到 Prefresh 的 Babel 外掛、Webpack 外掛和執行時分別做了什麼事情,又是怎麼配合完成 React 元件的熱更新的。

推薦語:熱更新是現代 Web 開發中必不可少的一環。對於 React 生態,過去我們使用 react-hot-loader 去實現對 React 元件的熱更新,現在則是使用 React Fast Refresh。Preact 藉助 Prefresh 去實現類似的功能,又因為 Prefresh 基於 React Fast Refresh,因此閱讀本文能掌握同類型工具的底層原理。

Web 動效例項詳解

梗概:一套非常完整的 Web 動效基礎教程,由類似 Webflow 的視覺化建站工具 Tilda 提供

推薦語:該指南通過示例和使用技巧介紹 Web 動畫技術,在業務中使用動畫沒有頭緒時,可以翻翻看,興許會大有收穫~

Doodle Ipsum

梗概:文字排版佔位有 Lorem Ipsum,那插畫是否也能有對應的產品呢?於是有了 Doodle Ipsum,除了豐富的隨機選項之外,還支援用 URL 的形式使用自定義插畫,類似於 Image PlaceHolder

推薦語:想法固然重要,對於前端開發工程師來說,能深入理解產品背後的技術細節,想必更為重要。既然插畫有 Doodle Ipsum,那實際業務中是否可以有商品圖 Ipsum 呢?

流觴亭

因山卜地心機巧,望水如天眼力窮

Theia 中的通訊協議詳解

梗概:作為 Cloud IDE 常用的拓展平臺,Theia 通過自己實現的 JSON-RPC 協議幫助各個外掛模組直接的相互通訊,本文從註冊一個基礎服務開始教你如何完成 Theia JSON-RPC 的通訊流程,並詳細描述其實現的優缺點,並給出解決方案,

推薦語:或許不是所有人都需要做一個 Cloud IDE,但實現過程中的遇到的問題和解決方案,以及對於方案優劣的思考和取捨,是每個專案中都會遇到的。在 Cloud IDE 中碰到的每一個問題都值得很多其他型別的專案中去參考和借鑑,而本文雖然有一定的閱讀門檻,但依舊可以幫助到大家對於 JSON-RPC 有一定的認知和思考。

「蒲公英」期刊,每週更新,我們專注於挖掘「基礎技術工程化跨端框架技術圖形程式設計服務端開發桌面開發人工智慧設計哲學前端框架」等多個大方向的業界熱點,並加以專業的解讀;不僅如此,我們還會推介精選凹凸技術文章,向大家呈現團隊內的研究技術方向。

抬頭仰望,蒲公英的種子會生根發芽,如夏花絢爛;格物致知,我們登高遠眺、滄海拾遺,以求積矽步而至千里。

蒲公英 · JELLY技術期刊貢獻指南

FOOTER

歡迎關注凹凸實驗室部落格:aotu.io

或者關注凹凸實驗室,不定時推送文章。