前端框架逐渐形成了React、Vue、Angular三足鼎立的形势,另外还有一些... 展开 >
孟夕,极客邦科技的会议主编,主要负责公司垂直会议的内容策划和讲师邀请。2016 年加入 InfoQ,关注大前端、人工智能、云计算、运维、架构等多个技术领域,致力于为推动技术社区的发展贡献自己的力量。
前端框架逐渐形成了React、Vue、Angular三足鼎立的形势,另外还有一些公司的自研框架,每一个框架都有着自己的拥趸,这些框架有哪些落地实践,让我们为你一一道来。
蚂蚁金服自 2015 年就选择了自研框架之路,一路披荆斩棘,目前已支撑了蚂蚁成百上千个项目,但也仍存在一些不足。本次分享将为大家带来我们在前端框架和工程化方面的探索和思考。
演讲提纲:
1. 前端框架实践,关于研发提效和体验优化
(1)前端框架的开放和约束
业务框架和开源框架的相辅相成
插件体系
(2)本地开发提速
(3)体验优化(性能等)
(4)资产市场和组件打包
(5)2019是TypeScript年
(6)数据流思考
(7)SSR
(8)文档和培训体系
2. 前端工程化实践,关于框架、流程和应用治理
(1)框架和流程打通
(2)研发场景支持的完备性—Serverless
3. 前端框架的未来
(1)前端框架的商业化和上云
(2)可视化编程和辅助编程
(3)面向未来的前端打包方式
听众收益:
1. 了解如何借助框架,通过语言、资产市场、SSR、数据流、本地 CLI 提速、性能优化等方式提升研发效率,以及提升产品体验
2. 了解框架应该如何与流程结合,打造更顺畅的内部开发体验,以及蚂蚁在 e2e 测试、埋点、前端监控等方面做法
3. 我们对于未来的思考
组件系统是 Vue 的核心概念,理解 Vue 组件的思想不难,但如何将组件思想有效的传达给后端人员或初级开发人员并不是一件简单的事情,在极客时间《Vue 实战课程》的录制中,对 Vue 组件有了更深一步的理解,当我换个角度看组件之后,发现了一些有趣的事情,并将这些“事情”在Ant Design Vue 中实践。本次 Talk 将从如下5个方面进行分享:
演讲提纲:
1、什么是组件
2、又爱又恨的函数式组件
3、当插槽碰上函数式组件
4、指令的另外一种用处
5、简约而不简单的 Vue
听众收益:
1、不同角度理解 Vue 组件的思想
2、重新认识 Vue 模板的能力
随着前端优秀技术的不断涌现以及携程业务的加速发展,陈旧的技术架构已经难以满足新的需求,本次分享展示了携程NFES框架在向新技术、新模式靠拢,统一前端技术栈,升级技术架构方面的探索和实践。相信,通过本次的分享,定会给需要的同学带来启发和思路,也欢迎更多的同学和我们一起探讨和交流前端框架方面的经验。
演讲提纲:
1. 背景
(1) 现有技术架构的一些问题
(2) 来自业务团队内部开发模式的变化
(3) 新的前端解决方案NFES的提出(涉及浏览器端、服务端、App端以及配套的工具)
2. NFES框架设计
(1) 整体架构
(2) 前后端分离的支持
(3) 多端适配
3. NFES实现
(1) 浏览器端新技术的引入
(2) 提供统一的全新的应用层框架,便于开发人员更加关注业务
(3) 采用CSR+SSR的混合模式,带来更好的用户体验
(4) 支持插件化机制,便于开发人员灵活的扩展能力
(5) 服务端的支持
(6) 提供功能完备的的项目模版(涉及健康检查、多线程处理、配置中心处理等)
(7) 便于老技术项目的迁移,对老技术的基础设施模块,我们提供了对应的Node版本
(8) App端的优化
(9) 研发了类小程序架构的Hybrid容器
(10) 提供了类React Naitve架构的真机调试
4. NFES开发体验优化
(1)集成调试环境,支持Web、Node
(2)简化发布流程,支持一键发布多平台
(3)解决生产环境代码调试的问题
(4)全链路线上数据监控
听众收益:
1. 在历史债务方面的清理
2. 在开发效率方面的提升
3. 在应用性能方面的优化
Facebook在2018年6月官方正式宣布了大规模重构React Native的计划及重构路线图,目的是为了让React Native更加轻量化、更适应混合开发,接近甚至达到原生的体验。
在近期的开发者大会上,Facebook也对此次重构取得的进展做了分析和介绍,本次分享将着重分享React Native框架目前碰到的瓶颈,以及Facebook及京东是如何优化的。
演讲提纲:
1.京东JDReact平台简介
(1)JDReact框架整体剖析
(2) JDReact框架在京东内的应用现状
2.React Native面临的问题分析
(1)启动性能问题分享
(2)React Native渲染的流程分享,及异步渲染产生性能问题原因分析
(3)与跨平台框架Flutter的数据对比分析
(4)京东JDReact是如何优化性能和体验的
3.React Native架构重构整体介绍
简单分析此次架构重构主要改造点,以及要解决的核心问题介绍
此次重构升级引入的新的框架介绍:
(1)Fabric UI架构原理分析
(2) JSI原理介绍,如何异步或者同步完成JS到Native到通讯
(3) TurboModule架构原理介绍
(4)组件社区化及对开发者的影响
4.京东JDReact如何应对此次架构升级
(1) 对现有的大量组件及API的影响评估,以及后续的调整方向
(2) 对现有JS业务的影响评估
听众收益:
1.了解现有的React Native的UI及API的设计的原理,以及瓶颈、缺陷,方便相关开发者在业务设计时提前避免
2.了解未来React Native的发展规划及前景,以及重构后的整体架构,提前做好技术规划和储备
3.了解现有的React Native架构下如何来优化性能、提升用户体验