15 min read

web前端年刊-2020年(88篇精选文章)

2020年web前端年刊,收录了包括JavaScript、Node.js、CSS;浏览器、网络、性能优化;前端框架、小程序;前端相关知识、原理、实践;前端相关思考;微前端、Serverless、中台、微服务;技术实现、原理、基本知识;其它实践经验、开发思想、心得总结;方面的好文。

JavaScript、Node.js、CSS:

Node.js 模块系统源码探微

本文剖析了部分核心源码实现,方便读者了解Node.js模块加载过程的一些实现,比如CommonJS规范实现、模块定位和加载策略、文件解析和编译执行。

十分钟上手 ES2020 新特性

ES2020是ECMAScript对应2020年的版本,本文对ES2020新的特性做了解读。

理解transform中的matrix

本文探讨transform中的matrix背后原理。

CSS变量对JS交互组件开发带来的提升与变革

通过CSS变量实现交互组件开发的新思路。


浏览器、网络、性能优化:

2020前端性能优化清单之一

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍准备工作、选择正确的指标、定义环境。

2020前端性能优化清单之二

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍资源优化(文本、图像、字体)。

2020前端性能优化清单之三

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍构建优化。

2020前端性能优化清单之四

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍构建优化(针对引擎优化、SSR、CSR)。

2020前端性能优化清单之五

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍传输优化。

2020前端性能优化清单之六

这份前端性能优化清单自2016年开始已经持续更新了5年。本章介绍网络与http/2和最后的总结。

为新的Facebook.com重建我们的技术栈

Facebook性能优化和用户体验改善案例。

HTTP/3原理与实践

本文基于 QQ兴趣部落接入 HTTP/3 的实践,聊一聊 HTTP/3 的原理以及业务接入的方式。

深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系

从规范解读入手,深挖底层,深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系。

你不知道的 Web Workers (上)

进程与线程、浏览器内核、Web Workers相关的基础知识。

Web Worker 文献综述

一篇非常详细的Web Worker相关文章。

解读HTTP/2与HTTP/3 的新特性

本文介绍了HTTP/1.1的缺陷、HTTP/2的新特性以及基于UDP的HTTP/3的简介。

现代浏览器内部揭秘之一

现代浏览器内部揭秘系列由四部分组成,本文是此系列的第一部分,将介绍核心计算术语与 Chrome 的多进程体系架构。

现代浏览器内部揭秘之二

现代浏览器内部揭秘系列由四部分组成,本文是此系列的第二部分,将更深入研究每个进程和线程如何进行通信以展示网站。

现代浏览器内部揭秘之三

现代浏览器内部揭秘系列由四部分组成,本文是此系列的第三部分,研究渲染管道从解析到合成的整个过程。


前端框架、小程序:

跨平台开发领域老兵:我眼中小程序的当下和未来可能

从小程序历史回顾出发,到小程序现有技术架构剖析,分析小程序当下几个主要性能坑点,最后从当前已知问题出发,总结了小程序技术上的可能方向。

深入理解 Vue3 Reactivity API

Vue3 Reactivity API的说明书。

适合Vue用户的React教程,你值得拥有

将React与Vue的用法做的一个对比,通过对比方便使用Vue的小伙伴可以快速将Vue中的写法转换为React的写法。


前端相关知识、原理、实践:

前端 DSL 实践指南(上)—— 内部 DSL

本文主要针对内部DSL这个重要分支在前端的实践做了展开说明,并结合Javascript和前端领域的一些典型范例阐述了8种实现风格,以及在实践内部DSL过程中的一些问题。

WebAssembly 与 Kubernetes双剑合璧

WebAssembly技术已经走出浏览器,让计算无处不在。利用containerd的扩展机制,可以为WebAssembly应用提供与其他容器应用一致的、抽象的、应用分发、交付和运维模型,可以在Kubernetes集群中进行统一调度和管理。

精读《Webpack5 新特性 - 模块联邦》

了解什么是Webpack5“模块联邦”功能。

200 行 JS 代码,带你实现代码编译器

本文从编译器概念和基本工作流程开始介绍,然后详细介绍了核心工作流程实现,包括「词法分析器」、「语法分析器」、「遍历器」等。

一文助你搞懂 AST

从介绍AST和babel工作原理到编写自己的AST插件。

「可视化搭建系统」——从设计到架构,探索前端领域技术和业务价值

一篇基于富文本编辑器搭建可视化页面的文章,作者从自研的「可视化页面搭建系统」入手,就探索阶段到成熟阶段的演进历史进行了详细介绍。

VSCode源码解读--IPC通信机制

