2021大前端技术储备

雨点打透心脏的1/2处 2022-12-31 14:24 117阅读 0赞

![image-20201229101050657][]

## GMTC ##

[GMTC][]全球大[前端][Link 1]技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会，关注前端、移动、AI应用等多个技术领域，促进全球技术交流，推动国内技术升级。GMTC为期4天，包括两天的会议和两天的培训课，主要面向各行业前端、移动开发、AI技术感兴趣的中高端技术人员，大会聚焦前沿技术及实践经验，旨在帮助参会者了解大前端&移动开发领域的技术趋势与实践案例。

## GMTC技术演变 ##

### 2016全球移动技术大会 ###

大会主题

*  动态化
 *  swift
 *  新技术实践RN
 *  客户端性能优化
 *  应用架构
 *  VR/AR开发
 *  架构演进
 *  移动解决⽅案

### 2017全球移动技术大会(智能时代的大前端) ###

大会主题

*  动态化
 *  性能优化
 *  VR/ AR
 *  移动AI
 *  解决⽅案
 *  移动架构
 *  移动web优化
 *  web框架实践
 *  ⼤前端
 *  ⼯程化
 *  质量保证

### 2018全球⼤前端技术⼤会 ###

大会主题

*  客户端新技术专场
 *  性能优化与监控
 *  解决⽅案
 *  终端AI
 *  PWA专场
 *  UI与动画
 *  web框架专场
 *  跨平台专场
 *  ⼯程化
 *  Node专场
 *  编程语⾔

### 2019全球⼤前端技术⼤会 ###

大会主题

*  性能优化与监控
 *  UI与图形渲染
 *  质量保证
 *  移动AI
 *  架构演进
 *  跨平台技术Flutter
 *  编程语⾔ts
 *  前端框架
 *  前端⼯程化
 *  Node实战
 *  未来移动技术
 *  小程序
 *  前端团队管理

### 2020全球前端技术大会 ###

大会主题

**Flutter 实战**

Flutter 作为革命性的跨终端解决方案，一经推出就获得了广泛关注。新的一年，Flutter 在原有的工程效率和体验侧有什么新的变化？在业务对用户增长和游戏化诉求强烈的今天，Flutter 带来的想象力是什么？Flutter 未来的机会和挑战是什么？

**小程序实战与优化**

随着各大平台小程序的快速放量，开发者遇到越来越多的平台适配问题。各平台小程序的性能优化方法也各不相同。本专场将邀请一线的技术专家为各位带来跨平台小程序框架实现原理，跨平台小程序实战中的一些挑战，以及小程序性能优化的实践案例等等。

**编程语言**

从编程语言方面看，在前端开发领域，JavaScript 一直是当之无愧的王者；在移动开发领域，Objective-C 和 Java 又分别统治着 iOS 和 Android 阵营。最近几年，很多新的语言凭借更现代的语言特性、更高的开发效率，以及背后大厂的支持，应用也越来越广泛。

**跨端框架演进**

Angular、Vue 和 React，前端框架从最初的仅限于 Web 的开发场景逐渐向多端研发开始演进。从最初 Angular 采用的“脏检查” UI 更新方式，到 Vue 3.0 基于 Proxy 的启发式 UI 更新策略。前端框架的底层技术随着标准的不断发展也在不断地进行着创新。

**大前端中台化演进**

伴随着 TOB 场景越来越多，传统的前后端分离的研发模式已经不再满足需求，微“前端”服务的“中台”的作用愈加明显。我们把业务、行业共同点提升到中台完成，成为“大中台、小前端”，能最大程度复用、解耦业务、满足业务敏捷扩展。

**前端安全生产**

随着前端专业技术的发展，前端研发在整个 Web 应用研发工程链路上扮演着越来越重要的角色，前端安全生产的责任也随之放大，在前端应用开发、发布、线上运行的不同阶段，如何让前端工程师产出的代码更加靠谱，不带着问题发布，线上发现前端故障后也能及时止血？

**端侧AI**

人工智能发展已进入“落地为王”阶段，端侧 AI 相比云侧 AI，具有低延时、保护数据隐私、节省云端计算资源等优势，现已成为端侧技术新热点，并且紧贴用户在 AR 特效、搜索推荐等有诸多创新应用。

**Node 实战**

