一年一度的GMTC来了，这是专门针对大前端的技术会议，个人认为是目前最有干货的前端相关会议，来自国内各大互联网公司都登台亮相拿出自己的看家本领。最近一年大前端领域迎来了许多新科技、新框架、新理念，这次大会在工程化、Flutter、小程序、架构演进都有很多不错的会议主题。
1 大前端发展趋势
前端路上的思考 - 郑叶飞（圆心）
前端发展史：
- 2003年：基于HTML+CSS+JS的前端工作出现
- 2008年：前端性能得到重视，YSlow、PageSpeed等工具开始使用，Yahoo/Google前端优化军规得到应用落地
- 2013年：三大框架开始流行，node.js全栈开发兴起，前后端分离
- 2014年：移动互联网时代来临，H5/Hybrid/RN/Weex/Flutter等等跨平台解决方案层出不穷
- 2016年：中后台概念，通过配置化、模块化实现中后台少量代码搭建
阿里前端委员会的四大方向：搭建服务，Serverless，智能化，IDE。
筹备中国前端联盟，联合BAT和国内互联网的力量，逐步提升中国互联网在前端领域的影响力，达到能够在世界层面上标准对接、开源共建和信息互通。
前端价值体现在传统的三件套：效率、性能/体验、质量。在现实场景中，前端同学对于整个商业业务层面了解不深入，需要提升商业化思考、数据化思考和产品化能力。展望未来，一定是结合能力与专业才能实现技术创造价值。
大前端的下一站-臧秀涛
2008年7月 Apple 正式发布 App Store，引领了移动互联网时代，产生了Native App、Web App和Hybrid App研发方式。
Vue、React和Angular三大前端框架相互学习，取长补短引领了前端开发范式。
Flutter横空出世，准备一统Native、Web、Desktop、Embedded全端的UI开发。
编程语言百花齐放，Swift 5发布，实现ABI稳定，带来了SwiftUI；Android Kotlin-first战略，50% Android开发者使用；TypeScript大有取代ES6的趋势成为前端主流语言；Dart借助Flutter发力成为增长迅速的开发语言；ES2019蓄势待发。
前端技术领域也在不断扩张，通过Electron可以开发桌面应用，通过WebAssembly可以实现底层语言的结合极大提升运行效率，小程序在微信、百度、支付宝、头条都有落地但各自发展，缺乏标准。
2 Flutter
Flutter最新进展和展望-董韬
Flutter是Google主导开发的一个多平台UI工具包，于2018年12月发布1.0，具备了初步的商用能力。它具有美观、快速、高效、开放的特点，同时支持iOS、Android、Web、Desktop、嵌入式等平台。
Flutter在中国得到大量公司的支持，社区也十分活跃贡献了许多高质量的文章和代码，值得关注。
Flutter for Web：Flutter最近发布了Web版本的技术预览版本，通过特有的Flutter Web Engine使用合适的Web API绘制图片对象：HTML+CSS+Canvas。通过Dart2js Compiler实现了Dart到JS语言的转换，从而实现和浏览器交互的能力。性能上在PC上达到60fps，移动浏览器在低端机器上依旧有较大提升空间。
Flutter for Web依旧处于技术预览阶段，不建议使用在生产环境。
UI as Code：Flutter采用申明式UI编写方法直观的描述UI结构，提供了Editor UI Guides可以按照UI层级来组织编写代码。
Flutter和Dart展望：将来会改进Flutter和原生混编的机制和开发体验，Dart语言增加更多的特性，提升Flutter for Web的性能和可用性，完善桌面UI和交互方式。
闲鱼基于Flutter的架构演进与创新
闲鱼基于Flutter改造了超过20个页面，涵盖音视频、富文本场景，提炼了出一系列的最佳实践并且沉淀开源不少组件。
- Flutter Boost：帮助实现Flutter和Native代码之间混编互动，提供一种Flutter侧open window的能力，补充Native侧页面生命周期感知。
- Fish-Redux：是一个基于 Redux 数据管理的组装式 flutter 应用框架， 它特别适用于构建中大型的复杂应用。它的特点是配置式组装。 一方面我们将一个大的页面，对视图和数据层层拆解为互相独立的 Component|Adapter，上层负责组装，下层负责实现； 另一方面将 Component|Adapter 拆分为 View，Reducer，Effect 等相互独立的上下文无关函数。
- 数据报表+持续集成：通过CD/CI搭建持续集成能力，并且生成数据报表，例如FPS、渲染时长等指标，同时提供完善的异常监控和报警能力。
Flutter在贝壳接入实践-张华峰
贝壳在2018年底开始调研Flutter技术，并且成功在半年内在15+页面中进行落地实践，重点介绍几个技术方案：
接入方案：达到业务分离，平台无关，研发效率，集成无感等优点
热更新方案：Android使用插件化，iOS使用flutter for web
3 性能优化
极限前端性能优化-陈辰
性能优化的四个阶段：
- 无优化：项目初期，用户少
- 通用方案：雅虎军规、请求合并
- 指标：提炼指标，针对白屏、首屏、DNS lookup等进行优化
- 匠心：以用户体验为核心不断提高体验
优化技术细节方面提供涵盖了文本和图像压缩
- 文本压缩：gzip通常达到88%压缩比
- 图像压缩：矢量图和光栅图优化，有损压缩与无损压缩
字节跳动线上性能监控体系的建设-万里鹏
当前研发流程存在的问题：只关注功能实现，测试机型覆盖不全，灰度用户量较少，因此需要健全的线上监控能力。
作者分享了几个提升监控能力的方向:
- 内存监控：当前堆栈并不一定是引起内存问题的原因，监控系统发生OOM、内存触顶时的内存分配
- 卡顿指标：基于FPS，建立卡顿指标，配合慢函数解决卡顿问题，能够定位到形成卡顿的函数调用链
- 缓存监控：由于参与研发人员众多，不可避免导致本地缓存越来越大，监控缓存中存在的大文件、大文件夹和过期文件
- 电量监控：监控多进程，前后台，不同方式的耗电情况
- 异常流量监控：监控不同的业务消耗流量的情况
- 单点监控：⾃研了⼀套基于mmap的⽇志库ALog，通过用户授权可以回传日志，达到可视化的监控用户行为日志
小红书前端性能监控与实践-李季骏
充分借助客户端能⼒，前后端混合渲染⽅案
信息流内容页“闪开”优化总结-庞锦贵
通过一系列优化方案：离线缓存，首屏最小化，webview预创建，数据预加载，NSR预渲染，性能提升了5倍！
Making web apps lightning fast at Microsoft
导致页面加载变慢的原因：大量的JS，大量的CSS，大量的网络请求，目标是达到200kb的js，100kb的css，6个网络请求
Code Splitting：重点介绍了基于webpack实现动态和静态的js文件拆分，解释了webpack内部的实现原理
4 前端工程化&框架
前端工程化-王逸威
云端研发服务：提供稳定、标准、通用的能力
端上研发工具：提供高效、定制、易用的能力
京东购物小程序工程化之路-刘慧敏
京东小程序经历了从早期单一团队到目前多团队共同合作开发的过程，存在代码冗余、性能下降、发布流程繁琐、缺乏自动化测试能力等问题。
模块化之路：对近 100 个公共模块改造为 ES6 Module 并发布至私有仓库
Legos 系统：提供Cli工具、页面管理、包管理、文档管理
Hawaii ⽅案：⼀套基于 Node.js 实现的⽀持复杂关系接⼝依赖的数据聚合解决⽅案
⾃动化测试沙盒：通过模拟微信⼩程序运⾏环境和基础库 API，将⼩程序的运⾏和测试脱离微信环境，从⽽⽅便地对其进⾏⾃动化测试。最后通过拦截setData 接⼝及判断当前⻚⾯路由，对⼩程序运⾏结果进⾏校验
监控与告警：数据上报（js error，接口异常，页面测速），提供实时告警的能力，同时采用红绿灯系统，采用多渠道、可视化的告警形式。
快手游戏直播Web站-工程进化之路-俞天翔
作者结合业务发展，介绍了快手游戏直播web站工程化演进之路，主要分为三个阶段
阶段一：项⽬启动
⽬标：快速上线，关注点：业务场景，技术选型，最终采用组件化开发、前后端分离和SSR的技术方案
阶段二：通过引入GraphQL、多store设计，提升了整体架构设计和模块化能力，同时前后端在数据模型上也进行了很好的隔离区分。
阶段三：开发效率 / 质量：
⽬标：规范流程，提⾼开发效率，加强质量，关注点：开发规范、持续集成，通过Git Flow来规范分支管理，构建持续集成平台，打造DevOps能力
第四阶段：精细化运营
⽬标：数据驱动，关注点：监控，提供指标性监控能力，提供全链路的性能追踪和构建结果追踪。
5 大前端架构演进
蚂蚁金服的前端框架和工程化实践-陈成
强烈推荐：文字稿
包含依赖层、插件层、插件集层、应用类型层和部署模式层，大家可在任何一层都可贡献代码，
可以写一个独立的功能插件，比如和某个服务的对接，比如扩展路由的某个功能，比如实现一套特殊的补丁方案；
可以做归类，把一系列插件整理到一个插件集里，适用于某一类的业务开发；
可以扩展应用类型，比如 SPA、MPA、微前端等等；
可以扩展部署模式，比如和不同的框架或平台做结合；
腾讯课堂大前端架构演进历程解析-晏家红
作者结合腾讯课堂的客户端研发的经历，为了实现快速迭代、多端复用、代码质量等目标，介绍了客户端App的架构演进过程
组件化：抽象业务模块和基础模块，引入cocoapods进行模块管理
-
动态化：经历了native模板、Hybrid、RN、自研跨端Plato框架、Flutter的过程
-
中台化：上云和服务平台化
-
工厂化：最终期望能够实现App工厂化，实现快速、高效的开发App
基于 Serverless 的淘宝前端研发模式升级-七念
Q1：我们为什么要进行前端研发模式升级？
Answer：前端需要更多参与业务交付中，获得更大空间；需要跨栈技术进一步提升研发效率。同时，不希望引入太多额外成本。
Q2：Why Serverless？
Answer: 通过引入Serverless，让轻量化的业务服务端研发能力成为可能，降低前端参与业务交付的门槛。
Q3：淘宝如何利用Serverless进行架构升级？
Q4：下一步怎么搞？
Answer：函数运行时和框架的标准化、极速启动，高可用保障，前端研发平台
有兴趣同学可以关注微信公众号奶爸码农：
