Ionic 4测试版发布，带来多项重大改进！-Linuxeden开源社区

作者 adam ，译者无明

Ionic有史以来最好的一个版本Ionic 4.0.0-beta正式发布！

经过一年多的努力，Ionic 4带来了显著的性能和构建时间改进、强大的主题功能、多框架兼容性、全新的文档，以及其他为用户所熟知和喜爱的功能。新版本除了带来众多新的改进之外，升级到Ionic 4也是有史以来最简单的一次！

Ionic 4是第一个完全拥抱Web API（如自定义元素、CSS变量和影子DOM）的版本。它的核心具有框架无关性，它是一个为Web开发人员而生的UI库，无论他们使用什么样的前端工具或框架。

与此同时，Ionic 4将继续巩固其作为Angular领先移动解决方案的地位。我们更进一步，采用了新的Angular工具和功能，确保Ionic应用程序遵循Angular的标准和规范，并能够立即从社区提供的Angular新功能中受益。

通过Web标准实现稳定性

Ionic 4使用标准Web API从头开始重建，每个组件都被打包成符合标准的Web组件，这样可以更好地基于框架核心开发新特性。

与此相反的是依赖特定框架的客户端运行时和可能会随时间发生变化的组件模型（要求代价高昂的重写和API变更）。Ionic 4旨在避免可怕的“框架用户流失”，因此我们专注在我们最擅长的事情上：为Web开发人员创建出色的UI组件。简单地说，我们永远不想再重写Ionic组件。

Web组件必胜！

Ionic 4最大的变化之一就是为每个组件使用了Web组件。我们甚至为此开发了一个名为Stencil的工具来帮助我们更轻松地完成这项工作，并将它开源！

除了避免框架用户流失，Web组件将更多工作推到了浏览器端，并只需要更少的代码，为加载和启动带来关键的性能改进，这对于构建高性能的渐进式Web应用来说至关重要。

Web组件指的是一系列受现代移动和桌面浏览器支持的API，例如自定义元素和影子DOM。Web组件已经被炒作了几年，而直到现在，浏览器和开发人员才开始大规模支持它们。除了我们，还有很多传统框架和UI库也开始采用它们，比如Angular Elements（https://angular.io/guide/elements）。

在浏览器支持方面，Ionic也为极少数本身不支持Web组件的浏览器提供了polyfill解决方案。更重要的是，它会基于客户端功能检测来下载polyfill，因此绝大多数用户根本不需要下载它们。移动设备对Web组件API已经有了非常广泛的支持，因此使用polyfill的必要性就更小了。

框架集成和兼容性

从一开始，Ionic就是为了与Angular一起使用而创建的。

我们在2013年创建Ionic 1时选择了Angular，就因为它提供了强大的组件API，拥有活跃的社区，并专注于构建大型Web应用程序。但我们最初的愿景是构建一个可以与Web开发人员选择的任何一项技术一起使用的UI框架，一件我们迄今都无法做到的事情。

这意味着，在实际当中，作为HTML标签的Ionic组件（例如<ion-button>）可以用在任何框架中（或者根本不需要使用框架），因为它是浏览器可以识别的自定义元素。在Angular中使用Ionic标签也是可以的（多多少少会有一些API变化），你可能甚至不会注意到有任何不一样的地方。

对于那些使用Angular的人来说，需要做出的变更其实是很少的。大部分API和标签仍然可以像Angular开发人员所期望的那样工作，而Ionic的核心Angular服务基本上没有什么变化。为了保持Angular开发人员的基本体验，我们做了很大的努力。

Ionic 4的最大优势之一是我们能够进行持续的内部改进，而不需要相应的Angular（或其他）框架做出更新。Ionic可以停留在某个特定版本的Angular上，也可以与每个Angular更新保持同步。

在Vue、React中使用Ionic，或不使用框架也是一样的。我们的目标是提升在其他框架中使用Ionic的易用性。

Angular CLI和Router

在发布Ionic 2时，Angular CLI、构建工具和Router方面出现大量用户流失，并存在很多不确定性。因此，Ionic必须自己构建很多工具。时至今日，Angular通过一些出色的工具填补了这些空白，现在是时候让Ionic充分利用Angular并遵循Angular社区的标准了。

从Ionic 4开始，我们完全拥抱Angular CLI和Router！我们现在可以用官方的Angular工具替换ionic-app-scripts和Ionic的Router。

这意味着Angular开发人员现在可以直接将Angular CLI用于Ionic应用程序，并与Angular保持同步。Ionic Angular使用了标准的Router，这样Angular开发人员就可以使用他们熟悉的API。我们将在文档和后续的博文中提供更深入的细节。

虽然这对现有的Ionic Angular开发人员来说是一个改变，但对于该项目来说这是一个长期的胜利，因为Ionic可以更多地关注组件，而不是不必要的复杂工具。这也是Ionic Angular开发人员的胜利，他们现在可以使用正式的Angular工具和规范。

升级到Ionic 4

从Ionic 3升级到Ionic 4与从Ionic 1升级到Ionic 2完全不同，因为如果你使用的是Angular，开发者体验几乎没有变化！你为应用程序构建的所有Angular服务、组件和指令都可以立即在Ionic 4中运行。由于仍处于测试阶段，我们希望获得更多帮助来测试迁移过程，以便为迁移到Ionic 4做好准备。

除了采用Angular CLI和Router之外，我们让项目结构看起来就像使用ng new生成的一样，让Ionic应用程序与Angular最佳实践看齐。迁移指南中大部分都是关于如何使用Angular工具将Ionic应用程序转换为Angular应用程序。

我们的迁移工具可以自动检测文档中所提到的大多数变更，甚至可以自动解决一些问题！