Svelte and Sapper in Action

For front-end web developers familiar with the basics of HTML, CSS, and JavaScript.



Svelte and Sapper in Action is a comprehensive guide to building web apps with Svelte and Sapper. You'll dive straight into coding a complete travel packing app as you learn to write, compile, and organize Svelte components for your app's UI. From there, you'll master Svelte's awesome state management model and learn to use Sapper for simplified page routing, creating static sites, and providing offline support with Service Workers. By the time you're done, you'll be able to build web applications that are easier to understand, offer great UX, and don't compromise on SEO.





Creating Svelte applications and components
Communicating between Svelte components
Routing between pages in both Svelte and Sapper
Adding animation to components
Debugging, testing, and deploying applications
Implementing and invoking REST services in a Sapper app
Exporting a Sapper app as a static site

Imagine web apps with fast browser load times that also offer amazing developer productivity and require less code to create. That's what Svelte and Sapper deliver! Svelte pushes a lot of the work a frontend framework would handle to the compile step, so your app components come out as tight, well-organized JavaScript modules. Sapper is a lightweight web framework that minimizes application size through server-rendering front pages and only loading the JavaScript you need. The end result is more efficient apps with great UX and simplified state management.



Rather than loading a framework like Angular, Vue, or React into the browser, Svelte compiles your components into tiny, well-organized JavaScript modules. That means your app loads lightning fast and runs even faster, in part because there's no need to load "just-in-case" framework code. Svelte also streamlines your UI development with a host of powerful features such as reactive statements, two-way data binding, stores, and context. The Sapper framework pairs perfectly with Svelte for efficient server-side rendering, code splitting, and API development.