全部前端后端产品开发者客栈测试设计运维
最新 最热 官方 加精

Qbian | 3周前 | 开发者客栈

TODO(待办)新功能上线啦 !!! 🎉🎉🎉

地址:[https://www.developers.pub/todo/doing](https://www.developers.pub/todo/doing) 使用场景 生活中 帮忙取快递提醒:下班路过小区快递点,帮家人取个快递,家人可以分配个任务给你,在你快到家的时间定时提醒不要忘记; 重要日期提醒:生活中重要的时刻(生日、纪念日等),可以提前创建好任务,做好定时提醒别错过; 待办事项提醒:生活中看到的一些好看的电影,记录下来周末找个完整的时间刷一刷; 记录想法:生活中随时冒出来的一些奇思妙想,可能过会就会忘掉,可以快速记录下来,事后回顾; 工作中 自动生成日报并推送:工作中每天都需要写日报,可以把当天的工作罗列出来,当天工作内容更明确,效率更高,下班点还会自动生成并推送日报; 自动生成周报并推送:工作中每周都需要写周报,本周完成的工作,在本周结束后,自动生成周报并推送,高效快捷,还不会遗忘; 工作内容定期回顾总结:自定义时间范围,项目标签等统计任务,做工作复盘总结,不断反思进步; 功能列表 个人使

 629 |  6 |  5 开发者客栈

Qbian | 23小时前 | 产品相关

(原则)如何定义B端产品的MVP(上)

MVP是Minimum Viable Product的缩写,意思是最小可行产品.最近几年在移动互联网时代,在TO C产品研发以及推向市场的时候,这个概念很是盛行。说说比较有名的二个例子: 一个例子是Zappos,创始人Nick为了证实人们有网上购买鞋子需求的想法,在一开始先到当地的专柜去拍鞋子的照片放到网上,如果有人下了单,他就跑去店里购买。这样,他一开始并没有仓储的压力,也不需要投入成本去搭建一个真正的电商平台。2009年Zappos被Amazon以12亿美元的价格收购。  还有一个例子就是Dropbox, 刚开始创始人也不知道Dropbox是不是被大家所需要,所以先拍了一个视频,视频主要是演示Dropbox所能解决的痛点以及使用场景,之后把视频放到Youtube上面,很多网友通过视频来到Dropbox网站留言表示了强烈的使用意愿,也正是这2分多钟的视频为Dropbox带来了上千万的用户。 大家看了这二个例子,是否发现了一个问题,C端产...

 14 |  0 |  0 产品相关

客栈小K | 1天前 | JavaScript前端相关浏览器小程序

阿里跨端技术演进中的实践与思考_前端

2020 年 12 月,QCon 全球软件大会 2020·上海站上阿里巴巴张舒迪(圣司)分享了《阿里跨端技术演进中的实践与思考》,他从跨端技术背景及演进历程、阿里跨端业务现状及思考、跨端技术方向思路演进以及对跨端技术未来展望这四个方面进行了深入的分析,从实践出发为跨端技术开发者带来更多思考方向。本文根据此次分享整理。

 26 |  0 |  0 JavaScript前端相关

客栈小K | 2天前 | 代码实现前端相关

如何做前端单元测试

这是第 125 篇不掺水的原创,想获取更多原创好文,请搜索公众号关注我们吧 本文首发于政采云前端博客:[如何做前端单元测试](https://zoo.team/article/unit-testing) 如何做前端单元测试 对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例,让你掌握写单元测试实践能力。 前端为什么需要单元测试? ------------------------ 1. 必要性:JavaScript 缺少类型检查,编译期间无法

 33 |  1 |  0 代码实现前端相关

客栈小K | 3天前 | 前端相关ES6浏览器

Tree-Shaking性能优化实践 - 实践篇

上一篇文章 [Tree-Shaking性能优化实践 原理篇](https://zhuanlan.zhihu.com/p/32554436) 介绍了 tree-shaking 的原理,本文主要介绍 tree-shaking 的实践 [](https://zhuanlan.zhihu.com/p/32554436) 三. tree-shaking实践 -------------------- webpack2 发布,宣布支持tree-shaking,webpack 3发布,支持作用域提升,生成的bundle文件更小。 再没有升级webpack之前,增幻想我们的性能又要大幅提升了,对升级充满了期待。实际上事实是这样的 升级完之后,bundle文件大小并没有大幅减少,当时有较大的心理落差,然后去研究了为什么效果

 44 |  0 |  0 前端相关ES6

客栈小K | 3天前 | 打包工具前端相关ES6

Tree-Shaking性能优化实践 - 原理篇

一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。具体来说,在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。 图1 Tree-shaking 较早由 Ri...

 37 |  0 |  0 打包工具前端相关

客栈小K | 4天前 | React前端相关

React 框架 | 深入剖析 Scheduler 原理

关键词:react react-scheduler scheduler 时间切片 任务调度 workLoop 背景 本文所有关于 React 源码的讨论,基于 React v17.0.2 版本。 文章背景 工作中一直有在用 React 相关的技术栈,但却一直没有花时间好好思考一下其底层的运行逻辑,碰巧身边的小伙伴们也有类似的打算,所以决定组团卷一波,对 React 本身探个究竟。 本文是基于众多的源码分析文章,加入自己的理解,然后输出的一篇知识梳理。如果你也感兴趣,建议多看看参考资料中的诸多引用文章,相信你也会有不一样的收获。 本文不会详细说明 React 中 react-reconciler 、 react-dom 、fiber 、dom diff、lane 等知识,仅针对 scheduler 这一细节进行剖析。 知识点背景 在我尝试理解 React 中 Scheduler 模块的过程中,发现有很多概念理解起来比较绕,也是在不断问自己为什么的过程中,发现如果自顶向下的先有一些基本的认知,再深入理解 Scheduler 在 Reac...

 49 |  0 |  0 React前端相关

Qbian | 1周前 | 后端相关Java

破解遗留系统重构问题的 6 步心法

本文由极客时间整理自 Thoughtworks DTO Advisory 黄俊彬在 [QCon+ 案例研习社](https://link.zhihu.com/?target=https%3A//time.geekbang.org/qconplus/home)的演讲[《MV\ 模式重构演进》](https://link.zhihu.com/?target=https%3A//time.geekbang.org/qconplus/detail/100110437) 你好,我是 Thoughtworks 团队的技术教练黄俊彬,目前主要在智能硬件、通讯互联网、金融等领域企业提供敏捷转型、系统架构改造以及大型遗留系统重构等服务。今天给你分享的话题是 MV 模式的重构演进。 我会从以下四个部分来分享,第一部分给大家分享遗留系统典型特征,介绍这类系统的特征以及对团队的影响。第二部分是 MV\ 模式重构的策略,针对这类系统里面的一些特征,我们有哪些重构的...

 100 |  1 |  0 后端相关Java

Qbian | 1周前 | Go操作系统后端相关

当谈论协程时,我们在谈论什么

作者:watsonliu,腾讯 WXG 应用开发工程师 「什么是协程?」几乎是现在面试的必考题。一方面,Donald E. Knuth 说「子过程是协程的一种特殊表现形式」;另一方面,由于 coroutine 的中文翻译「协程」中包含有「程」字,因此一般会拿来与「进程」、「线程」进行比较,称为「轻量级线程」。 第一部分介绍协程的历史; 第二部分主要是介绍函数调用和协作式多任务处理,虽然其他介绍协程的文章中也都讲解了函数调用,在本文中,我在构思如何进行分享时,特意使用汇编来实现函数调用 (汇编实现 main 调用 hello ),为后面实现简单的协程库做好铺垫,而这正是理解协程切换的关键,推荐大家阅读; 第三部在实现了一个简单的协程库后,通过对比来加深理解,然后介绍 libco hook 的实现; 第四部分介绍使用协程时需要注意的一些问题。 在本文中,我将试着去回答以下四个问题: Q1 (Why): 为什么需要协程? 我们会一起回顾协程出现的历史背景,当时要解决什么问题;同时,现在是什么场景,需要使用协程来进行处...

 76 |  2 |  0 Go操作系统

客栈小K | 1周前 | 前端相关

Taro v3.6 代号为「Reach」,已发布 canary 版本

近期我们确定了 v3.6 版本的代号「Reach」,并发布了 v3.6-canary 版本,多个新特性在该版本内开放给社区各位开发者体验,欢迎大家试用并在社区中反馈相关问题。 一、支持路由库 Taro 3 适配前端 UI 框架的方式更接近于前端的本质,通过在小程序端模拟实现框架所需的 BOM/DOM API 来达成,对于适配各个路由库也是同样的思路。 1\. 运行时引入 History & Location 对象 在 Web BOM 中,History & Location 对象是重要组成部分,它们是实现前端路由的关键。Taro 为了支持前端路由库的使用,在运行时中引入了 histroy location 对象的实现,且尽可能与 Web 端规范对齐,你可以在 window 对象上访问到 history 和 location 对象。同时,也支持监听 hashchange 和 popstate ...

 51 |  1 |  1 前端相关

他在笑_1 | 1周前 | JavaScriptVue

导航条根据滚动条方向显示淡入淡出效果

目的 这个代码主要实现了:Nav导航条根据滚动条方向显示淡入淡出效果。 Nav的定位是 fixed ,向下滚动导航条隐藏,向上滚动导航条出现。 代码 js <template <div id="demo" <!- 淡入淡出动画 - <transition name="fade" <!- 导航条 - <div v-show="show" 内容省略 </div </transition </template <script export default { mounted() { //开始------------------------------------ let oldTop = 0; //旧数据,初始为0 // 将自定义方法绑定到窗口滚动条事件 window.onscroll = () = { let top = document.scrollingElement.scrollTop; //触发滚动条

 78 |  1 |  4 JavaScriptVue

Qbian | 2周前 | 测试相关系统压力测试

字节跳动全链路压测(Rhino)的实践

1. 背景 随着公司业务的不断扩张,用户流量在不断提升,研发体系的规模和复杂性也随之增加。线上服务的稳定性也越来越重要,服务性能问题,以及容量问题也越发明显。 因此有必要搭建一个有效压测系统,提供安全、高效、真实的线上全链路压测服务,为线上服务保驾护航。 关于全链路压测的建设,业界已经有了非常多文章,但是涉及到具体的技术实现方面,却很少介绍。本文想通过梳理全链路压测系统从设计到落地的整个实践过程,来详细介绍全链路压测系统具体是如何设计,以及如何落地的。希望能从技术落地实践的角度,给同行业的同学一些参考和启发。 2\. 解决方案 2.1 业内实践 ------------ 全链路压测在业内已经有了广泛的实践,如阿里的 Amazon、PTS\[1\]\[2\],美团的 Quake\[3\]\[4\],京东的的 ForceBOT\[5\],高德的 TestPG\[6\]等等,都为我们提供丰富的实践经验,和大量优秀的技术方案。我们广泛吸收了各大互联网公司的全链路压测建设经验,并基于字节跳动业务需求,设计开发了一个全链路压测系统 Rhino。 2.1 架构图 ------...

 135 |  0 |  1 测试相关系统压力测试

客栈小K | 2周前 | 前端相关

探秘前端 CRDT 实时协作库 Yjs 工程实现

作为近年来分布式系统领域算法研究的新成果,[CRDT](https://link.juejin.cn/?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FConflict-free_replicated_data_type "https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type") 基础库为前端应用带来了奇妙的可能性: 只需要一个 API 与 backbone 几乎一样简单的 model 层,你的应用就能自然地获得对多人协作场景下并发更新的支持 。这背后隐藏着怎样的黑魔法呢?本文希望以当下代表前端 CRDT 库性能巅峰的 [Yjs](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fyjs%2Fyjs "https://github.com/yjs/yjs") 为例,向大家直观地展示 _how CRDT works_。 ![yjs_perf4-svg.png](https://static.de...

 104 |  1 |  0 前端相关

客栈小K | 2周前 | 前端相关

我是如何带领团队从零到一建立前端规范的?🎉🎉🎉

前言 不以规矩,不能成方圆。 本人有幸经历了团队 从缺乏标准到逐渐规范 的一个过程,在此当做记录供大家参考。 本文从 为什么需要规范 以及 建立规范的重要性 出发,逐步引申出如何去建立适合自己团队的规范,详细讨论了前端具体涉及到的规范都有哪些,部分小节有具体的配置步骤和操作链接。 文中涉及到的所有配置均放在github上的 [Demo](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FnoBaldAaa%2Fmy-hooks "https://github.com/noBaldAaa/my-hooks") 中,觉得不错的点个赞 ❤️❤️❤️。 下面我们开始吧🏃。 为什么需要规范 -------------- 规范能给我们带来什么好处,如果没有规范会造成什么后果?这里主要拿代码规范来说。 统一代码规范的好处: 1. 提高代码整体的 可读性、可维护性、可复用性、可移植性和可靠性 ,这会从根本上 降低开发成本 ,也是最重要的一点。 2. 保证代码的一致性:软件系统中最重要的因素之一就是...

 112 |  2 |  0 前端相关

客栈小K | 2周前 | 打包工具前端相关浏览器

前端工程化基石 -- AST(抽象语法树)以及AST的广泛应用🔥

一、前言 -------- 本文是 [从零到亿系统性的建立前端构建知识体系✨](https://juejin.cn/post/7145855619096903717 "https://juejin.cn/post/7145855619096903717") 中的第三篇,整体难度 ⭐️⭐️⭐️。 在本文中我们将会深挖 AST(抽象语法树) 以及基于 AST 衍生出来的一系列实际应用。读完本章你会收获什么: AST(抽象语法树) 到底是什么? AST基础:从零到一手撸一个功能完备的编译器 AST基础:[Babel](https://link.juejin.cn/?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2F "https://babeljs.io/docs/en/") 的设计理念 AST的应用:手写console插件,再也不怕打开控制台满屏的console了😭😭😭 AST的应用: [ES6](https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3...

 87 |  0 |  0 打包工具前端相关

客栈小K | 2周前 | JavaScript前端相关浏览器

看了Quark Design后,我去深入了解了Web Components

1写在前面 --------- 最近哈啰单车前端团队开源的Quark Design组件库,号称是下一代前端组件库,可以同事在任意框架或无框架中使用。 那么,什么是Web Components? 2什么是Web Components? ----------------------- 现今前端生态中框架层出不穷,在生产中为了提升效率和标准化组件,就会针对框架开发组件库。但是各种框架之间是不兼容的,对此需要对应开发适应框架的组件库,这样也造成维护成本攀升。就如同物理界有电磁相互作用、强相互作用以及弱相互作用,需要单独的物理理论来解释这三种作用造成的物理现象,这样让众多物理学家在朝着 大统一理论 前进,而 Web Components 可以看作是现今UI组件库"大统一理论"的一种解决方案。 Web Components 与 React、Vue 等框架中的组件类似,其实在Vue中也采用了很多基于 Web Components 的设计。这...

 92 |  0 |  0 JavaScript前端相关

他在笑_1 | 2周前 | RedisJava

Redis "高级"应用场景 -- 限流、延时队列、幂等处理

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 6 天,[点击查看活动详情][Link 1] 🍳引言 自Redis入门篇过后,已经好久没更Redis了,接下来应该从实战篇,原理篇,面试篇几个层次来展开,本篇主要是实战篇环节,以问题展开,应对面试场景作答【melo称其为"手撕面答"】,尽量简短,某些部分可能不会进行详细介绍。 emmm,但后边有些部分还是干脆整合在一起了,可观性好一点,不至于看得一头雾水 🎨本篇脑图速览 🎯🎈Redis限流是怎么做的? 固定窗口计数 固定窗口计数是指,假设我们的限流规则是:1min内最多只能访问10次,那么固定窗口就是固定了【 1min-2min】这个窗口内,只能有10次访问 ,相应的我们就要给这个窗口维护一个计数器。 为了节省空间,其实我们不需要维护一个个窗口,只需要维护当前访问时间所在的窗口即可,以及对应的计数...

 129 |  3 |  0 RedisJava

客栈小K | 2周前 | 前端相关Vue

shallowReactive和shallowRef

reactive用来包装一个对象,使其每个对象属性都具有响应性,但是这个包装过程是递归调用的,如果包装的对象有过多属性而又不需要设置相应,无疑是性能浪费 针对这种情况vue设置了 shallowReactive shallowRef 两个方法来包装响应式数据,通过该方法包装的数据只有第一层具有响应性 shallowReactive = 和 reactive 一样,该方法只能把对象或数组包装为响应式对象 js <template <div class="about" {{ test }} <button @click="change" change</button </div </template <script setup const test = shallowReactive({ a: { b: "b", }, }); function change() { test.a.b = "new"; console.log(te

 68 |  0 |  0 前端相关Vue

客栈小K | 2周前 | 前端相关

如何避免写重复代码:善用抽象和组合

通过抽象和组合,我们可以编写出更加简洁、易于理解和稳定的代码;类似于金字塔的建筑过程,我们总是可以在一层抽象之上再叠加一层,从而达到自己的目标。但是在日常的开发工作中,我们如何进行实践呢?本文将以笔者在Akka项目中的一段社区贡献作为引子分享笔者的一点心得。 场景 通常,为了简化我们对数据流的处理,我们可能会使用 Java8 中首次引入的 Stream 、或者是 Kotlin、Scala 等编程语言中提供的更加丰富的集合库,亦或者使用反应式流的相关三方库来简化工作。虽然这些类库已经提供了丰富的操作符,但是我们依然会工作中遇到其对某些场景未提供合适操作符的情况。比如: 1. 在直播场景下,需要对某些类型的消息进行缓冲和聚合,一段时间内的多个点赞合并为1个点赞,并且在处理了 N 个消息的时候进行整体发送,保障整体的扩散量级维持在一个平稳的水平。 2. 在 IOT 场景中,接收来自终端设备上报的数据,并返回当前的数据和前值,或者最近 3个值,从而计算其中的变化趋势。此时我们可能会使用反应式流库中提供的: zipWithNext 、 zipWithPrevious 、 zi

 73 |  0 |  0 前端相关

客栈小K | 2周前 | 前端相关

前端架构师的一些思考和总结

大淘宝技术前端工程师梧忌推荐语:有幸在大淘宝与洋风同学共事了一段时间。他在终端架构侧有丰富的经验,他所打造的终端调试工具 AppDevTools 、终端请求库 mtop.js 在阿里内部被广泛使用。洋风从自己的经验出发,在这篇文章中讲述了前端架构师的工作范畴和如何做好前端架构,相信对于期望往该方向成长的同学会有所帮助。 加入大淘宝到现在也有六年多了,一路走来很开心可以一直做技术。负责过业务、基础库、工具以及架构,期望自己不断成长。想对之前的工作做一些思考和记录,也想为后续的工作找一个合适的开始。有蛮多话想说的,这次就先从 “前端架构” 这个话题慢慢说起吧。 聊聊架构 好的代码和差的代码都能运行,但我们会追求好的代码,获得更好的维护性和可读性。同理没有架构的系统也能工作,但如果一个业务团队没有好的架构,整个团队将陷入混乱,最终难以支撑业务快速变化。 架构是为了解决问题,将复杂、模糊的问题,变得清晰、有逻辑。问题的尺度上,可以大到整个公司的系统设计,也可以小到一个模块如何渲染。问题的时间上,可以是当下的问题,也可以是预期以后会发生的问题。如何做好结构和如何解决好问题

 87 |  0 |  0 前端相关