对于前端开发人员来说，最主要的工作任务就是通过代码为用户呈现优美、生动、体验极佳的页面，而UI框架在其中起到了至关重要的作用。纵观最近十几年的前端发展历程，可以简单地将前端技术在UI展示领域的发展大致归纳为3个阶段。
在第一阶段，开发人员通过浏览器的渲染API直接操作DOM来完成页面呈现和交互，典型代表就是jQuery。
在第二阶段，随着页面中内容和交互逻辑逐渐增多，依赖直接调用渲染API的方式无法应对复杂的业务场景，此时一 些设计模式和理念被引入前端领域，其中最知名的是MVC模型。著名的Backbone框架就是MVC模型的一一个实现。通过MVC模型，前端开发者初步实现了将数据与渲染解耦合。
在第三阶段，即进入2010年后，前端应用场景呈现井喷式增长，终端用户对于页面呈现的内容和交互要求逐渐增加。这推动前端技术在提升用户体验和降低开发复杂度方面的革命性创新，催生了现在大家耳熟能详的三大框架: Angular、React和Vue。从此前端进入了新时代!
此处就不赘述这三者的概念了，相信大多数开发者现在都至少使用其中一个框架。同时这三个框架也在不断优化和提升自身;目前，Vue 已经发布了3.0版本，React 的Concurrent、函数式组件、Hooks 也被越来越多地应用到业务中，Angular在PWA方面也颇有建树。那么是不是可以认为我们只需要在这三者之间做出选择就够了呢?
答案是否定的，因为技术始终是用于服务产品的，随着产品领域逐渐细分，涌现了如Web、智能手机、无线、物联网等多个细分领域，这就要求前端技术能够应对越来越精细的应用场景。要求上述三大框架覆盖所有需求是不现实的，其他技术的出现也是自然而然的了。
Svelte就是在这样的大环境下应运而生的，主要用来解决页面加载时静态资源大小的问题，通过前置的静态编译过程，最大限度压缩页面运行时需要加载的静态资源。与三大框架相比，使用Svelte组件并不需要引入一个完整的框架，因为组件需要的全部代码(可以将其理解为运行时依赖)在编译时都已注入组件中,这极大地压缩了组件。结合TreeShaking技术，通过Svelte开发的页面所需的静
态资源非常少。
《Svelte和Sapper实战》系统讲述Svelte， 全面介绍Svelte的功能特性及API。以?一个打包行李的应用程序贯穿始终;在每章讲解相关的技术后，会将技术应用于示例，逐步完善。本书附录中介绍了如何为Svelte配置ESLint、Petter、 VSCode、 Snowpack,还介绍REST服务和MongoDB的基础知识。读者可以根据自身需求，优先阅读附录部分或将其作为参考资料。
节选自《Svelte和Sapper实战》译者序
目 ? ?录
?
第Ⅰ部分 ?起步 ?
第1章 ?初识Svelte ? 2
1.1 ?Svelte介绍 ? 3
1.1.1 ?为什么选择Svelte ? 3
1.1.2 ?重新思考响应式设计 ? 7
1.1.3 ?Svelte的缺点 ? 9
1.1.4 ?Svelte原理 ? 9
1.1.5 ?Svelte“消失”了？ ? 11
1.2 ?Sapper介绍 ? 11
1.2.1 ?为什么选择Sapper？ ? 11
1.2.2 ?Sapper的工作方式 ? 13
1.2.3 ?Sapper适用的场景 ? 13
1.2.4 ?Sapper不适用的场景 ? 13
1.3 ?Svelte Native介绍 ? 13
1.4 ?Svelte与其他框架对比 ? 14
1.4.1 ?Angular ? 14
1.4.2 ?React ? 14
1.4.3 ?Vue ? 14
1.5 ?开发工具 ? 15
1.6 ?小结 ? 15
第2章 ?第一个Svelte应用程序 ? 16
2.1 ?Svelte REPL ? 16
2.1.1 ?Svelte REPL的使用 ? 17
2.1.2 ?第一个REPL应用程序 ? 18
2.1.3 ?保存REPL应用程序 ? 22
2.1.4 ?分享REPL应用程序 ? 24
2.1.5 ?REPL URL ? 24
2.1.6 ?导出REPL应用程序 ? 24
2.1.7 ?引用npm包 ? 25
2.1.8 ?REPL限制 ? 25
2.1.9 ?CodeSandbox ? 26
2.2 ?在REPL之外开发 ? 26
2.2.1 ?npx degit入门 ? 27
2.2.2 ?package.json ? 28
2.2.3 ?关键代码 ? 29
2.2.4 ?你的第一个本地Svelte应用程序 ? 31
2.3 ?奖金应用程序 ? 32
2.4 ?小结 ? 36
第Ⅱ部分 ?深入探讨Svelte
第3章 ?创建组件 ? 38
3.1 ?.svelte文件内容 ? 39
3.2 ?组件标记 ? 39
3.3 ?组件名称 ? 42
3.4 ?组件样式 ? 42
3.5 ?CSS特异性 ? 43
3.6 ?作用域样式和全局样式 ? 45
3.7 ?使用CSS预处理器 ? 47
3.8 ?组件逻辑 ? 47
3.9 ?组件状态 ? 49
3.10 ?响应式语句 ? 49
3.11 ?模块上下文 ? 52
3.12 ?构建自定义组件 ? 53
3.13 ?构建Travel Packing应用程序 ? 54
3.14 ?小结 ? 57
第4章 ?块结构 ? 59
4.1 ?使用{#if}条件逻辑 ? 59
4.2 ?使用{#each}迭代 ? 61
4.3 ?使用{#await}处理promise ? 62
4.4 ?构建Travel Packing应用程序 ? 65
4.4.1 ?Item组件 ? 66
4.4.2 ?实用函数 ? 67
4.4.3 ?Category组件 ? 68
4.4.4 ?Checklist组件 ? 70
4.4.5 ?App组件 ? 73
4.4.6 ?运行应用程序 ? 74
4.5 ?小结 ? 75
第5章 ?组件通信 ? 76
5.1 ?组件通信方式 ? 77
5.2 ?props ? 77
5.2.1 ?属性通过export传入 ? 77
5.2.2 ?属性改变时的响应 ? 79
5.2.3 ?属性类型 ? 80
5.2.4 ?指令 ? 81
5.2.5 ?表单元素中的bind指令 ? 81
5.2.6 ?bind:this ? 84
5.2.7 ?使用bind导出属性 ? 85
5.3 ?slot ? 89
5.4 ?事件 ? 90
5.4.1 ?事件派发 ? 90
5.4.2 ?事件转发 ? 92
5.4.3 ?事件修饰符 ? 92
5.5 ?context ? 92
5.6 ?构建Travel Packing应用程序 ? 94
5.7 ?小结 ? 97
第6章 ?store ? 98
6.1 ?可写store ? 98
6.2 ?可读store ? 100
6.3 ?在合适的地方定义store ? 100
6.4 ?使用store ? 101
6.5 ?派生store ? 107
6.6 ?自定义store ? 108
6.7 ?结合类使用store ? 109
6.8 ?持久化store ? 113
6.9 ?构建Travel Packing应用程序 ? 114
6.10 ?小结 ? 114
第7章 ?DOM交互 ? 115
7.1 ?插入HTML ? 115
7.2 ?action ? 118
7.3 ?tick函数 ? 119
7.4 ?实现对话框组件 ? 122
7.5 ?拖曳 ? 125
7.6 ?继续构建Travel Packing应用程序 ? 127
7.7 ?小结 ? 129
第8章 ?生命周期函数 ? 130
8.1 ?安装 ? 130
8.2 ?onMount生命周期函数 ? 132
8.2.1 ?移动焦点 ? 132
8.2.2 ?检索来自API服务的数据 ? 132
8.3 ?onDestroy生命周期函数 ? 133
8.4 ?beforeUpdate生命周期函数 ? 135
8.5 ?afterUpdate生命周期函数 ? 136
8.6 ?使用辅助函数 ? 137
8.7 ?进一步构建Travel Packing应用程序 ? 139
8.8 ?小结 ? 139
第9章 ?客户端路由 ? 140
9.1 ?手动路由 ? 140
9.2 ?hash路由 ? 148
9.3 ?使用page.js库 ? 150
9.4 ?结合page.js使用路径参数和查询参数 ? 151
9.5 ?完善Travel Packing应用程序 ? 155
9.6 ?小结 ? 156
第10章 ?动画 ? 157
10.1 ?缓动函数 ? 158
10.2 ?svelte/animation包 ? 158
10.3 ?svelte/motion包 ? 160
10.4 ?svelte/transition包 ? 164
10.5 ?fade过渡效果和flip动画效果 ? 165
10.6 ?crossfade过渡效果 ? 167
10.7 ?draw过渡效果 ? 169
10.8 ?自定义过渡效果 ? 170
10.9 ?transition与in和out ? 172
10.10 ?过渡事件 ? 172
10.11 ?为Travel Packing应用程序添加动画效果 ? 173
10.12 ?小结 ? 175
第11章 ?调试 ? 176
11.1 ?@debug标签 ? 176
11.2 ?响应式语句 ? 179
11.3 ?Svelte开发者工具 ? 179
11.4 ?小结 ? 182
第12章 ?测试 ? 183
12.1 ?使用Jest进行单元测试 ? 184
12.1.1 ?为Todo应用程序添加单元测试 ? 186
12.1.2 ?为Travel Packing应用程序增加单元测试 ? 188
12.2 ?使用Cypress执行端到端测试 ? 193
12.2.1 ?对Todo应用程序执行端到端测试 ? 194
12.2.2 ?对Travle Packing应用程序执行端到端测试 ? 196
12.3 ?无障碍可访问性测试 ? 200
12.3.1 ?Svelte compiler ? 201
12.3.2 ?Lighthouse ? 201
12.3.3 ?axe ? 204
12.3.4 ?WAVE ? 206
12.4 ?使用Storybook展示并调试组件 ? 208
12.5 ?小结 ? 216
第13章 ?部署 ? 217
13.1 ?使用HTTP服务器部署Sevlte应用程序 ? 217
13.2 ?Netlify使用 ? 218
13.2.1 ?通过Netlify页面部署应用程序 ? 218
13.2.2 ?通过Netlify命令行部署应用程序 ? 219
13.2.3 ?Netlify收费计划 ? 221
13.3 ?Vercel使用 ? 221
13.3.1 ?通过Vercel页面部署应用程序 ? 221
13.3.2 ?通过Vercel命令行部署应用程序 ? 222
13.3.3 ?Vercel收费计划 ? 222
13.4 ?Docker使用 ? 223
13.5 ?小结 ? 223
第14章 ?Svelte高级特性 ? 224
14.1 ?表单校验 ? 225
14.2 ?使用CSS框架 ? 228
14.3 ?特殊元素 ? 232
14.4 ?引用JSON文件 ? 235
14.5 ?创建组件库 ? 236
14.6 ?Web Components ? 237
14.7 ?小结 ? 241
第Ⅲ部分 ?深入探讨Sapper ??
第15章 ?你的第一个Sapper应用程序 ? 244
15.1 ?创建一个全新的Sapper应用程序 ? 245
15.2 ?使用Sapper重新开发购物应用程序 ? 247
15.3 ?小结 ? 250
第16章 ?Sapper应用程序 ? 251
16.1 ?Sapper项目的文件结构 ? 252
16.2 ?页面路由 ? 254
16.3 ?页面布局 ? 256
16.4 ?错误处理 ? 258
16.5 ?在服务端和客户端运行代码 ? 258
16.6 ?Fetch API包装器 ? 259
16.7 ?预加载 ? 259
16.8 ?预请求 ? 262
16.9 ?代码分割 ? 263
16.10 ?构建Sapper版本的Travel Packing应用程序 ? 264
16.11 ?小结 ? 267
第17章 ?Sapper服务端路由 ? 268
17.1 ?服务端路由的源文件 ? 269
17.2 ?服务端路由函数 ? 269
17.3 ?一个CRUD的例子 ? 270
17.4 ?切换至Express ? 277
17.5 ?构建Travel Packing应用程序 ? 278
17.6 ?小结 ? 284
第18章 ?使用Sapper导出静态站点 ? 285
18.1 ?Sapper的细节 ? 286
18.2 ?何时使用导出功能 ? 286
18.3 ?应用程序示例 ? 287
18.4 ?小结 ? 295
第19章 ?Sapper的离线支持 ? 296
19.1 ?service worker概述 ? 297
19.2 ?缓存策略 ? 298
19.3 ?Sapper service worker配置 ? 300
19.4 ?service worker事件 ? 301
19.5 ?在Chrome中管理
service worker ? 302
19.6 ?在Sapper服务器中开启HTTPS ? 306
19.7 ?验证离线功能 ? 307
19.8 ?构建Travel Packing应用程序 ? 308
19.9 ?小结 ? 312
第Ⅳ部分 ?Svelte和Sapper的其他相关知识
第20章 ?预处理器 ? 314
20.1 ?自定义预处理器 ? 315
20.2 ?svelte-preprocess包 ? 317
20.2.1 ?auto-preprocessing模式 ? 317
20.2.2 ?外部文件 ? 318
20.2.3 ?全局样式 ? 319
20.2.4 ?使用Sass ? 320
20.2.5 ?使用TypeScript ? 320
20.2.6 ?VS Code提示 ? 322
20.3 ?使用Markdown ? 322
20.4 ?使用多个预处理器 ? 324
20.5 ?图像压缩 ? 325
20.6 ?小结 ? 325
第21章 ?Svelte Native ? 326
21.1 ?内置组件 ? 327
21.1.1 ?展示组件 ? 327
21.1.2 ?表单组件 ? 328
21.1.3 ?行为组件 ? 328
21.1.4 ?对话框组件 ? 329
21.1.5 ?布局组件 ? 329
21.1.6 ?导航组件 ? 331
21.2 ?Svelte Native入门 ? 332
21.3 ?本地开发Svelte Native应用程序 ? 333
21.4 ?NativeScript样式实现 ? 334
21.5 ?预定义NativeScript CSS类 ? 335
21.6 ?NativeScript 主题 ? 337
21.7 ?综合示例 ? 337
21.8 ?NativeScript UI组件库 ? 353
21.9 ?Svelte Native的问题 ? 357
21.10 ?小结 ? 358
附录A ?资源 ? 359
附录B ?调用REST服务 ? 365
附录C ?MongoDB ? 368
附录D ?Svelte的ESLint配置 ? 375
附录E ?在Svelte中使用Prettier ? 377
附录F ?VS Code ? 379
附录G ?Snowpack ? 383
?