前端跨端你是如何选型的？

“如果在十年前某个前端开发者跟你说他会把一个页面既适配PC端大屏幕又适配手机小屏幕，你一定会觉得他不可思议。可是现在呢？”

前端技术经过多年的发展，已经从一页简单的纯文本网页飞速发展到支持交互和动画的现代网络应用程序。与此同时，越来越多的人使用智能移动设备上网冲浪，因此，我们可以很清楚地看到前端跨平台变得越来越流行。

所谓”跨平台”指的是将同时适配多种设备类型，如桌面电脑、笔记本电脑、平板电脑、手机以及其他智能设备等，这就需要我们选择一种跨端框架来帮助我们实现这样的目标。

但问题是，究竟该如何选择一种跨端框架呢？本文将探讨有关前端跨平台选型的问题。

1.了解跨端框架

了解跨端框架的基本定义

跨端框架是一种JavaScript JS框架，它可以在不同的环境下运行。对于开发者来说，跨端框架使他们能够将开发人员从为不同平台编写代码的烦恼中解放出来。

当然，在选择跨端框架之前，我们必须了解其特定功能和性能方面。比如针对该项目具体支持哪些平台类型（web、native等）、兼容性（目前主流浏览器、手机型号兼容问题等），以及到底要实现什么样的需求等信息。

常见跨端框架

早在2010年，Facebook就已推出开源框架React.js，这个框架改变了整个前端行业，从工程师的工作方式到优化页面性能等各个角度。

下面是一些常见的跨端框架：

React Native

React Native由Facebook开发，并于2015年发布，是一种为iOS和Android设计并可以共享代码的JavaScript库。

ReactNative有很多优点，比如编写着重于“声明式UI”（declarative UI），这意味着通过定义箭头函数来执行类似渲染HTML DOM之类的任务，然后执行应用逻辑。

同时，开发非常方便，因为与iOS或Android应用程序相比，它更容易迭代，即可立即查看您的更改效果。

Flutter

Flutter是Google开发的跨平台框架，也是2021年最热门的框架之一。这个框架确保可以为iOS和Android应用程序编写高质量代码，并且在跨平台环境中很快。

Flutter使用Dart语言，而且它的API是有状态可追溯的，因此您不必担心意外的数据冲突。Flutter还包含一个自定义绘图引擎，这将能够让您创建自定义的UI布局。

Weex

Weex是由阿里巴巴开发的一个跨平台解决方案，拥有时效性高、模块化程度好等特点，2016年在GitHub上实现了开源。

Weex非常适合于移动应用程序和Web网络应用程序。该工具具有开发高性能，销售品质和易用性等一系列优点，稳定性较好。

Weex支持NPM的依赖库，为软件开发人员提供了众多工具来加快和简化应用程序开发过程。该平台还具有一个易于学习的UI组件库，Web-Mobile通用设计规范及组件、和Flexbox CSS布局方案等。

Taro

Taro是由京东凹凸实验室团队开发的一款遵循Vue语法规范的跨端框架，支持React语法规范使用mini-app、H5、RN 等多种形态端的开发能力。

采用统一语法规范进行开发之后，项目不仅可以顺利实现跨端, 并且无需花费时间和精力重新学习其它框架的语法规范。

如何选择适合的跨端框架

很多人在面对选择哪种跨端框架时会感到困惑，毕竟市面上各类跨端框架琳琅满目，如何选择呢？

1. 确认切入的领域：在开始开发过程中需要确定自身的能力和对客户端技术场景的理解，比如既适配APP又适配小程序用哪个框架？

2. 技术改进：根据落地项目所需的功能、业务场景来选择合适的跨端技术，这就需要开发者熟悉各种技术及其背后的实现机制。

3. 了解目标平台的区别：除了统一接口外，一个好的跨端框架还要有针对不同平台的适配和优化能力。

4. 优先考虑稳定性：在能够选择之前，首先要查阅现在市面上使用量更大、成熟度更高的跨端框架，同时尽可能多找相关案例、技术博客、论坛帖子等资料。

2. 跨端框架应用

如何跨平台测试

就像人们常说的“没有测出来的代码是无意义的”一样，产品测试是开发过程中不可忽视的一个环节。而对于跨端框架来说，测评过程可能更加复杂，因为需要覆盖不同终端、版本的数据和误差情况。

跨端框架的成功，除了在理论上的完善外，还要经受核心的实际检验，也就是测试。通常情况下，跨端应用的测试包括以下内容：

1. 不同屏幕尺寸和分辨率的测试

2. 不同版本操作系统和设备的测试

3. 单元测试、集成测试以及UI测试等

优化跨端框架应用

为了让跨端项目效果更好，很多开发者会使用技巧或工具来优化跨端框架应用。以下是一些最常见的方法：

1. 按需加载代码

除非特定的功能/组件被访问到，否则它们不需要在页面初始加载之前渲染。因此，可以使用异步导入/懒加载（Code Splitting）技术，只在真正需要组件时再导入。

2. 向Native传输数据

有助于缓解JavaScript引擎当前不适合处理的计算问题，提升程序的执行执行速度。例如，我们可以使用RN框架将Home.js在Android和iOS上渲染一遍，然后将渲染后的数据直接传输到Native组件中，减少JavaScript计算时间。

3. 缓存WebAssembly模块和字体

WebAssembly是一种非常快速且可靠的技术，它可以在浏览器中运行已编译好的代码。很多跨端框架（如Flutter）都使用 WebAssembly 加速应用程序加载时间。

此外，在跨端框架中，字体是一个巨大的问题，因为您需要仔细处理字体文件以便在硬件和软件环境中看起来相同。由于网页缓存机制，我们可以使用 font-display 属性将字体劣化为低解析度，这样我们可以更快地显示页面而不张贴字体文件。

4. 优化前端性能

对于任何应用程序来说，性能是最关键的因素之一。跨端项目也不例外。以下是提高跨端应用性能的一些常见技巧：

• 减少HTTP请求

如果使用CDN上的公共组件，就能减少HTTP请求数量。

• 压缩脚本、样式表、图片等

可以利用打包工具（如Webpack）进行压缩，以减少空间占用和加载时间。

• 使用预加载

可以在用户从之前访问过的页面中预加载某些组件，缩短页面加载时间。

3. 结尾

跨端框架是前端开发的重要趋势，适用于各种平台和环境，并且可以大大提高我们的开发效率。

在选择跨端框架时，我们需要综合考虑项目需求、技术特点以及稳定性等方面，灵活选择适合自己的框架。

当然，无论使用哪种跨端框架，优化应用程序的性能和稳定性始终是核心问题。本文所涉及的跨平台问题还有很多待深入探究之处，希望本文可以对读者在进行跨端框架选择和应用上提供参考。

最后，希望你在选择跨端框架时，在不断的实践中能够获得技术进步和工作体验的提高！