前端工程化详解

# 简介

TIP

所有能用 JavaScript 解决的问题，最后都会用 JavaScript 去解决。

2008 年，Google 推出了 Android 操作系统，并向开发人员提供了一个名为“Android Market”的应用商店来分发和推广应用程序。Android Market 后来更名为 Google Play Store，并成为了 Android 系统的主要应用商店。

同年，苹果公司推出了 iPhone SDK，并向开发人员提供了一个名为“App Store”的应用商店来分发和推广应用程序。App Store 后来成为了 iOS 系统的主要应用商店，并推动了 iOS 生态系统的快速发展。

在 Android 和 iOS 系统之前，移动设备的应用程序开发通常是由设备制造商或服务提供商来完成，而第三方开发人员没有太多的机会参与到移动应用程序的开发和分发中来。但随着 Android 和 iOS 系统的普及和应用商店的出现，第三方开发人员可以更容易地创建和分发应用程序并且从中受益，这大大推动了移动应用程序的发展和创新。

# Native

Native 指代 Android 和 iOS 应用的原生开发，Android 使用 Java 或 Kotlin 语言开发应用，iOS 使用 Object-C 或 Swift 语言开发应用。

native

# 优点

  1. 更好的性能和稳定性 使用官方推荐的编程语言可以更好地与系统和硬件交互，提供更高效的代码执行和更好的内存管理。

  2. 更好的用户体验 原生应用可以直接调用设备的硬件和功能，如相机、GPS 等，可以给用户更好的体验。

  3. 更好的开发支持和工具 官方推荐的编程语言会配套大量的开发支持和工具，如 Android Studio、Xcode 等，还有相应的社区支持

# 缺点

  1. 开发成本高 针对 Android 和 iOS 系统需要编写两套代码，需要不同的开发人员，开发成本高

  2. 开发周期长 编写原生应用需要投入更多的时间和资源，每次开发完毕后都需要应用上架审核，开发周期较长。

  3. 维护和升级复杂 每次发版都需要应用商店审核，出现问题不能及时更新。系统版本升级后，需要不断更新和维护。

# WebApp

Android 和 iOS 系统取得成功后，WebApp 的概念顺势兴起。为了追赶和应对移动应用程序的发展，Web 技术不断进步，推出了很多新的标准和技术，如 HTML5、CSS3 等，使得 Web 应用程序的功能和性能得到了大大的提升，可以承担更多的业务。

起初，WebApp 只是一个触屏版的浏览器，应用只能在浏览器中运行，无法调用系统的硬件和功能，只能实时获取资源，用户体验差。自从 2014 年Application Cache为 W3C 的正式推荐标准，使得 Web 应用程序能够在离线时也能够使用，大大提高了 WebApp 的可用性和可靠性。

TIP

尽管Application Cache在 HTML5 规范中已经成为正式标准，但在实际应用中，它已经逐渐被其他技术所取代，例如Service Worker等。这是因为Application Cache存在一些问题，如缓存更新机制不够灵活、缓存容易出现冲突等。

在 2016 年，Google Chrome 浏览器首先支持了Service Worker和Web App Manifest等新技术，这些技术为 PWA（渐进式 Web 应用程序Progressive Web App）的发展奠定了基础。Service Worker可以在后台拦截和处理网络请求，缓存应用程序资源并提供离线支持，Web App Manifest则提供了一种描述 Web 应用程序的 JSON 文件格式，包括应用程序的名称、图标、起始页面等信息。

在此基础上，Google 推出了 PWA 应用商店，并开始向 Web 应用程序开发者推广 PWA 的概念和技术。此外，Google 还在 Chrome 浏览器中添加了“安装应用程序”按钮，使得用户可以更容易地将 Web 应用程序添加到主屏幕，并像原生应用程序一样进行访问和使用，进一步提高了 WebApp 的可用性和可靠性。

# 优点

  1. 上手门槛低，开发速度快
  2. 开发成本低，一套代码多平台使用
  3. 维护和升级简单

由于 WebApp 代码都是实时获取资源，代码更新后，用户可以实时获取到最新的代码

# 缺点

  1. 受制于浏览器的能力，无法调用系统的硬件和功能
  2. 交互体验较差，第一次加载有白屏时间 原生应用程序可以充分利用硬件的性能和功能，提供更加流畅、快速、自然的用户体验，而 WebApp 无法完全达到这种体验。
  3. 性能较差 相对于原生应用程序，WebApp 的性能有时可能会受到网络、硬件等因素的影响，可能会导致响应速度较慢、动画效果不流畅等问题。

# Hybrid

由于单独使用原生开发或 WebApp 开发应用都或多或少存在一些问题，业界开始追寻新的解决方案。2013 年 10 月 31 日 Android 4.4 版本（API Level 19）Android WebView 成为一个独立的组件，允许应用程序内嵌浏览器视图，以显示 HTML、CSS 和 JavaScript 等 Web 内容。2014 年 9 月 17 日 iOS 8.0 推出了 WKWebView 组件，这是一种基于 WebKit 渲染引擎的高性能 WebView 组件。

基于 Webview，业界提出了 Hybrid 方案，同时使用 Web 技术和 Native 技术共同进行开发的应用程序。

狭义的 Hybrid App 可以理解为外面是原生的壳子(不局限于 Android、iOS 系统)，里面是 Webview。

广义的 Hybrid 指代跨平台开发方案：

  • Web 渲染方案，如 JSBridge、Cordova、Ionic、Electron 等。
  • 原生渲染方案，如 ReactNative、Weex、小程序、UniApp 等。
  • 自绘引擎渲染方案，Flutter、CocosCreator、Unity 等。

# 优点

  1. 跨平台
  2. 多平台具有一致的外观和功能
  3. 开发成本较低
  4. 维护和升级简单
  5. 可以调用设备的特性和功能

# 缺点

  1. 性能较原生开发低
  2. 兼容多平台，会无法充分利用每个设备的特性和功能

← Web渲染 →