Build Full-featured Frontend App with Svelte

Svelte is a new prominent JS framework exposing the “write less do more” philosophy. During this workshop, you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&A website stackoverflow.com. We will start developing from simple frontend components, later we'll connect it to a real running backend and then test it and optimize for production. Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.

  • Mar 29
    Online
    1 day
    07:00 - 10:30
    150 USD

1. Introduction & local setup - 25 mins

A little about ourselves, the program, and the goals of the workshop used tools and techniques. Setup NPM and editor of choice for all participants.

2. Why Svelte - 25 mins

History, comparison of modern frontend tools. Explanation of main concepts in Svelte, benefits of usage, community, and useful tools.

3. Setup the app and create app components - 45 mins

Before we start building, we will go over the different functionalities that will be implemented in a modern application. In this section, we will also go over the web service API and the data model.

  • Setup project (rollup starter)
  • Learn templates syntax (conditionals, loops, etc)
  • Parent-child components communication (props & events)
  • Reactive variables (labeled statements, )
  • Create a home page and question page components and forms that are used there

4 . Make your app modular with routing and add first-class UX - 40 mins

History API, push/replace state, frontend app routing. By progressively breaking down the app into components, we will build an app that not only is easier to reason about and more modular but also has code with high reusability. Integrating a Material Design UI library to add a modern look and feel.

  • Add Svelte router
  • Create several routes (basic, URL params) and pages
  • Add CSS preprocessor support via rollup plugin
  • Add UI library (material design or bootstrap)

5. Add real data and state management - 45 mins

Why state management is important. Comparison with Redux. How state in Svelte works.

  • Create readable and writable state props
  • Add data loading via Axios (first local mocks, then external backend)
  • Optional: add data caching in localStorage and serviceWorker

6. Test our app - 45 mins

Types of tests, test pyramid. What is a good test?

  • Add testing library and set up tests for several blocks of code
  • Optional: install Cypress and add E2E test with Cypress

7. Prepare for production - 45 mins

Page load performance plays a big role in SEO and affects UX. In this section, we’ll understand the methods to reduce the app loading time while maintaining its functionality. We’ll learn about the PWA approach and how to apply it to your Svelte app.

  • Optimizations available for rollup & webpack with Svelte
  • How to deploy code (Heroku, GitHub actions, Gitlab pipeline)
Mikhail Kuznetcov
Chapter lead, developer at ING

Mikhail is a developer with over 10 years of expertise in building web applications. He used a variety of frameworks, throughout his career starting with jQuery, AngularJS and Polymer; then he discovered VueJS and used it for several projects. Since 2019 he became a happy user of Svelte v3.

Besides full-stack development for enterprise Mikhail is doing open-source projects and speaks on meetups and conferences about various topics in modern web development.

Mikhail runs a local Svelte meetup group in Amsterdam.

    NDC Conferences uses cookies to see how you use our website. We also have embeds from YouTube and Vimeo. How do you feel about that?