UC前端工程实践.pdf

WEBAPP模块化开发框架 SCRAT模块化开发框架 ⼯程师的⼼声 组件化开发探索 项⺫发布过程改进 运营平台与模块化开发 团队现状 • 20+⼈的前端⼯程师队伍 • 20+个项⺫，2-3个⼯程师/项⺫ • 10+个过百万级PV项⺫ • 众多热点事件专题项⺫ • 国内国际产品 “我们希望能像搭积⽊⼀样开发和维护系统，最 终通过组装模块得到⼀个完整的应⽤。” –⼯程师⼼声 模块化开发 • 模块是可组合、可分 解和更换的单元 • 模块具有⼀定的独⽴ 性 • 将模块所需的js 、css、 图⽚、模板维护在⼀ 起 模块化开发 • ⼀个模块⼀个⺫录 模块化开发 模板代码 • ⼀个模块⼀个⺫录 • 像写nodejs⼀样写js模块 JS模块代码 • 将模板嵌⼊到js 中使⽤ 模块化开发 模板代码 • ⼀个模块⼀个⺫录 CSS模块代码 • 像写nodejs⼀样写js模块 • 将模板嵌⼊到js 中 • css只关⼼模块内样式 • css也有依赖关系 模块化开发 CSS模块代码 • ⼀个模块⼀个⺫录 • 像写nodejs⼀样写js模块 • 将模板嵌⼊到js 中 • css只关⼼模块内样式 • css也有依赖关系 • 相对路径引⽤资源 模块化开发 • ⼀个模块⼀个⺫录 • 像写nodejs⼀样写js模块 ⻚⾯代码 • 将模板嵌⼊到js 中 • css只关⼼模块内样式 • css也有依赖关系 • 相对路径引⽤资源 • 引⽤模块即加载所有资源 模块化开发 • ⼀个模块⼀个⺫录 • 像写nodejs⼀样写js模块 • 将模板嵌⼊到js 中 保证模块的 • css只关⼼模块内样式 独⽴性 可组