Ionic 4测试版发布，带来多项重大改进！

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应用程序。

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

 

新文档

一直以来，Ionic的文档在开源项目中算得上是佼佼者。但是，随着项目的发展，文档变得难以维护，并且用户浏览的速度也会变慢。

为了解决这个问题，我们完全重新设计并大幅改进了Ionic的文档，改进了加载和浏览性能，并让更新和维护变得更容易。我们花了几个月的时间提供了更多的示例和预览，以及更多可以直接使用的代码片段。我们使用Web组件编译器Stencil来生成新文档，并且是开源的。

 

新的文档也处于测试阶段，我们还有很多工作要做，包括添加更多的组件演示，以及与改进的CSS变量和主题相关的内容。

其他改进

• Ionicons 4.0：现已可用，并作为Web组件发行，尺寸大幅缩小，全新的图标反映了最新的iOS和Material Design风格。

• 原生API：Ionic Native 5.0 Beta现在也可独立于框架使用！现在可以将Angular之外的包装器作为简单类，同时仍然提供用于依赖注入的Angular Provider。

• CLI 4.0：重度重构，更快，更美观，Ionic CLI仍然是开发Ionic应用程序的首选工具，提供了强大的Cordova集成、生成器的自定义图表，以及开箱即用的多项目支持。新的CLI可以与Angular CLI一起使用，因此你可以充分利用这两个工具的功能。

• 新的CLI文档：CLI文档已经进行了彻底修整，提供了更清晰、更易于阅读的布局。

• 影子DOM：通过采用原生浏览器API和Web标准，Ionic减少了发送给用户客户端的代码数量。此外，影子DOM通过封装样式，可以更轻松地在任意Web应用程序中使用Ionic组件。

• CSS变量：CSS变量是Ionic主题工作原理的核心。你可以通过更改一些变量来修改应用程序的整体外观，而无需使用构建工具。

测试Ionic 4 Beta

要开始使用Ionic 4 beta，请使用以下命令安装最新版本的Ionic CLI（4.0.0）：

npm install -g ionic

由于Ionic 4仍处于测试阶段，因此在启动新的Ionic应用程序时需要带上一个标记：

ionic start myApp tabs --type=angular

重要链接

Stencil： https://github.com/ionic-team/stencil

升级指南： https://beta.ionicframework.com/docs/building/migration

迁移工具： https://github.com/ionic-team/v4-migration-tslint

文档： https://github.com/ionic-team/ionic-docs

Ionicons： https://ionicons.com/

原生API文档： https://beta.ionicframework.com/docs/native/

新的CLI文档： https://beta.ionicframework.com/docs/cli/overview

查看英文原文： https://blog.ionicframework.com/announcing-ionic-4-beta/

感谢覃云对本文的审校。