第一周:理解前端发展趋势、课程目标、需求分析和技术架构
第一天:明确课程目标和理解我们要开发的产品需求
如何从30W年薪到达50W年薪?如何从50W年薪到达70W年薪?前端架构的演变:从今天再看组件大厂产研流程介绍需求分析:我们要做什么产品?第二天:细化产品需求和技术架构,讨论前端发展趋势
【核心项目1】组件平台的产品分析和技术架构【核心项目2】轻代码+Serverless产品分析和技术架构【核心项目3】搭建平台部分产品和技术架构【核心项目4】CLI部分产品分析和技术架构【总结】前端工程师如何写好技术方案和绘制架构图?第二周:Typescript实现组件化底层(元数据、数据流管理和组件通信)
第三周:开发搭建平台——智能布局
第一天:攻克体验难点:拖拽、覆盖关系
搭建平台架构分析仿开源库:设计拖拽通用组件Dragable利用Rx+函数节流优化拖拽体验第二天:对齐线、提升流畅度
实现组件的覆盖关系:为组件提供唯一ID核心实现:智能布局解读难点实现:拖拽对齐效果难点实现:函数节流提升性能第四周:开发搭建平台——属性编辑器
第一天:实现智能布局
核心实现:智能布局解读难点实现:智能AI-自动判断生成行列层级第二天:实现属性编辑器
核心实现:属性编辑器的实现解读难点实现:拖拽和属性编辑器联动难点实现:所见即所得的文字编辑难点实现:圈选编辑多个组件的属性第五周:前端架构思想复盘
第一天:常见前端设计模式
装饰器(decorator)模式在前端的应用VirtualDOM的核心算法:diff和reconciliation前端组件的上下文是什么:context/provider/inject架构的核心:Reactive第二天:函数式和架构演变趋势
高阶组件 (HOC)在前端的应用Hooks核心思想前端未来的发展趋势:concurrent mode架构演变:从页面开发到组件开发第六周:开发CLI工具
第一天:基本工具链和功能
CLI解析组件配置文件skedu.ymlyargsCLI命令的解析实现@skedu/cli命令行工具CLI查看用户的组件清单和管理CLI帮助用户检查组件错误CLI提交组件到组件平台编写CLI帮助文档第二天:依赖管理和打包
同时支持React+Vue的组件沙箱的设计思想依赖解析和按需加载能力@skedu/pack依赖解析和离线打包组件第七周:微前端生产流程:实现搭建平台最终效果
第一天:微前端&运行时核心能力
微前端核心沙箱能力:执行隔离和样式隔离组件间通信模式的选择事件的设计基于Topic的组件间通信实现搜索+列表联动的能力第二天:打包和部署
保存编辑好的页面对页面进行打包加载页面并渲染用express.js为页面提供路由第八周:在线代码编辑器和开发3个微服务:用户、组件、轻代码
第一天:微服务架构解读
Egg.js+OSS:文件上传通用能力设计要素:核心域、支撑域和通用域组件上传接口微服务:用户登录和分布式Session共享(Redis)微服务:组件、页面的管理微服务:轻代码管理模块第二天:增加代码编辑器
轻代码对前端的意义是什么?轻代码部分架构CodeMirror实现在线代码输入核心实现:highlight.js实现语法高亮第九周:轻代码和Serverless核心能力
第一天:开发:开放API和SDK
轻代码核心设计解读为轻代码增加上下文(context对象)组件选择器(selector)的设计用轻代码实现表单的提交轻代码实现搜索+瀑布流联动第二天:开发Serverless的CodeRunner
轻代码对前端的意义是什么?code runner:执行node.js函数code runner: 使用数据库和网络隔离:在docker环境中执行函数实现容器池:容器的复用区分测试环境和生产环境第十周:容器编排和Serverless按需扩容&阿里云部署上线
第一天:实现Serverless的运维、部署和扩容
K8s调度Runner配置文件:fn.ymlRunner的监控按需动态调整资源数量通过@skedu/cli提交代码到Serverless第二天:阿里云部署上线
运行时部分的整体设计元数据加载器 Loader运行时组件沙箱:Box运行时布局组件Page/Row/Column数据埋点和监控第十一周:体验优化、监控和数据
第一天:体验优化
移动端优化的N种手段压缩组件体积实现组件的按需加载实现秒开:打开的速度CDN加速service worker优化升级的体验第二天:监控和数据
用K8S编排Node服务前端日志收集策略业务日志:无埋点架构Sentry和错误日志ELK日志收集查看第十二周:前端团队管理&前端工程师晋升技能
第一天:用数据说话
监控关键渲染路径打造前端-产品数据闭环提升500%人效的绩效目标如何实现?如何持续提升前端体验第二天:前端架构师软技能
前端核心价值是什么?论如何出具权威的工作报告如何实现500%的团队提效前端的Hire & Fire前端的Code Review前端绩效考评第三天:面试指导
简历编写思路笔试复习思路面试问答环节