前端前沿技术

---

网站静态化

以下网站供参考：

• Gridsome【Vue】
• VuePress【Vue】
• Sapper【svelte】
• UmiJS【React】
• Gatsby【React】
• Scully【Angular】
• Compodoc【Angular】
• Metalsmith【NodeJS】
• Harpjs【NodeJS】
• Assemble【NodeJS】
• Zola【Rust】

PWA - Progressive Web APP, 渐进式 Web 应用

PWA 简介

全称：Progressive Web APP, 渐进式 Web 应用。

PWA 应用是指那些使用指定技术和标准模式来开发的 web 应用，这将同时赋予它们 web 应用和原生应用的特性。

例如，web 应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享 web 应用。

在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行，并且相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

PWA 赋予了我们创建同时拥有以上两种优势的应用的能力。

这并不是一个新概念——这样的想法在过去已经在 web 平台上通过许多方法出现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的 Firefox OS 的生态系统中离线运行和安装 web 应用已经成为了可能。

PWAs, 不但如此，更是提供了所有的甚至是更多的特性，来让 web 更加优秀。

实际上是通过 Web 技术编写出的一个网页应用，加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线缓存等功能。

解决了哪些问题?

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画及隐藏地址栏
• 实现离线缓存功能
• 实现了消息推送

PWA 的优势

PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节，请参阅 PWA 的优势。

浏览器支持情况

参考浏览器支持

参考文档

• 官网文档
• 讲讲 PWA
• pwa 技术在 vue 的使用
• Workbox
• 神奇的 Workbox 3.0
• Service Worker 生命周期
• 百度 Lavas

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

高性能

Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。

跨平台

你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的接口。

贴近前端生态

Weex 拥抱已有的 Web 生态，你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架，如 Vue 和 Rax，在未来或许还可以支持更多。

被大规模的使用

Weex 已经在许多超级 App 中大规模使用，一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台，以供 工业生产使用。

• Weex 在线文档: https://weex.apache.org/zh/
• Weex UI 文档: https://apache.github.io/incubator-weex-ui/#/cn/
• Weex AMUI 文档: https://hminghe.github.io/weex-amui/#/?id=weex-amui
• Weex Awesome: https://github.com/RodeyManager/awesome-weex

GraphQL

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

一种用于 API 的查询语言

---