随着大前端的发展，Node.js 也已经发布到 v13，其应用场景从脚手架、辅助前端开发（比如 SSR、PWA 等）的快速开发实践，到 API 中间层、代理层，甚至到后端开发都有非常成熟的经验。本专场将重点邀请一线专家给大家带来他们在各自领域的实战经验。

**大前端工程化**

大前端工程化是指移动端、前端在项目规模、工程复杂度、快速迭代等相同背景下，对一些共性问题的思考。工程化是与实践密不可分的，本专场我们通过分享业内一些经过实践检验的工程化方案，希望能够为大家提供借鉴和帮助。

**性能优化与监控**

性能优化能直接提升用户更快、更流畅的产品体验，在资源受限的移动设备上显得越发重要。通过全链路监控前端、后端、客户端整个通道，拆解用户到达场景下的性能瓶颈，优化整个关键耗时路径，提升产品服务稳定性和速度。

**Serverless 实战**

Serverless 即无服务器技术，是当今炙手可热的方向。因其降低开发成本、按需自动扩缩容、免运维等诸多优势，被越来越多的行业和公司用于更快的构建云上应用。如何让更多的研发团队和开发者，将 Serverless 与自身业务相结合，进行技术升级 ？

**前端前沿技术**

前端技术的发展趋势在最近十年里以惊人的速度向上攀升，而新技术的出现则使得前端从传统的 Web 平台逐渐向外扩展到更多领域。新前端技术的出现源于对业务场景所追求的高性能、高可用性以及高扩展性等多个方面。

**团队建设与管理**

中国互联网产业高速发展，在带动前端行业蓬勃发展的同时，也伴随着成千上万的前端工程师的管理问题。如何在业务达成过程中帮助前端工程师更快成长，如何挖掘工程师的价值考验着每一位前端团队管理者。

**大前端架构演进**

前端和移动端的场景越来越复杂，了解前端架构发展的路径，抽象出其背后的原理，找到变革的驱动力，掌握技术发展的趋势，是学习前端架构的有效途径。 本专场借助几个行业具体的实践案例，谈谈对目前大前端发展趋势和架构演进的理解和展望。

### GMTC的演变 ###

![image-20201229104057703][]

## 大前端时代的焦点 ##

**前端给终端⽤户提供什么?**

*  通过不同端、端侧技术达到最佳的交互体验

**前端能⼲什么? 技术⼿段？**

*  跨端、Node、BFF & Serveless、可视化、IoT、AI等

**前端需要什么 ⼯程设施？**

*  不同场景下的开箱即⽤的⽅案
 *  ⼀站式开发体验

![image-20201229105916297][]

## 我们关注什么？ ##

![image-20201229110040655][]

## 前端工程化体系 ##

### 基础工程设施 ###

![image-20201229110324346][]

### 工程化工具链形态 ###

![image-20201229111442068][]

### 工程化-平台化时代 ###

![image-20201229111656747][]

![image-20201229111722227][]

### 云+端时代 ###

![image-20201229111755594][]

## nodejs应用 ##

### node应用场景演变 ###

![image-20201229141559243][]

### 工具时代 ###

![image-20201229141623502][]

### web应用 ###

![image-20201229141650223][]

### BFF应用 ###

![image-20201229141739640][]

**特点：多端应用、服务聚合**

### Serverless去服务器化 ###

![image-20201229143334499][]

### TypeScript ###

越来越多⼈开始使⽤TypeScript

![image-20201229143534841][]

### node趋势 ###

![image-20201229143651433][]

## 跨平台技术 ##

![image-20201229153000885][]

### RN与Flutter原理对比 ###

![image-20201229153452524][]

### Flutter For Web ###

![image-20201229153538184][]

### 小程序 ###

![image-20201229153615862][]

### 小程序架构选型 ###

![image-20201229153707102][]

**转换原理：语法树的映射解析 （⽂件格式、命名规则、属性和组件名替换，api的适配等）**

### 小程序性能优化 ###

![image-20201229154654670][]

![image-20201229154737044][]

## 性能优化与监控 ##

### 关键因素 ###

*  前端⼈员深⼊理解浏览器，webview 渲染机制
 *  客户端视⻆缓存，不要局限单端视⻆
 *  性能指标监控

### 我们能做什么 ###

![image-20201229174523655][]

