重新思考 React 项目架构 (teobler.com)
这篇文章想聊聊这四年我对前端架构的认识及思考,这是一个慢慢演进和一步步推翻自己的过程。
by @Teobler 2022-10-17 13:52 查看详情
别被你的框架框住了 (teobler.com)
我短暂的职业生涯被 React 充斥着。

还没毕业前我从 Vue 2.x 入手开始学习框架,在一个我当时觉得还行现在回看完全不行的状态进了公司。然后开启了跟 React 死磕的状态,从 class 组件到函数式组件,从 Redux 到 Recoil,从 Antd 到 MUI...

不久前一个呆了2年多的项目成功结束,接下来要去一个新项目,新项目要用 Angular,于是我开始告别从毕业就开始用的 React,开始学习这个大家少有提及的框架。
by @Teobler 2021-11-20 10:09 查看详情
微前端拆分实践 (teobler.com)
我们的项目整体来看算得上一个比较大型的项目,整个项目规划完成后有 17 条业务线。但是在刚起项目的时候由于种种原因并没有考虑周全,将项目当成一个普通的前端项目来解决,在第一期项目结束,第一条业务上线后,我们紧接着开始了第二和第三条业务线的开发,紧接着我们就遇到了一些问题.....
by @Teobler 2021-09-14 09:38 查看详情
React 18探秘(上) (teobler.com)
React 17 那篇没有任何新特性的博客还历历在目,半年多后,终于等来了 17 铺路许久的 18 发布计划,本来想赶紧看看都有些啥,无奈事情略多,一直拖到现在,最近有点点时间,看看 18 给我们带来了什么。

17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥,一通搜索之后得到了一些答案:17 在给未来的 Concurrent Mode 铺路,为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋,一盘包括了 RN / Web / SSR / Server Component 的大棋。而这次 18 的发布计划虽然还是没能发布 Concurrent Mode,但也透露了一些未来 Concurrent Mode 的样子。
by @Teobler 2021-07-08 22:27 查看详情
前端架构演进 - 从单体到微前端(理论篇) (mp.weixin.qq.com)
我们首先需要认识到每一个系统的架构都不应该是一成不变的,为了应对业务的变化,我们不应该只有重写这一个选项。但往往架构的迁移业务方不会给开发人员预留充足的时间,在短时间内平滑地将旧的架构向新的架构演进就成为了一个需要解决的问题。

本文将从一个我最近经历的项目出发,讲解我们是如何在两周时间内将一个单体前端应用演化为一个微前端应用的。
by @Teobler 2021-04-25 20:59 查看详情
软件匠艺 (teobler.com)
为了提高软件开发的水准,并重新明确敏捷最初的目标,一群开发人员于 2008 年 11 月聚集到芝加哥,发起了一项新的运动:软件匠艺(Software Craftsmanship)。如同 2001 年的敏捷峰会一样,2008 年的会议达成了一套核心价值观,并在《敏捷宣言》的基础上提出了一个新的宣言。
by @Teobler 2021-03-16 12:53 查看详情
小步发布、验收测试和完整团队 (mp.weixin.qq.com)
在上一篇文章中我们花比较大的篇幅介绍了敏捷业务实践中的计划游戏,在这篇文章中我们将介绍介绍极限编程里生命之环中外围剩下的三个业务实践 - 小步发布、验收测试和完整团队。
by @Teobler 2021-03-03 22:32 查看详情
敏捷业务实践之计划游戏 (teobler.com)
计划游戏是极限编程生命之环外圈的一个业务实践,它主要指的是IPM以及为了支撑IPM的一系列实践,比如估点,故事优先级排列以及速率预估和检查等等。

为了能够大概知道项目会在什么时候完结,往往会在项目开始前或每个迭代(一般两周为一迭代,不同项目可以调整迭代时长)开始前对接下来的工作进行大概的估算。
by @Teobler 2021-02-28 11:55 查看详情
到底什么是敏捷 (mp.weixin.qq.com)
从敏捷诞生以来,它被赋予了太多东西,诚然有些东西很好地发扬了敏捷,但是很多东西可以说是蹭热度强行加上去的,只是为了让大家认识敏捷的同时学习自己的”私货“。这本书如同它的翻译一般,是为了正本清源,澄清大家对敏捷的误解和混淆,重述敏捷最初的用意。

一切要从一个对后世影响深远的会议说起。
by @Teobler 2021-02-24 22:01 查看详情
到底什么是敏捷 (teobler.com)
从加入 ThoughtWorks 到现在快三年,从进入公司的那一刻开始实践敏捷,但是说起来惭愧,如果你问我敏捷是什么,我好像不能给出一个专业的回答。由此我开始探索敏捷的过去现在和未来,然后我发现了Bob大叔的新书 Clean Agile: Back to Basics。

从敏捷诞生以来,它被赋予了太多东西,诚然有些东西很好地发扬了敏捷,但是很多东西可以说是蹭热度强行加上去的,只是为了让大家认识敏捷的同时学习自己的”私货“。这本书如同它的翻译一般,是为了正本清源,澄清大家对敏捷的误解和混淆,重述敏捷最初的用意。

一切要从一个对后世影响深远的会议说起。
by @Teobler 2021-02-02 16:48 查看详情
SSO里面的SAML和OIDC到底讲了啥 (mp.weixin.qq.com)
SSO中文翻译为单点登录,是一个多平台单点认证系统,本文详细介绍了实现SSO的两个比较常见的协议实现SAML 2.0和OIDC
by @Teobler 2020-06-01 21:01 查看详情
(2)你真的会用Chrome devtool吗? (mp.weixin.qq.com)
这是一个介绍Chrome devtool的系列文章,虽然这是一个前端小伙伴们都很熟悉的东西,但是我相信它的很多还不错的功能其实或许你并不知道,这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。
by @Teobler 2020-05-23 12:02 查看详情
React Concurrent Mode 之 Suspense 实践 (mp.weixin.qq.com)
这篇文章是 React Concurrent Mode 的实践,同时加上了 swr 的应用,目前来看两者的结合还有坑,总之两者都是非常有潜力的。前者帮开发者解决了一部分大型应用卡顿的问题,后者是年内新兴比较优秀的网络请求react库
by @Teobler 2020-05-16 16:47 查看详情
(1)你真的会用Chrome devtool吗? (teobler.com)
这是一个介绍Chrome devtool的系列文章,虽然这是一个前端小伙伴们都很熟悉的东西,但是我相信它的很多还不错的功能其实或许你并不知道,这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。

第一篇我们会介绍如何在devtool中做编辑和debug。
by @Teobler 2020-03-04 11:16 查看详情
前端没法TDD? (mp.weixin.qq.com)
谁说前端没法TDD,这不是能写的挺好的么,React hooks提供新的前端TDD的思路,也给你提供了前端的单元测试策略
by @Teobler 2020-02-28 20:41 查看详情
Webpack原理(3) — 核心概念 (teobler.com)
这篇文章给大家介绍了一些webpack的核心概念,并配了一些demo,方便大家理解并上手webpack
by @Teobler 2020-02-28 17:14 查看详情
Webpack原理(2) — 加载原理 (teobler.com)
webpack的核心目的和功能就是打包JavaScript代码,在时间的推进过程中,其逐渐演化成了一个生态体系,成为前端打包代码和处理开发时候必不可少的一个工具。
by @Teobler 2020-02-23 10:30 查看详情
Webpack原理(1) — Why Webpack (teobler.com)
从JS的发展来介绍webpack的历史以及我们为什么要使用webpack
by @Teobler 2020-02-20 14:31 查看详情