本文记录研究VSCode中通信机制的过程,主要包括IPC通信机制。

前端模块化的十年征程

从前端模块化的时间线出发,介绍前端模块化是如何演进。

开源富文本编辑器技术的演进

作者主要从技术实现以及编程思想的演变,介绍编辑器这10年间的变化与发展。

CodeSandbox是如何让npm上的模块直接在浏览器端运行的

作者首先介绍CodeSandbox刚开始是怎样做的并遇到的一些问题,然后现在做到了一个什么程度,以及未来还可以继续做哪些改进。

知乎部署系统演进

本文按时间顺序,对知乎部署系统的功能演进进行介绍。

谈谈微前端领域的js沙箱实现机制

微前端js沙箱实现机制的主流实现方案。

揭秘webpack插件工作流程和原理

本文将尝试探索 webpack 插件的工作流程,进而去揭秘它的工作原理。

前端发展史的江湖恩怨情仇

本文将用漫画的形式带你倒回历史的长河,一起领略前端发展史的江湖风云纠纷、恩怨情仇…

大规模采用 TypeScript 之后的 10 个见解

在这篇文章中,将分享彭博社工程部采用TypeScript作为首选开发语言,在迁移过程中学到的经验教训以及一些见解。

滨江前端沙龙分享:前端团队研发效能提升的探索与实践

丁香园前端团队研发效能提升的探索与实践。

前端响应式编程与实时计算:从 RxJS 到 Flink

本文以一个新闻网站为例,阐述在前端开发中如何使用响应式编程思想;再以计算电商平台双11每小时成交额为例,分享同样的思想在实时计算中的相同与不同之处。


前端相关思考:

如何推动前端团队的基础设施建设

业界关于前端系统性基建建设的分享输出并不多,希望本次这些个人角度沉淀的文字,能为一些同学带来一些启示,产生一些改变。

如何设计大型前端团队基建路线

主要分享阿里妈妈团队多年积累下来的前端基础设施相关方面的一些成果和心得。

前端状态管理设计——优雅与妥协的艺术

前端状态管理发展史及探讨相关解决方案的一些妥协。

面向 Model 编程的前端架构设计

携程前端架构设计如何从 Backbone.js 走到 Pure-Model + Monorepo + GraphQL-BFF + React-Native/React-IMVC 的模式,并呈现了在每个阶段我们所面对的问题、所作的思考和最终的选择。

前端架构 101:在谈论它们之前我们需要达成的共识

前端架构系列,本文作为系列的第一篇《共识篇》。

前端架构 101: MVC 初探

前端架构系列,本文作为系列的第二篇《MVC篇》。

前端架构101:MVC启示录 - 模块的职责,作用域和通信

前端架构系列,本文作为系列的第三篇《模块的职责、作用域和通信》。

前端架构101:MVC的不足与Flux的崛起

前端架构系列,本文作为系列的第四篇《MVC的不足与Flux的崛起》。

前端架构101:从 Flux 进化到 Model-View-Presenter

前端架构系列,本文作为系列的第五篇《MVP》。

前端架构 101(六):整洁(Clean Architecture)架构是归宿

前端架构系列,本文作为系列的第六篇《整洁架构》。

前端架构鉴赏01:Angular 架构模式与最佳实践

本文讲述了设计Angular应用架构的一些思路。

前端架构鉴赏02:可拓展 Angular 2 架构

关于编写具有可拓展性和可维护性单页面应用的指南。

前端架构鉴赏03:Angular 与 MVP 模式

MVP模式应用到Angular中的实践。

语雀的技术架构演进之路

本文从技术架构的视角,回顾了语雀的原型、内部服务和对外商业化的全过程,并对函数计算在语雀架构演进过程中所扮演的角色做了详细的介绍。


微前端、Serverless、中台、微服务:

Service Mesh 浅析:从概念、产品到实践

本文从概念介绍开始,让大家理解Service Mesh技术出现的原因以及愿景,接着对Istio和AWS App Mesh进行比较,后面简要的介绍在该领域实践。

爱奇艺号如何基于Vue定制开发微前端框架?

此文从偏向实践的方面来简要介绍爱奇艺号基于Vue定制的微前端框架实现原理。

微前端在美团外卖的实践

从背景到微前端方案落地,详细地介绍了微前端在美团外卖商家广告端的实践过程。

微前端在企业级应用中的实践(上)

本文讲述了微前端的起源以及web应用的多种集成方式,然后讲述DevUI的web集成模式案例,最后对single-spa进行了原理分析。

Serverless 的喧哗与骚动

