从构建进程间缓存设计 谈 Webpack5 优化和工作原理

2020-03-05
阅读 8 分钟
2.9k
翻看日历,发现今天是 2020 庚子年第一个节气——立春。上古以“斗柄指向”法,用北斗星斗柄指向寅位时为立春。干支纪元,以立春为岁首,意味着新的一个轮回已开启,万物起始、一切更生。尽管我们今天仍然面临险峻疫情的挑战,但今日就代表了温暖、生长,我也愿意在在此刻梳理计划本年度的技术发展,做一些春耕播种的工作。

2020 年,开启现代库的基建学习 —— 从项目演进看前端工程化发展

2019-10-10
阅读 13 分钟
3.2k
在我的课程 前端开发核心知识进阶 的结束语:《大话社区和一个程序员的自我修养》中,我提到了西班牙语里,有一个很特别的的词语叫做 “Sobremesa”。它专指「吃完饭后,大家在饭桌上意犹未尽交谈的那段短暂而美好时光」。因此在课程最后一节,我不再去讲解“很干很硬”的知识点,相反地,我讲述了如何保持社区礼仪,积极融...

最新:Lodash 严重安全漏洞背后你不得不知道的 JavaScript 知识

2019-07-11
阅读 6 分钟
7.2k
可能有信息敏感的同学已经了解到:Lodash 库爆出严重安全漏洞,波及 400万+ 项目。这个漏洞使得 lodash “连夜”发版以解决潜在问题,并强烈建议开发者升级版本。 我们在忙着“看热闹”或者“”升级版本”的同时,静下心来想:真的有理解这个漏洞产生的原因,明白漏洞修复背后的原理了吗? 这篇短文将从原理层面分析这一事件,...

我们不背诵 API,只实现 API

2019-05-24
阅读 14 分钟
3k
有不少刚入行的同学跟我说:“JavaScript 很多 API 记不清楚怎么办?数组的这方法、那方法总是傻傻分不清楚,该如何是好?操作 DOM 的方式今天记,明天忘,真让人奔溃!”

四年前端狗,面试被虐,如何翻身?

2019-04-25
阅读 3 分钟
3.2k
课程链接 课程抢先看 课程亮点 36 个热点主题 50 讲系统性整理输出 在实战演练中掌握前端知识和编程技巧 面试切入,立体分析高频考点及其底层原理 课程介绍 作者 LucasHC(侯策),作为资深 Web 开发工程师和具有多年宝贵经验的面试官,系统梳理了前端开发核心知识脉络,同时立体剖析了前端开发进阶的方方面面,旨在帮读...

结合 Google quicklink,react 项目实现页面秒开

2018-12-17
阅读 3 分钟
4.4k
对于前端资讯比较敏感的同学,可能这两天已经听说了 GoogleChromeLabs/quicklink这个项目:它由 Google 公司著名开发者 Addy Osmani 发起,实现了:在空闲时间预获取页面可视区域内的链接,加快后续加载速度。如果你没有听说过 Addy Osmani 大神的名号,但对于他的多篇演讲或文章:

React 进阶设计与控制权问题

2018-09-12
阅读 8 分钟
2k
控制权——这个概念在编程中至关重要。比如,“轮子”封装层与业务消费层对于控制权的“争夺”,就是一个很有意思的话题。这在 React 世界里也不例外。表面上看,我们当然希望“轮子”掌控的事情越多越好:因为抽象层处理的逻辑越多,业务调用时关心的事情就越少,使用就越方便。可是有些设计却“不敢越雷池一步”。“轮子”与业务在...

漫谈前端性能 突破 React 应用瓶颈

2018-08-14
阅读 7 分钟
5.1k
性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR、数据可视化,前端工程师总是在突破极限。随之而来的性能问题有的被迎刃而解,有的成为难以逾越的盾墙。

探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

2018-04-24
阅读 9 分钟
2.2k
Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master。从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡。同时前不久, React 也从 15 升级到 16 版本,开发者并不需要作出太大的变动,即可“无痛升级”。但是在版本迭代的背后很多有趣的设计值得了解。Redux 此次升级同样如此。

React 设计模式和场景分析

