How do you choose the front-end cross-end?
"If a front-end developer told you ten years ago that he would adapt a page to both the large screen of the PC and the small screen of the mobile phone, you would definitely think him incredible. But what about now?"
After years of development, front-end technology has rapidly developed from a simple plain text web page to a modern web application that supports interaction and animation. At the same time, more and more people use smart mobile devices to surf the Internet, so we can clearly see that front-end cross-platform is becoming more and more popular.
The so-called "cross-platform" means that it will adapt to multiple types of devices at the same time, such as desktop computers, laptops, tablets, mobile phones and other smart devices, etc., which requires us to choose a cross-end framework to help us achieve such Target.
But the question is, how to choose a cross-end framework? This article will discuss issues related to front-end cross-platform selection.
1. Understand the cross-end framework
Understand the basic definition of cross-end framework
A cross-end framework is a JavaScript JS framework that can run in different environments. For developers, cross-end frameworks enable them to free developers from the hassle of writing code for different platforms.
Of course, before choosing a cross-end framework, we must understand its specific features and performance aspects. For example, which platform types (web, native, etc.), compatibility (current mainstream browsers, mobile phone model compatibility issues, etc.) are specifically supported by the project, and what kind of requirements are to be realized.
Common cross-end frameworks
As early as 2010, Facebook launched the open source framework React.js, which has changed the entire front-end industry, from the way engineers work to optimizing page performance.
Here are some common cross-end frameworks:
React Native
React Native, developed by Facebook and released in 2015, is a JavaScript library designed for iOS and Android that can share code.
ReactNative has many advantages, such as writing with an emphasis on "declarative UI" (declarative UI), which means by defining arrow functions to perform tasks like rendering HTML DOM, and then execute application logic.
At the same time, development is very convenient because it is easier to iterate and see the effect of your changes immediately than iOS or Android apps.
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 等多种形态端的开发能力。
采用统一语法规范进行开发之后，项目不仅可以顺利实现跨端, 并且无需花费时间和精力重新学习其它框架的语法规范。
如何选择适合的跨端框架
很多人在面对选择哪种跨端框架时会感到困惑，毕竟市面上各类跨端框架琳琅满目，如何选择呢？
-
确认切入的领域：在开始开发过程中需要确定自身的能力和对客户端技术场景的理解，比如既适配APP又适配小程序用哪个框架？
-
技术改进：根据落地项目所需的功能、业务场景来选择合适的跨端技术，这就需要开发者熟悉各种技术及其背后的实现机制。
-
了解目标平台的区别：除了统一接口外，一个好的跨端框架还要有针对不同平台的适配和优化能力。
-
优先考虑稳定性：在能够选择之前，首先要查阅现在市面上使用量更大、成熟度更高的跨端框架，同时尽可能多找相关案例、技术博客、论坛帖子等资料。
2. 跨端框架应用
如何跨平台测试
就像人们常说的“没有测出来的代码是无意义的”一样，产品测试是开发过程中不可忽视的一个环节。而对于跨端框架来说，测评过程可能更加复杂，因为需要覆盖不同终端、版本的数据和误差情况。
跨端框架的成功，除了在理论上的完善外，还要经受核心的实际检验，也就是测试。通常情况下，跨端应用的测试包括以下内容：
-
不同屏幕尺寸和分辨率的测试
-
不同版本操作系统和设备的测试
-
单元测试、集成测试以及UI测试等
优化跨端框架应用
为了让跨端项目效果更好，很多开发者会使用技巧或工具来优化跨端框架应用。以下是一些最常见的方法：
- 按需加载代码
除非特定的功能/组件被访问到，否则它们不需要在页面初始加载之前渲染。因此，可以使用异步导入/懒加载（Code Splitting）技术，只在真正需要组件时再导入。
- 向Native传输数据
有助于缓解JavaScript引擎当前不适合处理的计算问题，提升程序的执行执行速度。例如，我们可以使用RN框架将Home.js在Android和iOS上渲染一遍，然后将渲染后的数据直接传输到Native组件中，减少JavaScript计算时间。
- 缓存WebAssembly模块和字体
WebAssembly是一种非常快速且可靠的技术，它可以在浏览器中运行已编译好的代码。很多跨端框架（如Flutter）都使用 WebAssembly 加速应用程序加载时间。
此外，在跨端框架中，字体是一个巨大的问题，因为您需要仔细处理字体文件以便在硬件和软件环境中看起来相同。由于网页缓存机制，我们可以使用 font-display 属性将字体劣化为低解析度，这样我们可以更快地显示页面而不张贴字体文件。
- 优化前端性能
对于任何应用程序来说，性能是最关键的因素之一。跨端项目也不例外。以下是提高跨端应用性能的一些常见技巧：
- 减少HTTP请求
如果使用CDN上的公共组件，就能减少HTTP请求数量。
- 压缩脚本、样式表、图片等
可以利用打包工具（如Webpack）进行压缩，以减少空间占用和加载时间。
- 使用预加载
可以在用户从之前访问过的页面中预加载某些组件，缩短页面加载时间。
3. Ending
Cross-end framework is an important trend in front-end development, applicable to various platforms and environments, and can greatly improve our development efficiency.
When choosing a cross-terminal framework, we need to comprehensively consider project requirements, technical characteristics, and stability, and flexibly choose a framework that suits us.
Of course, no matter which cross-end framework is used, optimizing the performance and stability of the application is always the core issue. The cross-platform issues involved in this article still have a lot to be explored in depth. I hope this article can provide readers with a reference for cross-end framework selection and application.
Finally, I hope that when you choose a cross-end framework, you can gain technological progress and improve your work experience through continuous practice!