本文分享阿里高级技术专家对Serverless行业发展现状的一些看法。

Serverless 服务选型

本篇文章尝试以日常开发流程为起点,分析每个阶段面对的问题,然后提炼面向 Serverless 的开发模型,为开发者采用 Serverless 架构和服务提供参考。

Serverless 掀起新的前端技术变革

从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。

如何设计微前端中的主子路由调度

微前端设计中的路由问题讨论和解决方案。

前端中台化,把格局做大——NodeJS 和测试服务探索

这篇文章我们介绍了 NodeJS 助力传统端到端测试,最终实现破局和创新的双赢项目案例。

权威指南:Serverless 未来十年发展解读(上)

本文整理自 Johann Schleier-Smith 在 ServerlessDays China 的演讲,是来自加州大学伯克利分校计算机科学 Riselab 团队的研究成果。

权威指南:Serverless 未来十年发展解读(下)

Serverless 未来十年发展解读(下)

EMP微前端解决方案

来自欢聚时代EMP微前端解决方案的介绍和具体的实战情况。

关于中台的思考和尝试

本文从中台的定义出发,介绍了中台的本质、中台的合理组织机制及演进机制,最后分享了车好多在中台的实践。

微服务中台技术解析之分布式事务方案和实践

本文从FreeWheel核心业务系统的架构变迁和事务性需求开始,介绍了一种支持异构数据库、实现最终一致性的分布式事务方案以及相关的落地实践。


技术实现、原理、基本知识:

一文搞懂主流的扫码登录技术原理

本文简要的介绍了扫码登录功能的技术实现逻辑,并实际结合淘宝、微信的扫码登录功能,介绍了大厂主流应用的技术实现思路。

深入浅出分布式唯一ID

分布式唯一ID和snowflake雪花算法介绍

写给大忙人看的操作系统

操作系统相关知识速食。

图解常用的 Git 指令含义

一些常用Git指令的图解说明,非常通俗易懂。

玩转混合加密

本文介绍如何对数据进行加密,涉及常用对称加密(aes)、非对称加密(rsa)、消息摘要算法(md5)等。

《编程时间简史系列》Web Server 编年史

本文将会讲述 Web 服务端技术的萌芽和演进过程,旨在使读者能更清晰地掌握 Web 服务端技术的发展脉络。

了不起的 IoC 与 DI

本文带你一起探索面向对象编程中 IoC(控制反转)和 DI(依赖注入) 的设计思想。

这才是真正的Git——Git内部原理揭秘!

本文以一个具体例子结合动图介绍了Git的内部原理,包括Git是什么储存我们的代码和变更历史的、更改一个文件时,Git内部是怎么变化的、Git这样实现的有什么好处等等。

细说 SOLID 原则

本文从 SOLID 原则出发,通过更贴近业务的解释性文字和具体的代码示例来回答这些问题。

这才是真正的 Git——分支合并

本文通过讲解三向合并和 Git 的合并策略,step by step 介绍 Git 是怎么做一个合并的,让大家对 Git 的合并结果有一个准确的预期,并且避免发生合并事故。

细数九种常见的设计模式

结合一些生活中的场景并通过精美的配图,来向大家介绍 9 种常用的设计模式,并附带代码和应用场景及案例。

改变世界的一次代码提交

Git 第一次提交的源代码分析及带来的启示

聊一聊二维码扫描登录原理

本文共三个主题:什么是二维码、移动端基于 token 的认证机制、二维码扫码登录的原理。


其它实践经验、开发思想、心得总结:

Dan Abramov:我的十年回顾

Dan Abramov的十年回顾。(Dan Abramov:React核心开发,Redux作者)

如何推动基础架构项目落地

建设基建团队、基建落地方法论、落地案例。

Ant Design 开源项目经验分享,你想知道的都在这儿了

本文基于 Ant Design 多年来的项目运作,与大家交流开源项目的运作经验。

注重产品思维的软件工程师

成为一个更有产品意识的工程师的建议。

玉伯的人生答案:做一个简单自由有爱的技术人

蚂蚁研究员兼体验技术部负责人玉伯,在蚂蚁内部技术人的成长公开课上,分享了他的人生愿景和心路历程。

做To B,一定要避免的9类致命错误

作者总结出,做To B业务最易犯的9类致命错误,希望能让大家在创业的路上少走弯路。

产品设计方法与实践

本文将分四个部分介绍产品设计的目标、职责、方法与实践,分享一些让方法行之有效的心得与体会。


2020年大前端技术趋势解读

IMWeb团队为大家带来的2020年大前端技术趋势解读。

期刊来自:github|web-monthly