Segmentfault-D-Day

对于 D-Day：这里的 D-Day 不是军事术语，而是开发者（Developer）的抢滩登陆之日！SegmentFault D-Day 全称 SegmentFault Developer Day，是由 SegmentFault 思否发动主办的系列技术沙龙。自 2014 年启动，D-Day 技术沙龙已在北、上、广、深、杭等 10 个城市巡回举办了数十场，波及大前端、技术架构、云计算、大数据、挪动开发等泛滥主题，笼罩数万名开发者。2021 SegmentFault D-Day 强势回归，于 7 月开始相继举办 5 场技术分享，聚焦云原生、大前端、技术架构、开源等畛域。始终以来咱们在技术流传的路线上从未加快步调，在技术分享的品质上也从未放低要求，因而 SegmentFault D-Day 也受到了越来越多开发者的酷爱与必定。 咱们心愿为更多的开发者，在 SegmentFault 思否社区上有更多的播种~ 2021 SegmentFault D-Day 曾经完结，咱们重新整理了 D-Day 的精彩内容，再次与大家分享。以下是 2021 年全年 D-Day 的精彩回顾： SegmentFault D-Day 大前端技术沙龙嘉宾议题介绍：夏温武，阿里巴巴前端技术专家《淘系 web 前端架构开发实际》陆宏鸣，驻云科技技术总监 《如何进行前端性能的观测》郑仁杰，字节跳动前端工程师 《面向未来与浏览器标准的前端 DDD 架构设计》姚尧，葡萄城技术布道师 《前端电子表格技术分享》卡颂，《React技术揭秘》作者 《React 对寰球前端框架倒退的影响》分享回顾：https://ke.segmentfault.com/c...SegmentFault D-Day 后端架构演进之路嘉宾议题介绍：方杨，阿里巴巴技术专家《NOAH-面向业务价值的自适应高可用架构》蒋烁淼，观测云创始人 《SRE工程的落地指南》李能，每日互动股份有限公司（个推）服务端资深技术专家 《个推API网关演进之路》毛雯蓓，网易有道资深开发工程师《自建公有云or私有云 —— 有道少儿团队的云原生实际与思考》周斌杰，蚂蚁团体技术专家《service mesh 落地之后:为 sidecar 注入灵魂》分享回顾：https://ke.segmentfault.com/c...SegmentFault D-Day Online 开源凋谢与新技术创新嘉宾议题介绍：潘杨，观测云产品计划架构师《开源可观测与观测云查询语言比照》马嘉伦，挪动端开发工程师 《浅谈 Flutter 简单状态治理 — 封装一个可扩大的 IM 页面库》张晋涛，干流科技云原生技术专家 《容器镜像构建的原理和最佳实际》分享回顾：https://ke.segmentfault.com/c...SegmentFault D-Day Online 论道云原生与微服务嘉宾议题介绍：马若飞，FreeWheel 首席工程师《FreeWheel的云原生利用实际》刘玉杰，观测云产品计划架构师《第三代微服务技术Istio实操》王英伟，解决方案架构师《云原生全家桶，企业真的须要吗？》方阗，青云科技参谋研发工程师《镜像构建技术 Buildpacks 的原理及在函数计算平台中的落地》分享回顾：https://ke.segmentfault.com/c...SegmentFault D-Day Online 前端前沿技术实际嘉宾议题介绍：范济颖（边城），四川凯路威科技有限公司 软件总工程师《前端技术迁徙实际 - 从 jQuery 到 Vue3》邓昌亮，观测云 资深前端开发工程师《如何优雅的捕捉 web 利用的各种指标数据》陈俊文，腾讯科技有限公司 前端高级工程师《从小众到公众-看Web端如何玩转音视频》姚尧，西安葡萄城软件有限公司 技术布道师《前端电子表格技术利用实际》分享回顾：https://ke.segmentfault.com/c...特地鸣谢最初，特别感谢在 SegmentFault D-Day 中，给咱们分享技术内容的老师们，也感激始终反对咱们的合作伙伴！ ...

