前端跨端技术探索

月晕2024-09-05

开个坑，学习业界的常用跨端方式和一些原理之类的

简介

跨端又称为跨平台，我们通常希望是能够写一套代码，不仅能够在安卓、ISO、Windows、Macos 等等等的操作系统上面运行，希望能用统一的技术栈去构建适用于多个平台的应用

hybrid 方案 && Webview 视图层

简单理解即是浏览器套壳，浏览器本来就是一个跨端的产品，我们能够在不同的环境中运行浏览器并且浏览网页
基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用

WebView 容器的工作原理是基于 Web 技术来实现界面和功能，通过将原生的接口封装，暴露给 JavaScript 调用，JavaScript 编写的接口可以运行在系统自带的 WebView 中
优点就是对前端开发比较友好同样可以调用原生的能力，通过搭建桥接层和原生去交互
缺点是跨端的能力受限于桥接层，浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染效果能力较差

浏览器

浏览器就是一种悠久的跨平台方案，浏览器提供了一个容器，屏蔽了底层差异，提供了统一的 DOM API，这样就可以实现同一份代码在不同的平台跑在同一份容器中，容器即使浏览器引擎

PWA

PWA(Progressive Web App) 基于 Web 技术构建的应用，并具备了像云原生应用一样的体验、性能以及功能，使用 Service Worker 缓存静态资源实现离线可访问，提高网页加载速度和添加的主屏 ICON
PWA = Web 网页 + 离线缓存 + 消息推送

Electron

Electron 是使用 js，html，css 构建跨平台的桌面应用程序的框架，可以构建出 windows、linux、Mac 的应用程序
通过集成浏览器的内核，使用前端的技术来实现不同平台下的渲染，并结合了 Chromium、Nodejs、native APIS

Chromium 为 Electron 提供了强大的 UI 渲染能力，本省就是跨平台开发，无需考虑兼容性，对前端开发者很友好
Chromium 不具备原生的 GUI 的操作能力，因此内部集成了 nodejs，编写 UI 的时候可以调用操作系统底层的 API，比如 path，fs 等
Native API 为 Electron 提供原生系统的 GUI 支持，借此 Electron 可以调用原生应用程序接口。

原生渲染方案

使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面，例如在 Android 开发中常用的是 kotin 和 Java 来编写视图，IOS 中使用 Swift 和 Objective-C 来编写视图

React Native

React Native 是一个开源的 JS 框架，可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用

React Native 的思路是最大化的复用前端的生态和 Native 的生态，和 WebView 容器的最大区别是在于 View 的渲染体系，React Native 抛弃了使用低效的浏览器内核渲染，转而是使用自己的 DSL 生成中间格式，然后去映射到不同的平台，渲染成平台组件，相对于 WebView 容器，体验会更好，渲染时需要 js 与原生之间通信

自渲染方案

即不使用 WebView 又不使用原生组件，使用自绘组件

Flutter

flutter 是近些年流行的跨端方案，跨的端包括安卓、ios、web 等。它最大的特点是渲染不是基于操作系统的组件，而是直接基于绘图库（skia）来绘制的，这样做到了渲染的跨端。
Flutter 与上述 React Native、WebView 容器本质上都是不同的，它没有使用 WebView、JavaScript 解释器或者系统平台自带的原生控件，而是有一套自己专属的 Widget，底层渲染使用自身的高性能 C/C++ 引擎自绘。