再看2019大前端技术趋势，Web OS概念正落地

 

稿件来源：阿里云开发者社区

 

大前端

2018 年的事儿特别多，从 React v16 普及，到 jQuery 被 GitHub 下掉完成阶段性历史使命，在唏嘘之外，版本帝 AngularJS 又发布了V6 和 V7 两个版本。这些其实都不算啥大新闻，反观三大框架，写法越来越像，越来越贴近 WebComponents 标准，而周边应用层面的封装已经开始指数级增长。小程序是今年最火的技术，接连出现，快应用也想分一杯羹。PWA 进入稳定期，尤其是 PWA 桌面版，可以让我们更好的看清楚 PC 桌面版开发的全貌。

移动端还是以强运营为主，各大公司都开始不再 All in 移动，开始重视多端并进，到了开始拼细节的阶段了。TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有的这一切都在暗示，浏览器即操作系统，你能想象到未来前端的样子么？下面跟着我一一进行解读吧。

三大框架标准化

有朋友吐槽：“Vue 的特点就是上手快，初期相当好用，但如果接手一个别人写的 Vue 项目，再和 React 对比一下，你会感谢 React 的”。但当 Vue 3.0 发布之后，估计他就不会这样说了。因为 Vue 3 的 Class API 和 React 的写法几乎是一模一样的，这个改动不是 Proxy 和 TypeScript，而是支持原生 Class 的写法。你用 Class 来写，那代码和 React 写法几乎是一模一样的！

import Vue from 'vue'



class App extends Vue.Component {

  count = 0



  up() {

    this.count++

  }



  down() {

    this.count--

  }



  render() {

    return (

      <div>

        <h1>{this.count}</h1>

        <button onClick={() => this.up()}>+</button>

        <button onClick={() => this.down()}>-</button>

      </div>

    )

  }

}



Vue.render(<App />, document.body as HTMLElement)

从上面的讨论可以看出，前端三大框架已经趋于平稳化、标准化，在我看来未来是 WebComponents 的。

WebComponents 是规范，最早最知名的一个是 Google 主推的 JavaScript 库 Polymer，它可帮助我们创建自定义的可重用 HTML 元素，并使用它们来构建高性能、可维护的 App。在 I/O 大会上，Google 推出了 Polymer 3.0，Polymer 3.0 致力于将 Web 组件的生态系统从 HUML Imports 转移到 ES Modules，包管理系统将支持 npm，这使你更容易将基于 Polymer 的 Web 组件和你喜欢的工具、框架协同使用。

 <script src="node_modules/@webcomponents/webcomponents-loader.js"></script>

  <script type="module">

    import {PolymerElement, html} from '@polymer/polymer';



    class MyElement extends PolymerElement {

      static get properties() { return { mood: String }}

      static get template() {

        return html`

          <style> .mood { color: green; } </style>

          Web Components are <span class="mood">[[mood]]</span>!

        `;

      }

    }



    customElements.define('my-element', MyElement);

  </script>



  <my-element mood="happy"></my-element>

另外还有 2 个项目具有一定的参考价值：

1.Rax 也提供了一个名为 atag 的 UI WebComponents 库。

2.LitElement 是一个简单的轻量级的快速创建 WebComponents 的基类，可以理解成是 Polymer 最小的实现版本。

LitElement 主要的特性包括 WebComponent 生命周期模型支持和单向的数据绑定模型。它遵守 WebComponents 标准，使用 lit-html 模块这个快速的 HTML 渲染引擎定义和渲染 HTML 模板。最重要的是它对浏览器兼容性非常好，对主流浏览器都能有非常好的支持。由于 LitHtml 基于tagged template，结合 ES6 中的 template，使得它无需预编译、预处理，就能获得浏览器原生支持，并且扩展能力更强，性能更好。

import { LitElement, html } from '@polymer/lit-element';



// Create your custom component

class CustomGreeting extends LitElement {

  // Declare properties

  static get properties() {

    return {

      name: { type: String }

    };

  }

  // Initialize properties

  constructor() {

    super();

    this.name = 'World';

  }

  // Define a template

  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}



// Register the element with the browser

customElements.define('custom-greeting', CustomGreeting);

是不是看着更眼熟了？

《三国演义》里有这样一句：“话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。”

前端从 2014 年到 2017 年是混战期，得益于 Node.js 的辅助加成，外加各种前端优秀的创意和实践，使得 React/Vue/Angular 三足鼎立。无论 React 发布 V16，增加 Fiber 和 Hooks，还是 Vue 3.0 发布，其实最终都是朝着 W3C WebComponents 标准走。一言以蔽之，Follow 标准是趋势，如果能够引领标准，那将是框架的无上荣耀。

我们可以参考一下技术成熟度曲线（Hype Cycle -Wikipedia），这个曲线把技术发展分成五个步骤：

【科技诞生的促动期】->【过高期望的峰值】-> 【泡沫化的底谷期】 -> >【稳步爬升的光明期】 -> 【实质生产的高原期】。

从前端现在的热度来看，应该是处于从第三阶段【泡沫化的底谷期】到第四阶段【稳步爬升的光明期】的爬坡过程，创新不会那么多，更多的是偏于应用层的内容。

对于当下的前端发展情况，我其实是有隐忧的。当年 Java 世界曾经搞各种 GUI，创造了 MVC 模式，结果没火，没想到到了 Web 开发领域，MVC 成了基本约定。之后