您的位置:首页 > Web前端 > React

技术期刊 · 河海不择细流 | 从根本上了解异步编程体系;Prefresh, Fast-refresh for Preact;Web 动效实例详解;Doodle Ipsum;Theia 中的通讯协议详解

2021-11-25 09:57 447 查看

蒲公英 · 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技术期刊贡献指南

欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: