Ionic是市场上最好的框架之一，它是开发混合移动应用程序的开源SDK 。它包括三个主要组件，例如基于Sass的UI框架，该框架针对移动UI明确优化。其次是Angular框架，它对于快速开发可伸缩应用程序很有用。第三个是用于具有JavaScript，HTML和CSS的本机应用程序的编译器（PhoneGap或Cordova）。这个高效的框架包含几个开箱即用的功能CSS组件。
Ionic 4 beta仅在一周后发布，它与Ionic 3相同.Ionic 4中包含的一些升级版本包括性能和构建时间改进，强大的主题功能，多框架兼容性，全新文档以及将当前应用程序迁移到Ionic 4就像从Ionic 1到2的过渡一样，他们还提供了迁移工具，这也完成了工作。
主要目标是使Ionic成为构建可访问本机设备功能的移动渐进式Web应用程序的强大框架。Ionic 4带来了一些坚实的技术，工具和概念，如Stencil，Capacitor，Ionic Native 5和Ionic PWA Toolkit，使用离子4，您将能够使用具有React，Vue，Angular的Ionic组件或根本没有框架。
现在，让我们来看看离子4中引入的新功能和改进
离子4特征
Ionic 4带来了一些功能，比如使用Stencil进行内部代码重构，以及使用其他框架代替Angular的替代方案，但是，无论出于何种意图和目的，开发人员应该能够以最小的影响继续开发他们的应用程序。
Web组件
Ionic 4中最大的变化之一是它们转移到每个组件的Web组件。但究竟什么是Web组件？
Web组件是一组Web平台API，使您可以创建新的自定义，可重用，封装的HTML标记，以用于网页和Web应用程序。自定义小部件和组件构建在Web组件标准之上，可以在现代浏览器中使用，并且可以与任何使用HTML的JavaScript库或框架一起使用。
Web Components在不编写代码块的情况下将更多工作推向浏览器，为负载和启动时间带来关键性能改进，这对于构建高性能Progressive Web Apps至关重要，这是项目向前发展的重点。
Web组件基于四个主要规范：
自定义元素
自定义元素可让您实现HTML的现代化，Web开发人员可以创建新的HTML标记，增强现有的HTML标记，或扩展其他开发人员编写的组件。它为设计和使用新类型的DOM元素奠定了基础。
Shadow DOM
Shadow DOM被设计为用于构建基于组件的应用程序的工具。它修复了CSS和DOM。它将范围样式引入Web平台。如果没有工具或命名约定，您可以将CSS与标记捆绑在一起，隐藏实现细节，并在vanilla JavaScript中创建自包含组件。
当我们使用新的HTML <id / class>时，它有可能与页面使用的现有名称冲突。微妙的错误，CSS特异性（重要的是所有事情），有时风格选择器失去控制，性能可能会受到影响。
HTML导入
它定义了HTML文档在其他HTML文档中的包含和重用。
HTML模板：
它定义了如何声明在页面加载时未使用的标记片段，但可以在运行时稍后实例化。
Stencil Stencil是由Ionic团队创建的新的Web组件编译器，用于实现以下目标：
- 框架无关 - 它不受特定前端框架的限制或绑定，它可以与任何其他JavaScript框架（Vue，React，Preact等）一起使用，或者根本不使用框架。
- 构建符合标准的Web组件
- 利用其他API，如TypeScript，Virtual DOM，JSX和异步渲染，非常适合渐进式Web应用程序（在慢速/快速网络上运行良好，代码量小，执行/渲染时间快，可在不同浏览器和设备之间实现互操作）。
Capacitor Capacitor是一个跨平台的API和代码执行层，可以轻松地从Web代码调用Native SDK并编写应用可能需要的自定义Native插件。此外，Capacitor还提供一流的Progressive Web App支持，因此您可以编写一个应用程序并将其部署到应用程序商店和移动Web。
Ionic 4中引入的新组件
ion-backdrop 它们是覆盖其他组件的全屏组件。它们在其他内容之上转换，可用于解除该组件。
ion-content 单个视图组件中应该只有一个内容。它提供了一个易于使用的内容区域，其中包含一些控制可滚动区域的有用方法。
离子选择器拾取
器在应用程序内容的顶部和视口底部显示一行按钮和列。
--Picker-column
--Picker控制器
离子纹波效应
纹波效果组件增加了材料设计墨水纹波交互效果。它被设计为高效，无创且可用，无需在元素中添加任何额外的DOM。它的工作原理没有javascript降级，更容易实现CSS-only。
ion-route
它接受一个组件，并在浏览器URl与URL prop匹配时呈现它。
ion-reorder
重新排序允许拖动项目以水平更改其顺序。它可以在离子重排序组中使用，以提供可视拖放界面。
离子搜索栏 Searchbars表示可用于通过收集来搜索文本字段。Ionic团队增加了9种不同的搜索栏样式，看起来很棒。
ion-show-when 当查询的计算结果为true 时，它会自动显示它的子内容。ShowWhen可以监视平台更改，模式更改，CSS媒体查询和设备方向。
ion-select- popover Popover是一个对话框，显示在当前页面的顶部，用于不适合导航栏的溢出操作。
ion-skeleton-text Skeleton Text用于呈现占位符内容。该元素将呈现指定宽度的灰色块。
颜色更改 默认颜色已更改，并且还添加了一些新的默认颜色
可触发的项目 以前，我们将使用<button>作为我们想要可点击的列表项，但现在我们只需将tappable属性添加到<ion-item>：
<ion-item tappable（click）=“doSomething（）”>
按钮项目
</ion-item>
Ionicons 4.0 Premium设计的图标，适用于网络，iOS，Android和桌面应用。支持SVG和Web字体现在可用，并作为Web组件分发，大小缩小，并且全新的图标形式反映了最新的iOS和Material Design样式。
CSS变量 CSS变量是Ionic主题的核心，只需更改一些变量即可修改应用程序的整体外观和感觉，所有这些都不需要构建工具。
框架集成和兼容性 Ionic框架的过去版本主要与Angular相结合，In V4离子团队重新设计了框架，因为它是一个独立的Web组件库，集成了最新的JavaScript框架，如Angular，它现在是框架无关，意味着它可以与任何其他JavaScript框架（Vue，React，Preact等）一起使用，或者根本没有框架。由于它仍处于测试阶段，以便支持其他框架都有望在未来释放。
Ionic Framework V4是项目底层技术和功能的重大进步，它最大的优势是可以进行持续的内部改进，而无需相应的Angular框架更新。同样可以应用于Vue，React或根本没有框架。就像离子@ angular一样，我们的目标是使用传统标准在最流行的框架中轻松采用Ionic。
Ionic CLI 4.0 Ionic CLI（命令行界面）是一种为Ionic开发人员提供许多有用命令的工具。Ionic CLI是一个引擎，它提供了在生成Ionic项目时选择不同框架的选项（默认情况下为Angular）。新的CLI设计用于与Angular CLI一起工作，因此您可以充分利用这两个领域。
除了安装和更新Ionic之外，CLI还带有一个内置的开发服务器，提供强大的Cordova集成，包括livereload，构建和调试工具，生成器的自定义原理图等等。如果您是Ionic Pro成员，则可以使用CLI执行云构建和部署，以及管理您的帐户。
Ionic 中的路由离子4中引入的一个重要特性是路由的变化。Ionic 4现在使用原生角度路由，但有一些扭曲。您无需将组件直接推入离子导航，而是需要将这些组件映射到路径。应用应该在代码库中有一个离子路由器组件。此组件控制与浏览器历史记录的所有交互，并通过事件系统聚合更新，这使得支持本机构建PWA变得更加容易。对于Angular项目，请使用ion-router-outlet和Angular路由器。
延迟加载 延迟加载是Ionic框架中的一种设计模式，用于推迟组件的初始化，直到需要它为止。它通过将应用程序分成多个捆绑包并按需加载它们来提高性能并加快应用程序加载时间。
Ionic Native 5 Ionic Native 5将项目带入完全框架无关的状态，我们的组件可以在任何流行的框架中工作，或者根本没有。对于那些选择使用注射剂/提供者的人来说，Ionic Native 5需要Angular 5。 Native 5中的更改日志
- 它附带三个捆绑包，一个包含Angular（5.x +）提供程序，ES6模块和一个包含AngularJS支持的捆绑包。
- ES6和bundle发行版具有插件的静态类。
- 使用Angular的离子开发者可以选择使用注射剂，还是静态导入和使用ES6插件。
新文档
离子团队已经完全重新设计并大幅改进了Ionic Framework文档，提高了负载和导航性能，并使其更易于更新和维护。他们添加了更多示例和预览，以及更多可直接进入应用的代码段。新文档是使用Web Component编译器Stencil构建的，也是一个开源文档。
结论 Ionic 4带来了一些可靠的变化，例如使用Stencil进行内部代码重构，以及使用其他框架而不是Angular的选项。我们对进一步的模板开发非常感兴趣，并了解该特定工具将如何集成到Ionic CLI中。它仍然处于测试阶段，我们确信在稳定版本中会有更多的功能和改进。让我们希望Ionic 4能够将Ionic App Development彻底改变到另一个层次，并将蓬勃发展可以在移动平台，Web，PWA和Desktop上运行的跨平台应用程序。
网友评论