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.
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 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.