We provide virtual course about Svelte & Svelte Kit. Svelte is the fastest reactive Front-End Framework with that satisfies its users, see State of JavaScript survey. Svelte is a new approach to reactive Front End Frameworks.
Course description:
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 from a modern framework, like reactivity, components, ease of use, stores, etc. Svelte Kit 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
• Svelte Kit
Course outline:
Module 1 - Intro:
• Why use Svelte
• What is Svelte
Module 2 - Language constructs for Svelte:
• EcmaScript 202X (JavaScript): The relevant features for Vue.js
• Spread operator
• Arrow functions
• Object destructuring
• More...
• Option: TypeScript
Module 3 - Data binding:
• Render root
• Content
• Attributes
• Handling events
• Event modiers
• Styling
• HTML Tags
Module 4 - Conditional Rendering:
• If
• Else
• Else-if
Module 5 - List Rendering:
• Each
• Await
Module 6 - Reactivity:
• Reactive assignments, declarations and statements
• Updating Arrays and Objects
Module 7 - Bindings:
• Inputs: Text, Numeric, Checkbox, Group
• Single and Multiple Select
• Other bindings
• This
Module 8 - Component Interactions:
• Properties
• Declaring Props
• Default Values
• Spread Props
• Events
• Component events
• Event forwarding
• Component Bindings
• Nested Components
Module 9 - Starting a Project:
• Templates
• Rollup and Webpack
Module 10 - Lifecycle:
• Mounting
• Destroying
• Updates
• Ticks
Module 11 - Stores:
• Writable, Readable, Derived and Custom Stores
• Auto-subscriptions
• Bindings
Module 12 - Transitions:
• Fade
• Fly
• Slide
• Draw
Module 13 - Motion:
• Tweened
• Spring
• Animations
• Actions
Module 14 - Classes:
• Class directive
Module 15 - Slots:
• Basics
• Fallback
• Names
• Props
Module 16 - Context API:
• getContext
• setContext
Module 17 - Module Context:
• Sharing Code
Module 18 - Special Svelte Elements:
• Self
• Component
• Window
• Window Bindings
• Body
• Head
• Options
Module 19 - Developer Experience:
• Debugging
• DevTools
• Storybook
• Testing
Module 20 - Svelte Kit:
• Routing
• Layouts
• Server-Side Rendering
• Prefetching and Prerendering
Module 21 - Appendix 1 - Special components:
• Virtual List
• Scroller
Instructor: Rick Beerendonk
Rick is a senior consultant and trainer from The Netherlands. He has over 25 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, wellwritten code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events.
Target audience:
Anyone who wants course about Svelte & Svelte Kit
Prerequisites:
• 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.
Language:
• English course material, english speaking instructor
Course material:
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 Svelte Kit projects.