这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
跨端技术概述
1.跨端是什么
1. 跨端背景
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac)，移动端(安卓、iOS). web端、loT设备（车载设备、手表)等
2.跨端是什么
通常意义上讲，在前端领域的跨端指的是一套代码落地到不同的native操作系统上，也就是常说的[write once run anywhere]
常见痛点:
-
各端功能几乎—致，各端需要单独配置研发人员
-
开发、维护成本高
-
安卓、iOS发版周期长
-
……
2.跨端技术方案介绍
Hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
——React Native
React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。
React native的思路是最大化地复用前端的生态和Native的生态，和WebView容器的最大区别在于View的渲染体系。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件。相对 WebView容器，体验会有一定的提升。不过，渲染时需要JavaScript和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层，要求开发人员对Native有一定的熟悉度。
React Native是一主要有JSI、Fabric、Turbo Modules组成。
-
JSI
JSI 是 JavaScript Interface 的缩写，一个用 C++ 写成的轻量级框架，它的作用就是通过JSI，JS 对象可以直接获得 C++ 对象(Host Object)引用，并调用对应方法。
-
Fabric
Fabric 是最新的渲染系统，它将取代当前的 UI Manager;
-
Turbo Modules
Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。
自渲染方案
利用 Skia 重新实现渲染管线,不依赖原生组件。
Flutter
Flutter是 Google在2018年世界移动大会公布的开源应用开发框架，仅通过套代码库，就能构建精美的、原生平台编译的多平台应用。
Flutter引擎毫无疑问是Flutter的核心，它主要使用C++编写，并提供了Flutter应用所需的原语。当需要绘制新一帧的内容时，引擎将负责对需要合成的场景进行栅格化。它提供了Flutter核心API的底层实现，包括图形(通过Skia)、文本布局、文件及网络IO、辅助功能支持、插件架构和Dart运行环境及编译环境的工具链。
引擎将底层C++代码包装成Dart代码，通过dart:ui暴露给Flutter框架层。该库暴露了最底层的原语，包括用于驱动输入、图形、和文本渲染的子系统的类。 通常，开发者可以通过Flutter框架层与Flutter交互，该框架提供了以Dart语言编写的现代响应式框架。它包括由一系列层组成的一组丰富的平台，布局和基础库。从下层到上层，依次有:
基础的foundation类及一些基层之上的构建块服务、渲染层、weight层。
小程序方案
使用小程序 DSL +JS开发，通过中间层桥接后调用原生能力,使用webview来渲染U界面。
小程序跨端技术是编译时和运行时的结合方案。
跨端技术方案对比：
3.基于小程序跨端实践
1.下载小程序开发者工具
2.小程序开发、调试
3.小程序上传
总结与展望
这节课学习了许多跨平台的跨端技术。还学习使用了字节跳动的小程序开发者工具，同时也学习了小程序的优化手段。
随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once, run anywhere]，未来自渲染可能会出现更多机会。
