AC3432
Introduction to Svelte Training
Svelte is a JavaScript library for building user interfaces that offers an alternative approach to traditional frameworks like React and Vue. Instead of running in the browser, Svelte operates at build time, directly manipulating the DOM for enhanced performance and efficiency. This Svelte course teaches students how to effectively use templates, blocks, reactivity, components, event handling, and data binding to create dynamic, interactive, and performant Svelte applications.
Course Details
Duration
3 days
Prerequisites
Students must have object-oriented programming experience. Some experience with JavaScript is helpful.
Skills Gained
- Grasp the fundamental concepts of Svelte, including its setup requirements, components, and overall architecture
- Effectively utilize templates, blocks, and reactivity to create dynamic and interactive UIs
- Incorporate components and event handling mechanisms to build modular and responsive applications
- Understand the nuances of two-way data binding and determine its appropriate usage
- Develop and customize reusable events to streamline event management
- Implement custom stores to manage application state effectively
- Integrate seamlessly with existing libraries to expand the functionality of your Svelte applications
Course Outline
- What is Svelte?
- Setup
- Requirements
- Development environment
- Svelte and IDEs
- Getting started
- Exploring the REPL
- Svelte in a page
- Svelte as components
- Svelte architecture
- Uses a compiler
- Outputs imperative code
- Reactive updates to state and props
- Setup
- Templates and Reactivity in Svelte
- Using variables
- Simple event binding
- Blocks
- Reactivity
- Principles
- Changing data
- Dealing with references
- Managing HTML
- Getting debugging information
- Component Basics
- Components and files
- CSS
- Scoping
- Dynamically assigning classes
- State
- Props
- Loops and keys
- Conditionals
- Simple asynchronous actions
- Event Handling
- Adding event handlers
- In-line handlers
- Event modifiers
- Dispatching component (custom) events
- Forwarding events
- Data Binding
- Top-down data binding by default
- Communication with props and events
- Using two-way data binding
- Svelte and Forms
- Lifecycle
- onMount
- onDestroy
- beforeUpdate / afterUpdate
- tick
- Actions
- Component-level mixins
- Akin to custom lifecycle methods
- Customizing reusable events
- Working with libraries
- State Management
- Stores
- Modeled on subscriptions
- Read-only stores
- Derived stores
- Customized stores
- Conclusion
Upcoming Course Dates
