- 博客(16)
- 收藏
- 关注
RSS订阅原创 重新思考 React 项目架构
在开始聊之前，我想定义一下架构的概念。大部分小伙伴都会问一个问题：“前端能有啥架构，不就是文件放到哪个文件夹吗？”对，但也不对，所以我们需要对齐认知：到底什么是架构？在开始之前，我希望你将视野从前端这个点扩展开，站在你正在参与开发的整个系统来思考这个问题。然后我们先来看看一个相对权威的对架构的定义是什么样的：“Architecture is the fundamental organization of a system embodied in its components, their
2022-10-17 13:44:33
511
1
原创 从 TDD 到测试策略
前端没法 TDD / 前端不容易做 TDD / 前端 TDD 收益不大。这是进公司后无数人给我判的“死刑”。事实上好像的确如此？
2022-02-01 18:55:42
633
原创 别被你的框架框住了
我短暂的职业生涯被 React 充斥着。还没毕业前我从 Vue 2.x 入手开始学习框架，在一个我当时觉得还行现在回看完全不行的状态进了公司。然后开启了跟 React 死磕的状态，从 class 组件到函数式组件，从 Redux 到 Recoil，从 Antd 到 MUI...不久前一个呆了2年多的项目成功结束，接下来要去一个新项目，新项目要用 Angular，于是我开始告别从毕业就开始用的 React，开始学习这个大家少有提及的框架。得回顾这几年，要说 React 带给我最多的是什么，我觉得可能是
2021-11-20 10:13:40
374
原创 React 18探秘（上）
React 17 那篇没有任何新特性的博客还历历在目，半年多后，终于等来了 17 铺路许久的 18 发布计划，本来想赶紧看看都有些啥，无奈事情略多，一直拖到现在，最近有点点时间，看看 18 给我们带来了什么。17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥，一通搜索之后得到了一些答案：17 在给未来的 Concurrent Mode 铺路，为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋，一盘包括了 RN / Web / SSR / Server
2021-07-08 22:24:49
186
原创 软件匠艺
敏捷的宿醉从敏捷宣言发布，敏捷如同在雪山顶滚下的一个小雪球，迅速发展并很快席卷了整个软件业。但是如同传话游戏那样，最初的敏捷思想被扭曲和简化，最终到管理者耳朵里变成了是承诺可以更快交付软件的一个流程。于是浩浩荡荡的敏捷转型开始了，但是一种文化并不容易转型到另一种文化，于是一个岗位出现了巨大的缺口：敏捷教练。令人遗憾的是，许多既没有业务经验也没有技术经验的敏捷教练，在经过短短几天的培训获得认证后就开始辅导各个公司的管理者，并且告诉开发团队该去做什么。他们告诉管理者：工程部分很简单，只要我们搞定了流程，工
2021-03-16 13:08:43
237
原创 敏捷业务实践之计划游戏
敏捷发展至今已经有无数分支，这些分支的发展有些是为了应对不同项目增删改了一些实践和规则，使得敏捷能够应用在一些特殊的项目上。而另一些则是一些人想接敏捷之手宣传自己的思想与实践，强行在敏捷中加入了自己的想法。这些原因使得如今的敏捷五花八门，甚至出现两人在谈论完全不一样的敏捷。在接下来的文章中，所有敏捷实践将会使用极限编程来作为例子。这是因为在所有敏捷过程中，极限编程是定义最完整且最不混乱的。可以说其他的敏捷过程都是极限编程的子集或变体。极限编程是敏捷本质核心的原型，也是最好的代表。生命之环[外链图片转存
2021-02-07 21:21:25
572
原创 到底什么是敏捷
从加入公司到现在快三年，从进入公司的那一刻开始实践敏捷，但是说起来惭愧，如果你问我敏捷是什么，我好像不能给出一个专业的回答。由此我开始探索敏捷的过去现在和未来，然后我发现了Bob大叔的新书 Clean Agile: Back to Basics。从敏捷诞生以来，它被赋予了太多东西，诚然有些东西很好地发扬了敏捷，但是很多东西可以说是蹭热度强行加上去的，只是为了让大家认识敏捷的同时学习自己的”私货“。这本书如同它的翻译一般，是为了正本清源，澄清大家对敏捷的误解和混淆，重述敏捷最初的用意。一切要从一个对后世影
2021-02-02 14:14:56
870
原创 前后端集成没你想的那么难
“本文首发于我的博客，转载请注明出处”网上时不时就能看到一些求助帖，大意是前后端集成所产生的一些争执，其实集成的时候如果能有一些”规范“，这件事情可以很简单。技术栈本文跟技术栈强相关，但是理论上从里面抽离出来的方法论可以实践在任意的技术栈上，只需要投入一点点时间和精力写一个小工具就好了，下面是本文所用到的一些技术栈：ReactTypeScriptSWRaxios后端使用 Swagger 作为API文档@openapi-integration/swr-request-generatorswr-
2020-12-10 21:47:42
649
原创 SSO里面的SAML和OIDC到底讲了啥
本文首发于我的博客 https://teobler.com 转载请注明出处SSO是什么在了解SSO是什么之前，我们需要搞清楚两个概念： Authentication & Authorization。Authentication(又被称为AuthN，身份验证)，它指的是 the process of verifying that "you are who you say you are"，也就是说这个过程是为了证明你是你。通常来说有这么几个方式：Single-factor - 也就是可以.
2020-06-01 20:44:58
1949
原创 (2)你真的会用Chrome devtool吗?
本文首发于我的个人博客: https://teobler.comPerformance Performance API有的时候我们可能会想测试一下用户的某一个操作要消耗多少时间，而通常一般人会这么做：const start = new Date().getTime();// do your workconst end = new Date().getTime();console.log(.
2020-05-23 11:58:56
325
原创 React Concurrent Mode 之 Suspense 实践
本文首发于我的个人博客: https://teobler.com ,转载请注明出处自从三大框架成型之后，各个框架都为提升开发者的开发效率作出了不少努力，但是看起来技术革新都到了一个瓶颈。除了 React 引入了一次函数式的思想，感觉已经没有当初从DOM时代到数据驱动时代的惊艳感了。于是 React 将精力放在了用户体验上，想让开发者在不过多耗费精力的情况下，用框架自身去提升用户体验。于是在最近的几个版本中，React 引入了一个叫做 Concurrent Mode 的东西，同时还引入了 Suspen.
2020-05-16 11:53:14
935
原创 (1)你真的会用Chrome devtool吗？
本文首发于我的个人博客: https://teobler.com ,转载请注明出处这是一个介绍Chrome devtool的系列文章，虽然这是一个前端小伙伴们都很熟悉的东西，但是我相信它的很多还不错的功能其实或许你并不知道，这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。第一篇我们会介绍如何在devtool中做编辑和debug。Editin...
2020-03-04 10:37:39
226
原创 Webpack原理(3) — 核心概念
本文首发于我的个人博客: https://teobler.com 转载请注明出处Entry我们先来看一张图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XWHVFpq-1582879870653)(https://teobler-image.s3-us-west-1.amazonaws.com/webpack-entry.png)]从这张图可以看到，最...
2020-02-28 16:56:23
200
原创 Webpack原理(2) — 加载原理
webpack的核心目的和功能就是打包JavaScript代码，在时间的推进过程中，其逐渐演化成了一个生态体系，成为前端打包代码和处理开发时候必不可少的一个工具。本文首发于我的个人博客: https://teobler.com, 转载请注明出处， 文章中提到的所有源代码来自于https://github.com/thelarkinn/webpack-workshop-2018以下代码位于...
2020-02-23 10:23:49
224
原创 Webpack原理(1) — Why Webpack
本文首发于我的个人博客: https://teobler.com, 转载请注明出处我们怎么使用JS众所周知，我们在HTML文件中使用JavaScript只能通过script标签来引入：<script src="./index.js"></script><script> console.log('Hello World');</script...
2020-02-20 14:15:57
170
原创 用React hooks实现TDD
本文首发于我的个人博客: https://teobler.com, 转载请注明出处由于篇幅所限文章中并没有给出demo的所有代码，大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程，配合文章来看会比较清晰。本文涉及的所有代码地址: teobler/TDD-with-React-hooks-demo前端TDD的痛从进公司前认识了TDD，到实践TDD，过程中自...
2020-02-17 21:28:04
611
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人