SegmentFault D-Day，全称 SegmentFault Developer Day，是由 SegmentFault 发动主办的系列技术沙龙。自 2014 年启动，D-Day 技术沙龙已在北、上、广、深、杭等 10 个城市巡回举办了 19 场，波及前端、云计算、后端、大数据、挪动开发等泛滥主题，流动笼罩数千位开发者。 分享与学习工夫尽管无限，线上流动还在继续进行中...要你参加任意一场流动，将你的学习心得撰写为技术博客，并在 SegmentFault 社区上分享都有机会取得社区精美周边！ 直播分享链接：https://ke.segmentfault.com/c... 如何参加？一、流动规定在思否社区写下你此次学习心得，增加「segmentfault-d-day」标签，并在文章注明超链接： 本文参加了 SegmentFault D-Day 征文，欢送正在浏览的你也退出。二、文章内容写下属于你在 SegmentFault D-Day 后端架构演进之路的学习心得：题目不限，文体不限，语言不限，字数不限，自由发挥。 范例：（前端站学习心得范例）eyea：SegmentFault D-Day 技术沙龙顺手记 三、流动工夫征文截止至 2021-11-30 有什么处分 ？评比规定：会依据文章内容，浏览量，点赞数，评论，综合评分每期流动前十名的优质文章，咱们会送出「思否周边」礼品~ 十分十分有可能收到 思否定制文化衫或者思否吉祥物 思否猫喔 舒适提醒： ① 公布后在此帖上面留言，小姐姐会更快发现你的文章，获奖机会更大。② 思否小姐姐会把优质文章汇总收录并收回，参加征文活动的优质文章内容会被举荐到社区首页及技术交换群，分享给更多的开发者。 扫码下方二维码，增加 SF 思否小姐姐 理解更多流动信息 最终解释权归 SegmentFault 思否所有

敬爱的思否开发者们：受疫情影响，原打算 8 月 21 日举办SegmentFault D-Day 技术沙龙 · 后端架构演进之路（杭州站）流动，将延期至 10 月 30 日举办。曾经报名的小伙伴们，咱们会为您保留名额，没有报名的小伙伴也欢送持续踊跃报名。 舒适提醒： 大家要时刻留神做好集体防护，放弃平安社交间隔。 养成迷信佩戴口罩、勤洗手、常通风、不扎堆、不汇集，少聚餐等良好卫生习惯，提倡衰弱的生存形式。 疫情未完结，防控别放松。 如有问题能够增加小姐姐哦~

前言大前端这个概念很早就曾经进去了，然而大前端是什么，始终没有一个规范的定义。有的说，大前端就是所有前端的统称，比方Android、iOS、web、Watch等，最靠近用户的那一层也就是UI层，将其对立起来，就是大前端。其实我感觉这么说还是少了一点什么，这里表白的更多应该是跨端跨平台的个性。而前端工程化，又是满足跨端跨平台一个十分重要的环节 前端工程化工程化内容前端业务日益复杂化和多元化，从最原始的web PC端业务转变成当初的跨端业务，业务一旦简单，便会呈现一系列问题，包含多人合作、代码品质、我的项目保护、项目风险等等。而前端工程化是应用软件工程的技术和办法来进行前端的开发流程、技术、工具、教训等规范化、标准化，从而进步开发过程中的开发效率，保障前端利用品质。 从 淘系 web 前端架构开发实际 中来看工程化是怎么实现的。 规范化：每个人的技术水平、技术栈、代码格调都是不同的，那么对立标准就是必然踏出的第一步。通过脚手架创立我的项目框架（icejs，基于 React 的渐进式研发框架），统一标准，收敛技术，使开发者开发的代码失去标准，从而确保跨业务，跨团队之间的研发品质和协同效率。开发： 模块化组件化脚手架框架（icejs、ice-scriptes2.x）研发模式降级，同仓库，同依赖，同命令构建： webpackvite部署： 前后端一起部署性能： 缓存策略按需加载首屏渲染速度性能监控在性能中一个重要的环节下面没有提到，那就是性能监控，从 如何进行前端性能的观测 中来学习性能监控的实现。 可观测性三支柱：指标、日志、链路指标：制订指标（性能、错误信息、操作记录），收集指标，联合图表库，将指标数据可视化展现进去日志：采集应用服务和零碎的日志，实现日志的汇聚和剖析链路：平安巡检、云拨测总结前端工程化能够分为五大部分，开发、构建、部署、性能、规范化，每一个模块都很大，能做的事件很多，把工程化做好，进步工作效率，晋升产品质量，让工程化更有意义。以上总结并非很全面，如有不对的中央，敬请指出。 本文参加了 SegmentFault D-Day 征文，欢送正在浏览的你也退出。

