<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[teobler的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/teobler</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; teobler]]></copyright><item><title><![CDATA[重新思考 React 项目架构]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/127361993</link><guid>https://blog.youkuaiyun.com/teobler/article/details/127361993</guid><author>teobler</author><pubDate>Mon, 17 Oct 2022 13:44:33 +0800</pubDate><description><![CDATA[在开始聊之前，我想定义一下架构的概念。大部分小伙伴都会问一个问题：
“
前端能有啥架构，不就是文件放到哪个文件夹吗？
”
对，但也不对，所以我们需要对齐认知：
到底什么是架构？
在开始之前，我希望你将视野从前端这个点扩展开，站在你正在参与开发的整个系统来思考这个问题。
然后我们先来看看一个相对权威的对架构的定义是什么样的：
“
Architecture is the fundamental organization of a system embodied in its components, their ]]></description><category></category></item><item><title><![CDATA[从 TDD 到测试策略]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/122765468</link><guid>https://blog.youkuaiyun.com/teobler/article/details/122765468</guid><author>teobler</author><pubDate>Tue, 01 Feb 2022 18:55:42 +0800</pubDate><description><![CDATA[前端没法 TDD / 前端不容易做 TDD / 前端 TDD 收益不大。这是进公司后无数人给我判的“死刑”。事实上好像的确如此？]]></description><category></category></item><item><title><![CDATA[别被你的框架框住了]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/121435654</link><guid>https://blog.youkuaiyun.com/teobler/article/details/121435654</guid><author>teobler</author><pubDate>Sat, 20 Nov 2021 10:13:40 +0800</pubDate><description><![CDATA[我短暂的职业生涯被 React 充斥着。
还没毕业前我从 Vue 2.x 入手开始学习框架，在一个我当时觉得还行现在回看完全不行的状态进了公司。然后开启了跟 React 死磕的状态，从 class 组件到函数式组件，从 Redux 到 Recoil，从 Antd 到 MUI...
不久前一个呆了2年多的项目成功结束，接下来要去一个新项目，新项目要用 Angular，于是我开始告别从毕业就开始用的 React，开始学习这个大家少有提及的框架。
得
回顾这几年，要说 React 带给我最多的是什么，我觉得可能是]]></description><category></category></item><item><title><![CDATA[React 18探秘（上）]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/118583931</link><guid>https://blog.youkuaiyun.com/teobler/article/details/118583931</guid><author>teobler</author><pubDate>Thu, 08 Jul 2021 22:24:49 +0800</pubDate><description><![CDATA[React 17 那篇没有任何新特性的博客还历历在目，半年多后，终于等来了 17 铺路许久的 18 发布计划，本来想赶紧看看都有些啥，无奈事情略多，一直拖到现在，最近有点点时间，看看 18 给我们带来了什么。
17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥，一通搜索之后得到了一些答案：17 在给未来的 Concurrent Mode 铺路，为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋，一盘包括了 RN / Web / SSR / Server]]></description><category></category></item><item><title><![CDATA[软件匠艺]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/114876875</link><guid>https://blog.youkuaiyun.com/teobler/article/details/114876875</guid><author>teobler</author><pubDate>Tue, 16 Mar 2021 13:08:43 +0800</pubDate><description><![CDATA[敏捷的宿醉
从敏捷宣言发布，敏捷如同在雪山顶滚下的一个小雪球，迅速发展并很快席卷了整个软件业。但是如同传话游戏那样，最初的敏捷思想被扭曲和简化，最终到管理者耳朵里变成了是承诺可以更快交付软件的一个流程。
于是浩浩荡荡的敏捷转型开始了，但是一种文化并不容易转型到另一种文化，于是一个岗位出现了巨大的缺口：敏捷教练。令人遗憾的是，许多既没有业务经验也没有技术经验的敏捷教练，在经过短短几天的培训获得认证后就开始辅导各个公司的管理者，并且告诉开发团队该去做什么。
他们告诉管理者：工程部分很简单，只要我们搞定了流程，工]]></description><category></category></item><item><title><![CDATA[敏捷业务实践之计划游戏]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/113747474</link><guid>https://blog.youkuaiyun.com/teobler/article/details/113747474</guid><author>teobler</author><pubDate>Sun, 07 Feb 2021 21:21:25 +0800</pubDate><description><![CDATA[敏捷发展至今已经有无数分支，这些分支的发展有些是为了应对不同项目增删改了一些实践和规则，使得敏捷能够应用在一些特殊的项目上。而另一些则是一些人想接敏捷之手宣传自己的思想与实践，强行在敏捷中加入了自己的想法。这些原因使得如今的敏捷五花八门，甚至出现两人在谈论完全不一样的敏捷。
在接下来的文章中，所有敏捷实践将会使用极限编程来作为例子。这是因为在所有敏捷过程中，极限编程是定义最完整且最不混乱的。可以说其他的敏捷过程都是极限编程的子集或变体。极限编程是敏捷本质核心的原型，也是最好的代表。
生命之环
[外链图片转存]]></description><category></category></item><item><title><![CDATA[到底什么是敏捷]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/113554096</link><guid>https://blog.youkuaiyun.com/teobler/article/details/113554096</guid><author>teobler</author><pubDate>Tue, 02 Feb 2021 14:14:56 +0800</pubDate><description><![CDATA[从加入公司到现在快三年，从进入公司的那一刻开始实践敏捷，但是说起来惭愧，如果你问我敏捷是什么，我好像不能给出一个专业的回答。由此我开始探索敏捷的过去现在和未来，然后我发现了Bob大叔的新书 Clean Agile: Back to Basics。
从敏捷诞生以来，它被赋予了太多东西，诚然有些东西很好地发扬了敏捷，但是很多东西可以说是蹭热度强行加上去的，只是为了让大家认识敏捷的同时学习自己的”私货“。这本书如同它的翻译一般，是为了正本清源，澄清大家对敏捷的误解和混淆，重述敏捷最初的用意。
一切要从一个对后世影]]></description><category></category></item><item><title><![CDATA[前后端集成没你想的那么难]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/111006378</link><guid>https://blog.youkuaiyun.com/teobler/article/details/111006378</guid><author>teobler</author><pubDate>Thu, 10 Dec 2020 21:47:42 +0800</pubDate><description><![CDATA[“
本文首发于我的博客，转载请注明出处
”
网上时不时就能看到一些求助帖，大意是前后端集成所产生的一些争执，其实集成的时候如果能有一些”规范“，这件事情可以很简单。
技术栈
本文跟技术栈强相关，但是理论上从里面抽离出来的方法论可以实践在任意的技术栈上，只需要投入一点点时间和精力写一个小工具就好了，下面是本文所用到的一些技术栈：

ReactTypeScriptSWRaxios后端使用 Swagger 作为API文档@openapi-integration/swr-request-generator
swr-]]></description><category></category></item><item><title><![CDATA[SSO里面的SAML和OIDC到底讲了啥]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/106481377</link><guid>https://blog.youkuaiyun.com/teobler/article/details/106481377</guid><author>teobler</author><pubDate>Mon, 01 Jun 2020 20:44:58 +0800</pubDate><description><![CDATA[本文首发于我的博客 https://teobler.com 转载请注明出处

SSO是什么
在了解SSO是什么之前，我们需要搞清楚两个概念： Authentication &amp; Authorization。
Authentication(又被称为AuthN，身份验证)，它指的是 the process of verifying that "you are who you say you are"，也就是说这个过程是为了证明你是你。通常来说有这么几个方式：

Single-factor - 也就是可以.]]></description><category></category></item><item><title><![CDATA[(2)你真的会用Chrome devtool吗?]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/106298133</link><guid>https://blog.youkuaiyun.com/teobler/article/details/106298133</guid><author>teobler</author><pubDate>Sat, 23 May 2020 11:58:56 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com

Performance 
Performance API
有的时候我们可能会想测试一下用户的某一个操作要消耗多少时间，而通常一般人会这么做：
const&nbsp;start&nbsp;=&nbsp;new&nbsp;Date().getTime();//&nbsp;do&nbsp;your&nbsp;workconst&nbsp;end&nbsp;=&nbsp;new&nbsp;Date().getTime();console.log(.]]></description><category></category></item><item><title><![CDATA[React Concurrent Mode 之 Suspense 实践]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/106156956</link><guid>https://blog.youkuaiyun.com/teobler/article/details/106156956</guid><author>teobler</author><pubDate>Sat, 16 May 2020 11:53:14 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com ,转载请注明出处

自从三大框架成型之后，各个框架都为提升开发者的开发效率作出了不少努力，但是看起来技术革新都到了一个瓶颈。除了 React 引入了一次函数式的思想，感觉已经没有当初从DOM时代到数据驱动时代的惊艳感了。于是 React 将精力放在了用户体验上，想让开发者在不过多耗费精力的情况下，用框架自身去提升用户体验。
于是在最近的几个版本中，React 引入了一个叫做 Concurrent Mode 的东西，同时还引入了 Suspen.]]></description><category></category></item><item><title><![CDATA[(1)你真的会用Chrome devtool吗？]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/104648422</link><guid>https://blog.youkuaiyun.com/teobler/article/details/104648422</guid><author>teobler</author><pubDate>Wed, 04 Mar 2020 10:37:39 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com ,转载请注明出处

这是一个介绍Chrome devtool的系列文章，虽然这是一个前端小伙伴们都很熟悉的东西，但是我相信它的很多还不错的功能其实或许你并不知道，这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。
第一篇我们会介绍如何在devtool中做编辑和debug。
Editin...]]></description><category></category></item><item><title><![CDATA[Webpack原理(3) — 核心概念]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/104559559</link><guid>https://blog.youkuaiyun.com/teobler/article/details/104559559</guid><author>teobler</author><pubDate>Fri, 28 Feb 2020 16:56:23 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com 转载请注明出处

Entry
我们先来看一张图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XWHVFpq-1582879870653)(https://teobler-image.s3-us-west-1.amazonaws.com/webpack-entry.png)]
从这张图可以看到，最...]]></description><category></category></item><item><title><![CDATA[Webpack原理(2) — 加载原理]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/104455544</link><guid>https://blog.youkuaiyun.com/teobler/article/details/104455544</guid><author>teobler</author><pubDate>Sun, 23 Feb 2020 10:23:49 +0800</pubDate><description><![CDATA[webpack的核心目的和功能就是打包JavaScript代码，在时间的推进过程中，其逐渐演化成了一个生态体系，成为前端打包代码和处理开发时候必不可少的一个工具。

本文首发于我的个人博客: https://teobler.com, 转载请注明出处， 文章中提到的所有源代码来自于https://github.com/thelarkinn/webpack-workshop-2018


以下代码位于...]]></description><category></category></item><item><title><![CDATA[Webpack原理(1) — Why Webpack]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/104410033</link><guid>https://blog.youkuaiyun.com/teobler/article/details/104410033</guid><author>teobler</author><pubDate>Thu, 20 Feb 2020 14:15:57 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com, 转载请注明出处

我们怎么使用JS
众所周知，我们在HTML文件中使用JavaScript只能通过script标签来引入：
&lt;script src="./index.js"&gt;&lt;/script&gt;

&lt;script&gt;
	console.log('Hello World');
&lt;/script...]]></description><category></category></item><item><title><![CDATA[用React hooks实现TDD]]></title><link>https://blog.youkuaiyun.com/teobler/article/details/104365301</link><guid>https://blog.youkuaiyun.com/teobler/article/details/104365301</guid><author>teobler</author><pubDate>Mon, 17 Feb 2020 21:28:04 +0800</pubDate><description><![CDATA[本文首发于我的个人博客: https://teobler.com, 转载请注明出处

由于篇幅所限文章中并没有给出demo的所有代码，大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程，配合文章来看会比较清晰。本文涉及的所有代码地址: teobler/TDD-with-React-hooks-demo
前端TDD的痛
从进公司前认识了TDD，到实践TDD，过程中自...]]></description><category></category></item></channel></rss>