前端
文章平均质量分 91
teobler
https://teobler.com
展开
-
从 TDD 到测试策略
前端没法 TDD / 前端不容易做 TDD / 前端 TDD 收益不大。这是进公司后无数人给我判的“死刑”。事实上好像的确如此?原创 2022-02-01 18:55:42 · 622 阅读 · 0 评论 -
别被你的框架框住了
我短暂的职业生涯被 React 充斥着。还没毕业前我从 Vue 2.x 入手开始学习框架,在一个我当时觉得还行现在回看完全不行的状态进了公司。然后开启了跟 React 死磕的状态,从 class 组件到函数式组件,从 Redux 到 Recoil,从 Antd 到 MUI...不久前一个呆了2年多的项目成功结束,接下来要去一个新项目,新项目要用 Angular,于是我开始告别从毕业就开始用的 React,开始学习这个大家少有提及的框架。得回顾这几年,要说 React 带给我最多的是什么,我觉得可能是原创 2021-11-20 10:13:40 · 364 阅读 · 0 评论 -
React 18探秘(上)
React 17 那篇没有任何新特性的博客还历历在目,半年多后,终于等来了 17 铺路许久的 18 发布计划,本来想赶紧看看都有些啥,无奈事情略多,一直拖到现在,最近有点点时间,看看 18 给我们带来了什么。17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥,一通搜索之后得到了一些答案:17 在给未来的 Concurrent Mode 铺路,为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋,一盘包括了 RN / Web / SSR / Server原创 2021-07-08 22:24:49 · 171 阅读 · 0 评论 -
前后端集成没你想的那么难
“本文首发于我的博客,转载请注明出处”网上时不时就能看到一些求助帖,大意是前后端集成所产生的一些争执,其实集成的时候如果能有一些”规范“,这件事情可以很简单。技术栈本文跟技术栈强相关,但是理论上从里面抽离出来的方法论可以实践在任意的技术栈上,只需要投入一点点时间和精力写一个小工具就好了,下面是本文所用到的一些技术栈:ReactTypeScriptSWRaxios后端使用 Swagger 作为API文档@openapi-integration/swr-request-generatorswr-原创 2020-12-10 21:47:42 · 637 阅读 · 0 评论 -
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 · 1932 阅读 · 0 评论 -
(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 · 315 阅读 · 0 评论 -
React Concurrent Mode 之 Suspense 实践
本文首发于我的个人博客: https://teobler.com ,转载请注明出处自从三大框架成型之后,各个框架都为提升开发者的开发效率作出了不少努力,但是看起来技术革新都到了一个瓶颈。除了 React 引入了一次函数式的思想,感觉已经没有当初从DOM时代到数据驱动时代的惊艳感了。于是 React 将精力放在了用户体验上,想让开发者在不过多耗费精力的情况下,用框架自身去提升用户体验。于是在最近的几个版本中,React 引入了一个叫做 Concurrent Mode 的东西,同时还引入了 Suspen.原创 2020-05-16 11:53:14 · 917 阅读 · 0 评论 -
(1)你真的会用Chrome devtool吗?
本文首发于我的个人博客: https://teobler.com ,转载请注明出处这是一个介绍Chrome devtool的系列文章,虽然这是一个前端小伙伴们都很熟悉的东西,但是我相信它的很多还不错的功能其实或许你并不知道,这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。第一篇我们会介绍如何在devtool中做编辑和debug。Editin...原创 2020-03-04 10:37:39 · 213 阅读 · 0 评论 -
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 · 191 阅读 · 0 评论 -
Webpack原理(2) — 加载原理
webpack的核心目的和功能就是打包JavaScript代码,在时间的推进过程中,其逐渐演化成了一个生态体系,成为前端打包代码和处理开发时候必不可少的一个工具。本文首发于我的个人博客: https://teobler.com, 转载请注明出处, 文章中提到的所有源代码来自于https://github.com/thelarkinn/webpack-workshop-2018以下代码位于...原创 2020-02-23 10:23:49 · 212 阅读 · 0 评论 -
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 · 155 阅读 · 0 评论 -
用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 · 598 阅读 · 0 评论