写在开始2021.7.31 是个礼拜六，享受双休的日子。但早上闹钟把我喊起来，说有个很重要的线下技术沙龙，就在中关村，必须去啊，哈哈哈~ 中午吃了顿肉肉，而后睡了一个小时 o(╯□╰)o 竭尽全力，毕竟下午有好多新常识要消化。大略13:30时候，拎着电脑就冲向了隔壁微软。 没想到的是，人家CEO也去现场了。有句让我印象很深：'咱们心愿放弃技术的纯正性'。听到这句话，我晓得接下来的技术会比硬广要少一些，是值得听上来的。 我的分享截止目前，现场小伙伴们呐喊的讲师们PPT还没有公开，那我就临时把本人依照议题程序记下的笔记收回来，供小伙伴们参考。 一、淘系 web 前端架构开发实际脚手架框架: 1. 提供规范 2. 技术收收敛Icejs ice-scriptes2.x设计:工程设计: 底层依赖 插件体系 配置文件 对外命令外围 插件机制ESM默认webpack vite；默认webpack: 利用多 社区计划多；两者 比照Webpack 预编译 module f (知乎有个文章介绍) host remote 生产 虚构利用剖析运行时依赖 -> 构建第三方虚构利用 -> 编译 作为hostwebpack5文件缓存的能力工程能力 运行时能力Ssr...研发降级模式 ？同仓库 同依赖 同命令共享src 类型 代码一起开发 一起部署这个稍微有点小悲观的是讲师没到，播放的视频。 二、如何进行前端性能的观测 ### 可观测性指标 日志 链路### 前端指标以及如何采集 1. 性能指标 页面性能 资源性能 LCP 载入速度 <2.5s 4.0s FID 互动性 100ms 300ms CLS 稳定性 0.1 0.25 以及...具体 2. Error信息 network http request console runtime window.onerror 3. 用户操作 action winddow onclick 排除有效aciton(无dom更新、无网络申请)采集 跟上### 观测指标数据可视化分类 图表 查问(DQL) es组件库接入SDK### 零碎的全链路可观测性计划利用性能检测 开源计划 zipkin DDTrace Skywalking jaeger数据链路的关联性场景: 指标库 基础设施日志剖析 利用性能 用户拜访 平安巡检 云观测DataFlux (sass模式)讲的点点很多，基础知识我也跟着回顾了下，挺赞的老师 ...

淘系web前端架构开发实际 插件式六边形架构，提供插件生命周期，插件间通信机制；工程化打包工具可选：webpack、vite、gulp、rollup...； 研发模式降级，同仓库、同依赖、同命令；前后端同构开发，通过midway及hooks函数进行构建，联合serverless进行全链路开发；如何进行前端性能的观测 可观测性：提供监控可视化语料库，数据库抉择、自定义同一查询语言； 链路追踪：OpenTracing标准，调用关系图； 日志剖析：容器日志、利用日志、主机系统日志关联剖析；面向未来与浏览器标准的前端DDD架构设计 前端DDD：组件服务化，分治形象，子域宰割及定义限界上下文，做好防腐，领有更准确的缓存及按需加载粒度； Web Components对接类Single-SPA生命周期；portals作为iframe的代替，能更好的深度定制sandbox； 所有的render实质都是一个appendChild，框架是个围城，应该贴近浏览器原生api的倒退方向才是趋势前端电子表格技术分享 在线表格：单元格基于行模式的稀松矩阵存储，构建计算公式先后的依赖计算链React对寰球前端框架倒退的影响 框架设计：React是一个极致的运行时计划，NG、Svelte、Solid等是极致的编译时计划，Vue介于二者之间，可运可编； React Hooks实质是一种React的ui=F(state)，即ui是一种数据的设计哲学践行，是函数式编程的最佳实际，也更适配Serverless的lambda函数践行 CPU瓶颈：1、提供性能优化API（底层缩小运行时流程）；2、工夫分片，如批处理及startTransition等（缩小用户感知）。IO瓶颈：Suspense，全新SSR