自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

原创 重新思考 React 项目架构

在开始聊之前,我想定义一下架构的概念。大部分小伙伴都会问一个问题:“前端能有啥架构,不就是文件放到哪个文件夹吗?”对,但也不对,所以我们需要对齐认知:到底什么是架构?在开始之前,我希望你将视野从前端这个点扩展开,站在你正在参与开发的整个系统来思考这个问题。然后我们先来看看一个相对权威的对架构的定义是什么样的:“Architecture is the fundamental organization of a system embodied in its components, their

2022-10-17 13:44:33 508 1

原创 从 TDD 到测试策略

前端没法 TDD / 前端不容易做 TDD / 前端 TDD 收益不大。这是进公司后无数人给我判的“死刑”。事实上好像的确如此?

2022-02-01 18:55:42 631

原创 别被你的框架框住了

我短暂的职业生涯被 React 充斥着。还没毕业前我从 Vue 2.x 入手开始学习框架,在一个我当时觉得还行现在回看完全不行的状态进了公司。然后开启了跟 React 死磕的状态,从 class 组件到函数式组件,从 Redux 到 Recoil,从 Antd 到 MUI...不久前一个呆了2年多的项目成功结束,接下来要去一个新项目,新项目要用 Angular,于是我开始告别从毕业就开始用的 React,开始学习这个大家少有提及的框架。得回顾这几年,要说 React 带给我最多的是什么,我觉得可能是

2021-11-20 10:13:40 372

原创 React 18探秘(上)

React 17 那篇没有任何新特性的博客还历历在目,半年多后,终于等来了 17 铺路许久的 18 发布计划,本来想赶紧看看都有些啥,无奈事情略多,一直拖到现在,最近有点点时间,看看 18 给我们带来了什么。17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥,一通搜索之后得到了一些答案:17 在给未来的 Concurrent Mode 铺路,为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋,一盘包括了 RN / Web / SSR / Server

2021-07-08 22:24:49 181

原创 软件匠艺

敏捷的宿醉从敏捷宣言发布,敏捷如同在雪山顶滚下的一个小雪球,迅速发展并很快席卷了整个软件业。但是如同传话游戏那样,最初的敏捷思想被扭曲和简化,最终到管理者耳朵里变成了是承诺可以更快交付软件的一个流程。于是浩浩荡荡的敏捷转型开始了,但是一种文化并不容易转型到另一种文化,于是一个岗位出现了巨大的缺口:敏捷教练。令人遗憾的是,许多既没有业务经验也没有技术经验的敏捷教练,在经过短短几天的培训获得认证后就开始辅导各个公司的管理者,并且告诉开发团队该去做什么。他们告诉管理者:工程部分很简单,只要我们搞定了流程,工

2021-03-16 13:08:43 235

原创 敏捷业务实践之计划游戏

敏捷发展至今已经有无数分支,这些分支的发展有些是为了应对不同项目增删改了一些实践和规则,使得敏捷能够应用在一些特殊的项目上。而另一些则是一些人想接敏捷之手宣传自己的思想与实践,强行在敏捷中加入了自己的想法。这些原因使得如今的敏捷五花八门,甚至出现两人在谈论完全不一样的敏捷。在接下来的文章中,所有敏捷实践将会使用极限编程来作为例子。这是因为在所有敏捷过程中,极限编程是定义最完整且最不混乱的。可以说其他的敏捷过程都是极限编程的子集或变体。极限编程是敏捷本质核心的原型,也是最好的代表。生命之环[外链图片转存

2021-02-07 21:21:25 565

原创 到底什么是敏捷

从加入公司到现在快三年,从进入公司的那一刻开始实践敏捷,但是说起来惭愧,如果你问我敏捷是什么,我好像不能给出一个专业的回答。由此我开始探索敏捷的过去现在和未来,然后我发现了Bob大叔的新书 Clean Agile: Back to Basics。从敏捷诞生以来,它被赋予了太多东西,诚然有些东西很好地发扬了敏捷,但是很多东西可以说是蹭热度强行加上去的,只是为了让大家认识敏捷的同时学习自己的”私货“。这本书如同它的翻译一般,是为了正本清源,澄清大家对敏捷的误解和混淆,重述敏捷最初的用意。一切要从一个对后世影

2021-02-02 14:14:56 863

原创 前后端集成没你想的那么难

“本文首发于我的博客,转载请注明出处”网上时不时就能看到一些求助帖,大意是前后端集成所产生的一些争执,其实集成的时候如果能有一些”规范“,这件事情可以很简单。技术栈本文跟技术栈强相关,但是理论上从里面抽离出来的方法论可以实践在任意的技术栈上,只需要投入一点点时间和精力写一个小工具就好了,下面是本文所用到的一些技术栈: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 1944

原创 (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 323

原创 React Concurrent Mode 之 Suspense 实践

本文首发于我的个人博客: https://teobler.com ,转载请注明出处自从三大框架成型之后,各个框架都为提升开发者的开发效率作出了不少努力,但是看起来技术革新都到了一个瓶颈。除了 React 引入了一次函数式的思想,感觉已经没有当初从DOM时代到数据驱动时代的惊艳感了。于是 React 将精力放在了用户体验上,想让开发者在不过多耗费精力的情况下,用框架自身去提升用户体验。于是在最近的几个版本中,React 引入了一个叫做 Concurrent Mode 的东西,同时还引入了 Suspen.

2020-05-16 11:53:14 931

原创 (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 219

原创 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 610

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除