2018-04-19
阅读 6 分钟
7.4k
这一周连续发表了两篇关于 React 的文章: 组件复用那些事儿 - React 实现按需加载轮子 React 应用设计之道 - curry 化妙用 其中涉及到 React 组件复用、轮子设计相关话题,并配合相关场景实例进行了分析。这些内容都算是 React 设计模式,一提到 Design Patterns,读者大可不必恐惧,事实上这都是 React 开发应用灵活性...

React 应用设计之道 - curry 化妙用

2018-04-18
阅读 7 分钟
3.9k
使用 React 开发应用,给予了前端工程师无限“组合拼装”快感。但在此基础上,组件如何划分,数据如何流转等应用设计都决定了代码层面的美感和强健性。

组件复用那些事儿 - React 实现按需加载轮子

2018-04-17
阅读 8 分钟
7.2k
组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库,比如 React、Vue 等对此概念都倍加推崇。确实,组件化复用性(reusability)和模块性(modularization)的优点对于复杂场景需求具有先天优势。组件就如同乐高积木、建筑石块一般,一点点拼接构成了我们的应用。

EventEmitter:从命令式 JavaScript class 到声明函数式的华丽转身

2018-04-10
阅读 7 分钟
2.2k
相信“函数式”这个概念对于很多前端开发者早已不再陌生:我们知道 JavaScript 是一门非常灵活,融合多模式(multiparadigm)的语言,这篇文章将会展示 JavaScript 里命令式语言风格和声明式风格的切换,目的在于使读者了解这两种不同语言模式的各自特点,进而在日常开发中做到合理选择,发挥 JavaScript 的最大威力。

React Render Array 性能大乱斗

2017-10-26
阅读 4 分钟
3.7k
现在关于 React 最新 v16 版本新特性的宣传、讲解已经“铺天盖地”了。你最喜欢哪一个 new feature?截至目前,组件构建方式已经琳琅满目。那么,你考虑过他们的性能对比吗?这篇文章,聚焦其中一个小细节,进行对比,望读者参考的同时,期待大神斧正。

React 内部机制探秘 - React Component 和 Element(文末附彩蛋demo和源码)

2017-09-29
阅读 6 分钟
4k
React Component Render => JSX => React.createElement => Virtual Dom

教你编写 Node.js 中间件,实现服务端缓存(附demo源码)

2017-09-06
阅读 3 分钟
6.4k
Express 作为 Node.js 的框架,如今发展可谓如日中天。我很喜欢其灵活、易扩展的设计理念。尤其是该框架的中间件架构设计:使得在应用中加入新特性更加标准化、成本最小化。这篇文章,我会尝试编写一个非常简单、小巧的中间件,完成服务端缓存功能,进而优化性能。

从 setState promise 化的探讨 体会 React 团队设计思想

2017-08-30
阅读 7 分钟
2k
在 React 组件中,调用 this.setState() 是最基本的场景。这个方法描述了 state 的变化、触发了组件 re-rendering。但是,也许看似平常的 this.setState() 里面却也许蕴含了很多鲜为人知的设计和讨论。

React Redux 中间件思想遇见 Web Worker 的灵感(附demo)

2017-08-15
阅读 3 分钟
5.3k
熟悉 React 技术栈的同学,想必对 Redux 数据流框架并不陌生。其倡导的单向数据流等思想独树一帜,虽然样板代码会有一定程度上的增多,但是对于开发效率和调试效率的提高是显著的。同时还带来了很多诸如 “时间旅行”,“ undo/redo ” 等黑魔法。

从贺老微博引出的“遍历器(Iterators)加速那些奥秘”

2017-08-01
阅读 6 分钟
4.1k
我关注的贺老—贺师俊前辈@johnhax 最近发表个这样一条微博: 虽然这条微博没有引起大范围的关注和讨论,但是作为新人,我陷入了思考。究竟 V8 引擎做了哪些魔法,达到了极大限度的优化呢? 这篇文章,将会深入浅出分析这些优化背后的奥秘。希望大神给予斧正和引导,同时对读者有所启发和帮助。 我们到底在讨论什么? ECM...

React 服务端渲染如此轻松 从零开始构建前后端应用

