即将到来的Ionic4以及它使用的Stencil会产生什么影响？

Ionic Team最近宣布在明年即将发布的Ionic4会全面采用Stencil来实现标准Web Components。
Ionic4因为很多原因所以是一次重大的升级，但是最牛逼的地方在于它第一次实现了与框架无关，不再必须使用Angular，你可以使用Vue，React，JQuery或者干脆不使用任何框架来进行Ionic开发，这一切都是因为可以使用Stencil来构建标准web components（chrome和safari在2017年实现了完全支持）。
不过这并不意味着Ionic要抛弃Angular，以后的Ionic应用还是会默认是Angular结构的，但是不同的是你可以有更多的选择了。
如果要用一句话来概括Stencil——“一个构建现代Web组件的工具”。Stencil使用一些特定的语法来构建components:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-first-component',
  styleUrl: 'my-first-component.scss'
})
export class MyComponent {

  // Indicate that name should be a public property on the component
  @Prop() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

有几点必须要说：

虽然看上去它的语法和你在Ionic/Angular里的用法相差无几，但是Stencil的components的强大性是Ionic/Angular无法媲美的。
使用它构建的结果是标准Web组件，跟Stencil没有关系了，不需要依赖于任何框架可以在支持的浏览器上运行。

如果你不太理解什么是web components，解释一下，它跟Angular里的component相差不大，只是它可以直接在浏览器上运行，不需要任何多余的框架。在Angular里，你可以创建一个组件然后再任何地方这样使用：

<my-cool-component></my-cool-component>

你可以使用标准web components做相同的事情。如果需要了解更多关于web components的内容，可以看这里。

Stencil的使用对于Ionic开发者来说无疑是令人激动的，因为它会带来更好的性能提升，而且它还意味着你可以脱离Angular使用Ionic组件。Stencil的宣布导致很多人困惑它会对我们正在开发的Ionic应用产生什么影响，如果你担心这个，大可不必。因为Stencil带来的改变是看不见的，它只会在背后让你的应用性能更好，而且对你继续开发应用没有任何影响，你也不用做任何事情。

Ionic团队的Justin Willis回答的这些问题对了解更多Stencil的信息很有帮助。在这里给大家翻译出来。

一句话概述一下什么是Stencil?
Stencil 是一个可以使构建web components变得更快而且使组件的体积更小的库。
使用Web Components有哪些好处？
体积更小：省去了自定义的组件实现，自定义的生命周期事件实现等等。它全部都可以直接在浏览器构建。
可复用性：因为web components构建于浏览器，因此它们可以被用于任何地方，任何框架或者根本没有框架。
简单化：不用学习特定的框架。只要你了解基本的js和DOM，那么你就可以实现web组件。
Ionic开发者需要学习如何使用Stencil吗？
不需要。如果你现在有使用Ionic-angular的应用，当你升级到4版本之后，它会使用ionic components，也就是经过Stencil构建的web组件。
Stencil的使用会对Ionic-angular的未来版本产生什么影响？
影响几乎无处不在，因为到时候Ionic的Ionic组件就是可以到处运行的web components，这意味着你可以使用任何你喜欢的框架或者不用框架就可以享受我们很赞的，构建好的，设计好的beautiful的组件。
我们将不受框架改变所带来的影响。因为我们所有的组件都是完全独立于框架的，未来的ionic-angular会变得更快，因为当Angular数据变化的时候我们不需要改变我们的组件了。
什么时候Ionic能适用于别的框架（例如Recact，Vue）？
我们在使用web components，所以我们没有必要去做一个ionic-react或者ionic-vue。事实上情况是这样的：“你可以使用ionic components在任何地方，包括在React, Preact, Vue等等”。因为这些web组件可以不需要框架运行，我们没有必要为别的框架做特定的适应工作。我们之后会有一些demo展示如何做到这些。
即使这些ionic-react 和ionic-vue没有必要，那么有没有计划开发和ionic-angular类似的库呢？
我们还在做决定，不过开发ionic-react或者ionic-preact其他什么的多少有些不切实际。但是，从技术角度，特别是React，我们会有些库使React和web components更好的融合在一起。毕竟React使用web组件的时候在Edge浏览器有很多问题。

总结
Stencil是一个令人激动的新开发工具，不过有一点，如果你对Web组件没什么兴趣，你大可以一如既往的开发，就当做不知道Stencil的存在，你只需要享受它给Ionic带来的性能提升。
相信随着Ionic4的到来，Ionic在国内将吸引更多的开发者，不过具体的升级效果还是等4正式发布之后，由实践证明。

即将到来的Ionic4以及它使用的Stencil会产生什么影响？

猜你喜欢