Svelte & Sapper

Svelte made a high entry in 2019's State of JavaScript survey and for a good reason. Svelte is a new approach to reactive Front End Frameworks. It uses compilation to offer fast runtime performance, where competing frameworks need slower in-browser solutions. Svelte still offers all the benefits you can expect, like reactivity, components, ease of use, etc. Sapper extends Svelte with a Router, code-splitting, offline support, server-side rendering, etc

What you will learn

  • Svelte and JavaScript
  • Data binding
  • Conditional rendering
  • List rendering
  • Reactivity
  • Bindings
  • Component interaction
  • Project setup
  • Component Lifecycle
  • Stores
  • Transitions & Motion
  • Slots
  • Developer workflow
  • Svelte Internals
  • Sapper

The course material will have more than 100 examples of all the technologies used. Exercises are target to make the students think instead of being directed, to achieve better memorization. At the end of the course the students should be ready to independently start and maintain Svelte and Sapper projects.

Prerequisite:

Professional software developer with knowledge of Javascript. Some knowledge of web technologies like HTML and CSS is helpful.
Course can be followed on both Mac and Window machines using Visual Studio Code or your editor of choice.

Content:

Intro:

  • Why use Svelte?
  • What is Svelte?

Language constructs for Svelte

  • EcmaScript 202X (JavaScript): The relevant features for Vue.js
  • Spread operator
  • Arrow functions
  • Object destructuring
  • More...
  • Option: TypeScript

Data binding

  • Render root
  • Content
  • Attributes
  • Handling events
  • Event modifiers
  • Styling
  • HTML Tags

Conditional Rendering

  • If
  • Else
  • Else-if

List Rendering

  • Each
  • Await

Reactivity

  • Reactive assignments, declarations and statements
  • Updating Arrays and Objects

Bindings

  • Inputs: Text, Numeric, Checkbox, Group
  • Single and Multiple Select
  • Other bindings
  • This

Component Interactions

  • Properties
    • Declaring Props
    • Default Values
    • Spread Props
  • Events
    • Component events
    • Event forwarding
  • Component Bindings
  • Nested Components

Starting a Project

  • Templates
  • Rollup and Webpack

Lifecycle

  • Mounting
  • Destroying
  • Updates
  • Ticks

Stores

  • Writable, Readable, Derived and Custom Stores
  • Auto-subscriptions
  • Bindings

Transitions

  • Fade
  • Fly
  • Slide
  • Draw

Motion

  • Tweened
  • Spring
  • Animations
  • Actions

Classes

  • Class directive

Slots

  • Basics
  • Fallback
  • Names
  • Props

Context API

  • getContext
  • setContext

Module Context

  • Sharing Code

Special Svelte Elements

  • Self
  • Component
  • Window
  • Window Bindings
  • Body
  • Head
  • Options

Developer Experience

  • Debugging
  • DevTools
  • Storybook
  • Testing

Sapper

  • Templates
  • Routing
  • Client API
  • Preloading
  • Layouts
  • Server-Side Rendering
  • Stores
  • Prefetching

Appendix

Appendix 1: Special components

  • Virtual
  • List Scroller

 

Rick Beerendonk - instructor of the course

Rick is a senior consultant and trainer from The Netherlands. He has over 20 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, well-written code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events. Rick have teached and talked about React since 2014.

Other relevant courses

10. June
3 days
Classroom
17. June
3 days
Classroom
18. May
2 days
Classroom