2017-07-19
阅读 10 分钟
7.7k
参加或留意了最近举行的JSConf CN 2017的同学,想必对 Next.js 不再陌生, Next.js 的作者之一到场进行了精彩的演讲。其实在更早些时候,由 Facebook 举办的 React Conf 2017,他就到场并有近40分钟的分享。但两次分享带来的 demo 都是 hacker news。我观察 Next.js 时间较长,看着它从1.x 版本一直到了今天的 3.x,终于...

通过一个场景实例 了解前端处理大数据的无限可能

2017-07-14
阅读 6 分钟
2.7k
随着前端的飞速发展,在浏览器端完成复杂的计算,支配并处理大量数据已经屡见不鲜。那么,如何在最小化内存消耗的前提下,高效优雅地完成复杂场景的处理,越来越考验开发者功力,也直接决定了程序的性能。

从 React 绑定 this,看 JS 语言发展和框架设计

2017-07-05
阅读 3 分钟
2.5k
在 javascript 语言中,关于 this 这个关键字的行为一直以来困扰着一代又一代初级开发者。同时 this,也充分反应了 javascript 的诡异与灵活。

React 组件设计和分解思考

2017-06-27
阅读 5 分钟
6k
之前分享过几篇关于React技术栈的文章: 做出Uber移动网页版还不够 极致性能打造才见真章 解析Twitter前端架构 学习复杂场景数据设计 React Conf 2017 干货总结1: React + ES next = ♥ React+Redux打造“NEWS EARLY”单页应用 一个项目理解最前沿技术栈真谛 一个react+redux工程实例 ...... 今天再来同大家讨论 React 组件...

JS冻结对象的《人间词话》 完美实现究竟有几层境界?

2017-06-06
阅读 7 分钟
3.3k
这篇文章由浅入深讨论JS中对象的一些锁定特性。但都是一些基础语法的实现,相信即便是前端小白也可以大体领会。不过需要读者预先了解JS中对象的特性,尤其是对象自身属性的描述符:configurable、writable...

人工智能离前端并不远 一步步教你开发一个机器学习APP(附源码)

2017-05-23
阅读 4 分钟
6.8k
最近HBO电视网推出的美剧《硅谷Silicon Valley》席卷全球,里面有一个桥段介绍了超级有趣的iOS app- Not Hotdog。你甚至可以在APP Store上下载到它。

拒绝Redux文档“毒害” 一个项目告诉你Redux最新真正哲学

2017-05-05
阅读 7 分钟
6.8k
之前分享过几篇关于React技术栈的原创文章: 解析Twitter前端架构 学习复杂场景数据设计 React Conf 2017 干货总结1: React + ES next = ♥ React+Redux打造“NEWS EARLY”单页应用 一个项目理解最前沿技术栈真谛 一个react+redux工程实例 ...... 今天进一步剖析一个实际案例:Uber APP 移动网页版。 如果你对React技术栈没...

解析Twitter前端架构 学习复杂场景数据设计

2017-04-27
阅读 4 分钟
4.8k
前几天刷Twitter,发现Nicolas(Engineering at @twitter. Technical Lead for Twitter Lite)发布了这么一条推文:

ES6 Async/Await 完爆Promise的6个原因

2017-04-14
阅读 6 分钟
45.7k
自从Node的7.6版本,已经默认支持async/await特性了。如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性“不容错过”。本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的一大杀器。

关于数组乱序的深挖——“感觉一直在写毒代码”

2017-04-13
阅读 10 分钟
4.6k
将一个数组进行乱序处理,是一个非常简单但是非常常用的需求。比如,“猜你喜欢”、“点击换一批”、“中奖方案”等等,都可能应用到这样的处理。包括我自己在写代码的时候,也确实遇到过。一般比较经典且流行的方案为:对对象数组采用array.sort()方法,并传入一个比较函数(comparison function),这个比较函数随机返回一个...

三个叹为观止的ES6 Array hack

2017-04-12
阅读 2 分钟
3.1k
在JavaScript中,数组随处可见。在最新版本的ECMAScript 6背景下,借助新的展开符、解构等特性,我们可以对数组做很多“四两拨千斤”的事情。