### 大佬的前端监控的实现 ###

[传送门][Link 2]

## 大前端人才需求 ##

互联网世界离不开前端开发，像淘宝、阿里巴巴、支付宝、腾讯、京东、新浪微博等等大型的基于互联网的企业与产品，都需要优秀的前端高级开发人才。

不仅仅是互联网企业，随着O2O模式的越来越普及，传统企业越来越互联网化、云端化，前端开发人才需求越来越多，人才缺口高达上百万。

随着5G落地，云计算、大数据和人工智能领域都赋予大前端开发更广阔的空间，跟上这个时代，抓住人工智能、大数据的风口，来学习前端开发，在这里遇见更优秀的自己

[image-20201229101050657]: /images/20221120/d7fdfa4ac4d04fdcb17476da8f035373.png
[GMTC]: https://www.huodongjia.com/tag/28439/
[Link 1]: https://www.huodongjia.com/tag/8374/
[image-20201229104057703]: https://img-blog.csdnimg.cn/img_convert/c6a8fd5125b003b52a07df93ad3fab1b.png
[image-20201229105916297]: https://img-blog.csdnimg.cn/img_convert/595a2a347ba7e3e2e790a340274010f2.png
[image-20201229110040655]: https://img-blog.csdnimg.cn/img_convert/1a1c1988014e3706c2e2f08b1097abab.png
[image-20201229110324346]: https://img-blog.csdnimg.cn/img_convert/26a79e8c3d9bea2651f482fd5a6dc109.png
[image-20201229111442068]: https://img-blog.csdnimg.cn/img_convert/aaf43c6815258e1007efdea6843a38df.png
[image-20201229111656747]: https://img-blog.csdnimg.cn/img_convert/baeedd5243f4b9f8ac4b3f05f69ed07a.png
[image-20201229111722227]: https://img-blog.csdnimg.cn/img_convert/d346dfdf2b15ba6f5bd915534ea13806.png
[image-20201229111755594]: https://img-blog.csdnimg.cn/img_convert/a219ad7adb8075f3eb2ddc51bd262c6a.png
[image-20201229141559243]: https://img-blog.csdnimg.cn/img_convert/6ea0a506a7610ec993803a6e765cd6a4.png
[image-20201229141623502]: https://img-blog.csdnimg.cn/img_convert/426de3a8913a9036f5570d9eb8c7d43e.png
[image-20201229141650223]: https://img-blog.csdnimg.cn/img_convert/ca7d2e100d57684507d3b3a4375de2c4.png
[image-20201229141739640]: https://img-blog.csdnimg.cn/img_convert/ccf066bb6f37d35e6349fc5b913948bf.png
[image-20201229143334499]: https://img-blog.csdnimg.cn/img_convert/0f56a07750d0e903a268476d5bf81bfa.png
[image-20201229143534841]: https://img-blog.csdnimg.cn/img_convert/6168743a7b0efe877c447deb7ca3b01a.png
[image-20201229143651433]: https://img-blog.csdnimg.cn/img_convert/cd62e35f77a7d3900eb76cc5944b7fea.png
[image-20201229153000885]: https://img-blog.csdnimg.cn/img_convert/8c472ec1cac6e57f4cf9ea6ee8702a35.png
[image-20201229153452524]: https://img-blog.csdnimg.cn/img_convert/666b98dad19af4bb61ee30b73d4d7b6b.png
[image-20201229153538184]: https://img-blog.csdnimg.cn/img_convert/1ef60e4be22143a505549820d9e51b91.png
[image-20201229153615862]: https://img-blog.csdnimg.cn/img_convert/a949d530d3b5d355f1a1ff33df3c20f2.png
[image-20201229153707102]: https://img-blog.csdnimg.cn/img_convert/c5a7b802b5de1f4392f442e4d46acb6e.png
[image-20201229154654670]: https://img-blog.csdnimg.cn/img_convert/81747439942767c865eb6a93a085e810.png
[image-20201229154737044]: https://img-blog.csdnimg.cn/img_convert/78035a46ae3e3973874f8fabc8c90e00.png
[image-20201229174523655]: https://img-blog.csdnimg.cn/img_convert/6a9d01686423be78e3f0f72b8cf67397.png
[Link 2]: https://www.sohu.com/a/238991646_465223