前端发展历程

过去的开发方式

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)

还原犯罪现场！

前端性能监控平台

前端功能测试

欢迎转岗我们FE！

我们有强大的技术栈！

美女很多！帅哥也很少！