《webapp模块化开发框架scrat_张云龙&关开设&张伟锋&刘洋》由会员分享，可在线阅读，更多相关《webapp模块化开发框架scrat_张云龙&关开设&张伟锋&刘洋（66页珍藏版）》请在金锄头文库上搜索。
1、webapp模块化开发框架 SCRAT模块化开发框架 开发部署过程改进 组件化开发探索 运营平台与模块化开发 工程师的心声 团队现状 20 人的前端工程师队伍20 个项目 2 3个工程师 项目10 个过百万级PV项目众多热点事件专题项目国内国际产品 工程师心声 我们希望能像搭积木一样开发和维护系统 最终通过组装模块得到一个完整的应用 模块化开发 模块是可组合 可分解和更换的单元模块具有一定的独立性将模块所需的js css 图片 模板维护在一起 模块化开发 一个模块一个目录 模块化开发 一个模块一个目录像写nodejs一样写js模块将模板嵌入到js中使用 模块化开发 一个模块一个目录像写node
2、js一样写js模块将模板嵌入到js中css只关心模块内样式css也有依赖关系 模块化开发 一个模块一个目录像写nodejs一样写js模块将模板嵌入到js中css只关心模块内样式css也有依赖关系相对路径引用资源 模块化开发 一个模块一个目录像写nodejs一样写js模块将模板嵌入到js中css只关心模块内样式css也有依赖关系相对路径引用资源引用模块即加载所有资源 模块化开发 一个模块一个目录像写nodejs一样写js模块将模板嵌入到js中css只关心模块内样式css也有依赖关系相对路径引用资源引用模块即加载所有资源 保证模块的 独立性可组装性可更换性 模块化开发 一个模块一个目录像写node
3、js一样写js模块将模板嵌入到js中css只关心模块内样式css也有依赖关系相对路径引用资源引用模块即加载所有资源 以最自然的方式写码 工程师心声 我们希望每次研发新产品不是从零开始 不同团队不同项目之间能有可复用的模块沉淀下来 组件生态 每个项目有工程模块和生态模块生态模块基于component规范开发 部署到Github上可以通过命令行工具将Github上的模块安装到工程中使用 初始项目直接基于已有生态模块 不用从零开始 世界杯项目中有26个 约30 组件来自NBA项目积累 内页项目中31个频道页复用了21个 约50 组件 工程师心声 我们希望写码时不用关心性能优化 但上线后资源请求可以合
4、并 并且按需加载 性能优化 模块声明依赖关系 模块声明依赖关系工具分析依赖关系 性能优化 模块声明依赖关系工具分析依赖关系框架获得依赖关系 性能优化 模块声明依赖关系工具分析依赖关系框架获得依赖关系按需加载所有依赖借助combo服务合并请求 性能优化 模块声明依赖关系工具分析依赖关系框架获得依赖关系按需加载所有依赖借助combo服务合并请求localstorage缓存资源 性能优化 模块声明依赖关系工具分析依赖关系框架获得依赖关系按需加载所有依赖借助combo服务合并请求localstorage缓存资源将小图片内嵌到css中 性能优化 经工具构建后的代码 源代码 模块声明依赖关系工具分析依赖关
5、系框架获得依赖关系按需加载所有依赖借助combo服务合并请求localstorage缓存资源将小图片内嵌到css中自动css雪碧图 性能优化 经工具构建后的雪碧图 源代码 模块声明依赖关系工具分析依赖关系框架获得依赖关系按需加载所有依赖借助combo服务合并请求localstorage缓存资源将小图片内嵌到css中自动css雪碧图 性能优化 以最自然的方式写码以最透明的形式优化 工程师心声 我们希望能在自己的电脑上用最喜欢的IDE写码 并且方便移动设备开发调试 开发利器 内置服务器本地开发预览代理线上数据接口文件监听实时构建多设备自动刷新 真正的前端工程 这就是前端工程师团队的心声 项目地址
6、https github scrat team scrat设计过程 https github fouber issues 2 SCRAT模块化开发框架 开发部署过程改进 组件化开发探索 运营平台与模块化开发 工程师的心声 SCRAT模块化开发框架 开发部署过程改进 组件化开发探索 运营平台与模块化开发 工程师的心声 一个上天台的webapp 首页 头部图片 c index header 导航菜单 c navigator 今日比赛 c gamecard 新闻列表 二级头部 c sh 新闻1 c news text 新闻2 c news text 新闻n c news text 模块描述 JS生成
7、DOM HTML存放script模板 模块加载器 构建工具 传统方式 积木 来了 一个类似Angular但实现了Webcomponents的MVVM轻量级框架 Vue js filters directives data binding components WebComponents的构成 ShadowDOM HTMLTemplatesCustomElements HTMLImports W3CWebcomponentsdrafts ShadowDOM DOM与Style的封装边界 命名空间方式限制CSS的作用范围 样式作用范围 开发效率 代码复用 CustomElements Vue组件生
8、命周期组件注册方式组件的构造方法 HTMLTemplates Vue基于DOM解析方式解析templatesScrat提供 inline 进行粘合 HTMLImports 模块加载器Scrat js实现组件模块的导入 以JS文件作为模块入口require component 工具箱里的积木 是这样的 p 页面组件c UI基本组件d directive模块f filter模块 其它功能模块 vue组件模块 使用组件 小演示 SCRAT模块化开发框架 开发部署过程改进 组件化开发探索 运营平台与模块化开发 工程师的心声 导航运营后台 为运营后台增加功能 为运营后台增加分模块配置页面支持引入条件树
9、支持分条件编写模块HTML拆分为片段 可独立编辑 但是 数据模板耦合 运营直接改代码只支持HTML模块化 样式脚本冗余代码片段化 无法进行版本管理条件分支多 调试困难 问题 开发阶段代码的组织性规范性开发体验 问题 开发阶段代码的组织性规范性开发体验 上线后可用性加载速度内容质量 问题 开发阶段代码的组织性规范性开发体验 上线后可用性加载速度内容质量 运营阶段概念统一技术隔离可视化与傻瓜化 问题 开发阶段代码的组织性规范性开发体验 上线后可用性加载速度内容质量 运营阶段概念统一技术隔离可视化与傻瓜化 组件化需求代码与数据分离组件与业务逻辑的隔离静态资源管理持续集成 设计运营后台组件化规范 在业务概念和技术概念上建立映射 设计运营后台组件化规范 在业务概念和技术概念上建立映射 页面 布局 组件组件 模板 样式 脚本 数据 按照组件化规范进行开发 通过Scrat打通工程链路 线上数据运营 演示 Thanks
