Svelte for Angular Programmers
Duration
3 days
Description
Thw Svelte for Angular Programmers course offers a deep dive into Svelte, a modern JavaScript framework for building user interfaces. It covers everything from setting up a development environment, understanding the principles of template reactivity, creating static and dynamic pages, to handling forms and lifecycle events. The course also explores more advanced topics such as state management, routing, error handling, and asynchronous data. Throughout the course, comparisons are made to Angular to help students understand the differences and advantages of Svelte. This course is ideal for professionals with a background in Angular who are looking to expand their skill set and learn a new framework.
Objectives
- Understand the fundamentals of Svelte and how it compares to Angular.
- Set up a development environment for Svelte and understand how it differs from Angular's development environment.
- Learn about SvelteKit and its features, including routing, server-side rendering, and unit testing.
- Create static and dynamic pages using Svelte, including understanding their structure and how to handle images, CSS, and JavaScript content.
- Understand the principles of template reactivity in Svelte and how it compares to Angular's Zone.js and Signals.
- Learn about component basics and composition in Svelte, including how to handle events and data.
- Understand how to handle forms and lifecycle events in Svelte.
- Learn about state management, routing, error handling, and asynchronous data in Svelte.
Prerequisites
All students must have Angular, JavaScript, and HTML programming experience. Experience with CSS is helpful, but not required.
Training Materials
All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students will need a free, personal GitHub account to access the courseware. Student will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.
Outline
- Introduction
- What is Svelte?
- What problem does Svelte solve?
- Svelte vs. Angular
- Svelte vs. Angular Compiler
- Svelte vs. Angular Directives
- Moving from Angular to Svelte
- Development Environment
- Requirements
- SvelteKit vs. Angular CLI
- Svelte Files vs JSX Files
- Svelte Extension for Visual Studio Code
- Run/Debug Svelte App in Visual Studio Code
- Svelte Extension for WebStorm
- Run/Debug Svelte App in WebStorm
- SvelteKit Overview
- Vite Tooling
- Development Server
- Routing
- Deployment
- Server-side rendering
- Unit Testing
- Getting Started
- Exploring the REPL
- Svelte Layout
- Svelte Page
- Svelte Component
- Svelte Architecture
- Svelte Element Directives
- Compiling Svelte Files
- Static Pages
- What is a Static Page?
- What problem do Static Pages solve?
- Static Page File Structure
- Setting Head Content
- HTML Content
- CSS Content
- Comments
- Scoped CSS
- Handling Images
- Hot Module Reloading
- Server Pre-rendering
- Page Routing
- Dynamic Pages
- What is a Dynamic Page?
- What problem do Dynamic Pages solve?
- Client-Side Rendering
- Dynamic Page File Structure
- JavaScript Content
- Using Variables
- Using Expressions
- Data Binding
- Class and Style Directive
- Event Binding
- Logic Blocks
- Debug Tag
- Template Reactivity
- Principles
- Changing Data through Assignments
- Angularive Statements
- Updating Arrays and Objects
- Compared to Angular's Zone.js and Signals
- Component Basics
- What is a Component?
- What problem do Components solve?
- Svlete Components vs Angular Components
- Calling Components vs HTML Elements
- Compared to Template Rules for Component Selectors
- Component File Structure
- Component Props
- Component Events
- Compared to Angular Inputs and Outputs
- Component Composition
- What is Component Composition?
- What problem does it solve?
- Nested Components
- Passing Data to Child Components
- Handling Events and Receiving Data from Child Components
- Component Tree Best Practices
- Event Handling
- Event Handling Element Directives
- DOM Events
- Adding Event Handlers
- In-line Handlers
- Event Modifiers
- Dispatching Component Events
- Forwarding Events
- Data binding
- Top-down data binding by default
- Communication with props and events
- Using two-way data binding
- Forms
- HTML Form Element
- Named Form Actions
- Form Validation
- Form Submission
- Progressive Enhancement
- Lifecycle
- Mount
- Destroy
- Before Update
- After Update
- Tick
- Compared to Angular useEffect Hook
- State Management
- Stores
- Writable Stores
- Auto-subscriptions
- Readable Stores
- Derived Stores
- Custom Stores
- Store Bindings
- Page Store
- Navigation Store
- Updated Store
- Routing
- What is Routing?
- What problem does Routing solve?
- Compared to Angular's Router
- Pages
- Layout
- Route Parameters
- API Routes
- Errors and Redirects
- Handling Errors and Redirects
- Error Pages
- Fallback Errors
- Redirects Compared to Angular Router's Redirects
- Asynchronous Data
- Promises compared to RxJS
- Promises & async/await
- Fetching data from a REST API
- Subscriptions
- Stores
- Conclusion