这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前言
今日的课程是关于跨端技术的，之前也用taro这个框架写过小程序，今天也正式了解了一下关于跨端技术的知识
跨端
1. 什么是跨端
因为前端当下需要处理的场景非常多：android、ios、pc、小程序等，当某几个场景所需功能相似时，我们当然希望用最少的开发成本来达到最好的效果，而不是每个端都再重新写一遍。
2. 为什么需要跨端
当我们不引入跨端这个概念时，我们可能遇到以下问题
- 各端功能几乎一致,各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版周期长
...
3. 跨端技术方案目标
- 研发效率提高
- 学习成本降低
- 多段一致性高
- 用户体验好
- 稳定性高
- 性能体验好
- 动态化
- 支持动态化下发，满足日益增长的业务需求
4. 跨端技术方案
4.1 Hybrid方案
其实，浏览器本就是一个跨端实现方案，因为你只需要输入网址，就能在任何端的浏览器上打开你的网页。那么，如果我们把浏览器嵌入 app 中，再将地址栏等内容隐藏掉，是不是就能将我们的网页嵌入原生 app 了。而这个嵌入 app 的浏览器，我们称之为 webview ，所以只要某个端支持 webview ，那么它就能使用这种方案跨端。
同时这也是开发成本最小的一种方案，因为这实际上就是在写前端界面，和我们开发普通的网页并没有太大区别。
4.2 框架层+原生渲染
较为典型的是 react-native，它的开发语言选择了 js，使用的语法和 react 完全一致，或者也可以说它就是 react，这就是我们的框架层。而不同于一般 react 应用，它需要借助原生的能力来进行渲染，组件最终都会被渲染为原生组件，这可以给用户带来比较好的体验。
4.3 框架层+自渲染引擎
这种方案和上面的区别就是，它并没有直接借用原生能力去渲染组件，而是利用了更底层的渲染能力，自己去渲染组件。这种方式显然链路会比上述方案的链路跟短，那么性能也就会更好，同时在保证多端渲染一致性上也会比上一种方案更加可靠。这类框架的典型例子就是 flutter 。
4.4 另类跨端
众所周知，在最近几年有一个东西变得非常火爆：小程序，现在许多大厂都有一套自己的小程序实现，但相互之间还是有差异的，通常可以借助 taro ，remax 这类框架实现一套代码，多端运行的效果，这也算是一种另类的跨端，它的实现方式还是比较有意思。
5. 跨端目前存在的问题
5.1 一致性
对于跨端来说，非常重要的是如何屏蔽各端的细节，比如某个端可能特有某个api的话如何处理，怎么保证各个端渲染细节上始终保持一致。如果一个跨端框架能够让开发者的代码里面不出现 isIos、isAndroid的字眼，或者是为了兼容各种奇怪的渲染而产生的非常诡异的hack方式。那我认为它绝对是一个真正成功的框架。
但是这个问题还是很难解决的
比如说h5中磨人的垂直居中问题，我相信只要开发过移动端页面的都会遇见，就不用我多说了。
5.2 为什么出现了这么多框架
可能我们会有疑惑为什么本质上是在干一件事情，却出现了这么多的方案？其实这些框架可能都没能很好的解决某个问题，所以大家都想自己去写一套自己的方案。其中性能问题大家可能比较关注，比如：
rn因为架构上的原因导致某些场景性能差，所以它就想办法从架构上去进行修改。flutter直接自己搞了一套渲染引擎，同时选用支持AOT的dart作为开发语言。
但是其实我们在选择框架的时候性能并不是唯一因素，开发体验、框架生态这些我们在开发过程中也需要去考虑。
写在结尾
在学习跨端的时候，还有许多细节我们是需要考虑把握的，希望在今后学习中更加深入地去学习跨端技术，加油！
