nanarinote

Appearance

客户端构建 ​

关于框架

本笔记只记录基础用法，详细的框架用法请左转其官方文档。

Web Apps ​

过去的三大框架

  • Angular
  • Vue
  • React

借助它们的工具链可以快速构建 Web Apps，以 vue 为例

vue.js 本身是客户端脚本，即可以在浏览器直接 script 标签引入。

其脚手架@vue/cli 提供的是开发服务器，可以将单文件组件(.vue以及.jsx或.tsx)编译后打包成引入 vue.js 的单页应用。

在以前，脚手架一般基于 webpack，而现在往往是 Vite 等。

框架和库的差别主要在于交出控制，vue.use 方法支持注入依赖，

可以注入官方提供的路由插件 vue-router，官方推荐的状态集中管理插件 vuex，和一些 vue3 的 ui 库：

Web Components ​

.vue后缀的单文件组件和 vue 框架强绑定了。而原生其实支持不和框架绑定的 Web Components。

Web Components 由三种技术组成

  • Custom Elements 自定义标签
  • Shadow DOM 隔离样式和行为
  • templates and slots

Web Components 的构建也有三大框架

  • Solid
  • Svelte
  • Lit

Svelte 不止能构建 Web Apps，也可以构建 Web Components，

后续 vue 单文件组件可能也能编译为 Web Components

Progressive Web Apps ​

PWA 是可以被浏览器安装到桌面的 Web Apps，权限比 Web Apps 来的更大

  • 手机应用配置(Web App Manifest) 可以通过 manifest.json 文件配置，使得可以直接添加到手机的桌面上。

  • 离线加载与缓存(Service Worker & Cache API) 可以通过 Service Worker + HTTPS + Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。

  • 消息推动与通知(Push&Notification) 实现实时的消息推送与通知

  • 数据及时更新(Background Sync) 后台同步，数据及时更新

Desktop Application ​

框架主要有

  • NW.js
  • Electron

借助 nodejs，桌面应用也可以由 html css js 来构建。

优点：

  • 开发周期短
  • 跨平台
  • 学习成本低
  • 维护成本低

缺点：

  • 打包后体积大

vscode、clash 等软件都是 Electron 构建的

NWjs 更适合游戏