【Svelte和Sapper实战】

对于前端开发人员来说，最主要的工作任务就是通过代码为用户呈现优美、生动、体验极佳的页面，而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