Svelte.js 3 and Sapper Projects

Explain the basic syntax of dynamic attributes and how to use them. Add some examples to our current project.

   •  Briefly introduce section 2

   •  Describe the syntax and properties of dynamic attributes

   •  Use dynamic attributes in our vCard generator app

Have a first contact with Svelte’s events, focusing on DOM events.

   •  Introduce the concept of DOM events

   •  Describe how Svelte syntax gives us access to these events

   •  Add a couple examples of events to our current project

Expand on the concepts of the previous video about events.

   •  Explain how we can access the DOM events’ properties

   •  List the different kinds of event modifiers in Svelte

   •  Use the explained concepts in the app we are developing

Learn how data can flow bidirectional in Svelte with the use of two-way binding.

   •  Introduce the concept of bidirectional flow of information

   •  Specify how to implement this in Svelte

   •  Add two-way binding for elements to our vCard app

Explore the possibilities we have for the programmatic styling of elements and components.

   •  Define the concept of conditional classes and explain how Svelte implements it

   •  Discover a workaround for JavaScript variables inside CSS styles

   •  Add a conditional class to our current project

Communication upwards, that is, from child to parent component, can be achieved with the use of dispatched events.

   •  Introduce the concept of event dispatchers

   •  Explain the syntax and properties of Svelte’s event dispatchers

   •  Add event dispatchers to our current project

Bidirectional flow of information can also be achieved across components.

   •  Expand our knowledge on two-way binding with this new twist on it

   •  Go through the code changes since last video

   •  Add two-way binding between components of our app

Slots let us define a piece of content that is then filled when the component is used.

   •  Describe what slots are and the possibilities that they offer

   •  Sum up the changes of the code since the last video

   •  Add a new component that uses slots to our project

With the use of conditionally rendering, we can dynamically choose which content to display, making our Svelte apps highly reactive and user-friendly.

   •  Introduce the concept of conditional rendering

   •  Describe the numerous constructs of Svelte for conditional rendering

   •  Add conditional rendering to our vCard generator app

Whether its simple assignments or complex functions, reactive statements have the power to change dynamically according to our needs.

   •  Explain reactive statements and their syntax in Svelte

   •  Summarize the changes since last video and explain our goal for this one

   •  Implement the code changes, finish our app and wrap-up the section

For an easy win in the user experience of our app, basic transitions can go a long way improving them.

   •  Introduce our new project: Kanban-Motion

   •  Explain the basics of transitions in Svelte

   •  Add a simple transition to our new project

In order to have transitions behave the way we want them to, we need to be able to customize and adapt them to our needs.

   •  Define and describe all transition functions and their parameters

   •  Summarize the use and available easing functions

   •  Change and enhance the transitions in our application

Animating all the elements in a group is easier using the svelte/animate module.

   •  Explain how to animate with this module

   •  Go through the parameters of the flip function

   •  Add animated grouped elements to our Kanban board

These functions open a new world of possibilities when it comes to the logic and behavior of our Svelte components.

   •  Introduce the concept of lifecycle functions

   •  Explain each function along and how to use it, with examples

   •  Make use of lifecycle functions in our project

State management is important in complex applications and Svelte’s stores can help us with this challenge.

   •  Introduce this section and its outline

   •  Define and present the topic of state management

   •  Explain the type of stores available to us

Jump into practice by adding a custom store into our application and using what we learned in the previous video.

   •  Introduce the properties of custom stores

   •  Show the custom store into our app

   •  Explain how to solve a problem derived from the store

Learn about a module that lets us animate using Svelte stores.

   •  Present the svelte/motion module

   •  Define the tweened store and its parameters

   •  Define the spring store and its parameters

Connect our Kanban board to a real database in order to persist its data and make this application more usable.

   •  Define the concept of database and explain which solution we will use

   •  Show how we will interact with the database and how to create it

   •  Test our app with several test-cases related to the database

Publishing our application is easy with Svelte’s compilation and modern web hosting.

   •  Briefly discuss the importance of deployment

   •  Explain Svelte’s deploying options: SPAs and Widgets

   •  Show in code editor how to compile our app for deployment

The Sapper framework makes the development of Svelte apps easier, thanks to a lot of useful features.

   •  Present this section and its overview

   •  Introduce the main concepts behind Sapper

   •  Download the Sapper template

Knowing the structure of the Sapper framework is important in order make use of all its features and tools.

   •  Dissect the most important files of a Sapper project

   •  Adapt our Kanban Motion app into Sapper

   •  Test our Sapper project after the changes

Understanding routing is essential for the development of applications with Sapper.

   •  Explain routing and its types in Sapper

   •  Go through the code changes to add routes to our project

   •  Test the new routes in the browser

Preloading is another great feature of Sapper; which enables an important part of the development of modern web applications

   •  Introduce the preload function and how to use it

   •  Dissect the code changes used for preloading data

   •  See the new app with preloading in the browser

Testing is key to secure the correct functionality of your app. The library Cypress helps us perform these tests easily.

   •  Explain concepts of testing and the library Cypress

   •  Dissect our first test file with Cypress

   •  Run the test both with the GUI and the CLI

The easiest way of deploying our application is as a static site is to a static host. This video is about static Sapper sites and their deployment.

   •  List the characteristics of static sites and their deployment

   •  Explain how to export static Sapper sites and how to deploy them to Netlify

   •  Visit our deployed static site and check its functionality

Thanks to server-side rendering, the server can take care of the rendering of our pages. This section is about exploring this concept and deploying our app as a SSR app.

   •  Explain how SSR works and what to consider for its deployment

   •  List the steps from building to deploying our app to Now

   •  Visit our deployed SSR app and test it

Get a review of the course and a final word of gratitude towards the viewer.

   •  Summarize all the concepts learned throughout the course

   •  Give ideas and suggestions for future learning

   •  A thank you word and a goodbye message