前端发展历程
&
丁丁前端架构历程
前端发展历程
过去的开发方式
jQuery拯救全世界！
现在的前端！
语言进化
面向对象
编程
class Parent {
constructor() {
super();
this.id = 1;
}
getId: function () {
return this.id;
}
}类切面
编程
// old feature
function test () {
let result;
async(id, function (id) {
result = id;
return result;
})
console.log(result)
}
// ES6 feature
function * test () {
let asyncResult = yield asyncFunc();
return asyncResult
}工程进化
自动化任务管理
快速脚架搭建
所谓大前端？
丁丁前端架构历程
3个月前...
+
简单粗暴
现在的丁丁前端？
蓝莲花时的框架
SPA
+
ReactJs
+
+
1. 前端模板渲染
2. 前端通过URL Hash做路由转发
3. 开发者只需要专注于业务开发
4. 后端只需要提供原子级的API
Developmemnt
开发 + mockService
+
专注于业务
动态编译
实时更新
vs
Bundler Tools
mockService: data mock
http-proxy: data proxy
Production
Bundle all in one file!
以上架构更适用于内部系统
首次加载速度巨慢
各种跨域
SEO
面向C端，我们不能这么玩
新前端架构
Turbo
双端同构
Controller 前后分明
更为强大的自动化
文件变化浏览器自动刷新！
自动编译变化文件
动态监测语法错误
ES6 解决callback hell
整体架构
技术选型的思考
架构 = 妥协 + 创新
带来的挑战
更多关注线上服务状态
线上异常监控
内存泄露
...
PM2
node 进程管理工具
我们将来会做的事
前端错误异常采集(Sentry)
还原犯罪现场！