Svelte. js is somewhat like a new generation, multi-functional tool of writing Javascript that enables the writing of clear and understandable plain code, which is later compiled into extremely effective code by the browser. This course, “Svelte.js - The Complete Guide (incl. Sapper.js),” is a step-by-step guide on using Svelte and building reactive web applications with a fast-performing GUI. New components are created, data is maintained, and communication with backend servers is performed; in general, small and optimized JavaScript pieces, ready for deployment, are produced.
From a beginner in web development to someone who has worked with web development frameworks such as React, Angular or Vue, adding a tool such as Svelte to your belt will be very valuable. This course is aimed at assisting you in constructing fast-loading, high-performing user interfaces, all with little code. If you are considering building new reactive, fast web apps, then it is worth your time to look at SvelteJS, which seems to be a viable option in this area!
In the introduction to ‘Svelte.js - The Complete Guide (incl. Sapper.js),’ you do not need to know any programming languages or have any coding experience; however, elementary knowledge of JavaScript suffices. It goes without saying that video viewers do not need prior experience with SvelteJS or other JS frameworks/libraries.
Svelte.js - The Complete Guide (incl. Sapper.js) Table of Contents:
- Introduction (02:39)
- Why Svelte? (07:13)
- What is Svelte? (04:29)
- Join our Online Learning Community (00:22)
- Setting up a First App & the Course Project (11:09)
- Writing Some Svelte Code (07:26)
- Code Outline (04:48)
- How To Get The Most Out Of The Course (03:27)
- Course Resources (00:54)
- Module Introduction (03:55)
- Using Curly Braces & Understanding the Core Syntax (05:36)
- Reactive Variables (05:48)
- More Reactivity (02:09)
- Binding to Element Properties (04:16)
- Two-Way Binding Shortcut (01:41)
- Using Multiple Components (08:30)
- Components & Communication via Props (03:45)
- Diving Deeper into Bindings (06:00)
- Using Self-Extending Properties (01:10)
- Outputting HTML Content (03:32)
- A XSS Example (00:13)
- Setting Dynamic CSS Classes (04:15)
- Time to Practice: The Basics (1 question)
- Wrap Up (01:16)
- Useful Resources & Links (00:01)
- Module Introduction (00:49)
- Using "if" Statements in HTML (05:25)
- If, Else & Else-if (04:27)
- Outputting Lists with "each" (08:05)
- "Each", "Else" & Extracting the Index (02:11)
- Lists & Keys (09:55)
- Time to Practice: Conditionals & Loops (1 question)
- A Closer Look at List Keys (04:16)
- Wrap Up (00:36)
- Useful Resources & Links (00:02)
- Module Introduction (00:58)
- Updating Arrays & Objects Immutably (02:29)
- Understanding Event Modifiers (05:04)
- Using Inline Functions (03:11)
- Wrap Up (00:44)
- Useful Resources & Links (00:02)
- Module Introduction (01:18)
- Project Setup & A First Component (08:41)
- Different Ways of Mounting Components (05:07)
- How to Embed Widgets (00:37)
- Adding Data (03:35)
- Adding a New Component (MeetupItem) (04:18)
- Working with Different Component Types (03:32)
- Passing Data Into Components (05:37)
- Adding a "MeetupGrid" Component (04:25)
- Adding New Meetups via a Form (09:24)
- Creating a "TextInput" Component (11:08)
- Adding a Custom "Button" Component (05:58)
- Wrap Up (02:20)
- Useful Resources & Links (00:02)
- Module Introduction (01:43)
- Understanding the Different Component Types (01:40)
- Component Communication Overview (03:01)
- Event Forwarding (04:52)
- Emitting Custom Events (04:54)
- How to Extract Event Data (02:27)
- Using Spread Props & Default Props (06:56)
- Working with Slots (06:25)
- Named & Default Slots (03:30)
- Example: Opening & Closing a Modal (03:18)
- Using Slot Props (05:26)
- The Component Lifecycle - Theory (04:53)
- Creation & Update Lifecycle Hooks in Action (07:27)
- Using "tick()" (09:18)
- Wrap Up (00:56)
- Useful Resources & Links (00:02)
- Module Introduction (00:34)
- Adding Default Props (03:22)
- Communication via Custom Events (11:16)
- Utilizing Slots (05:11)
- Creating an "EditMeetup" Component (07:56)
- Communicating Between Components (03:45)
- Time for More Slots! (03:21)
- Adding a Re-Usable "Modal" Component (07:05)
- Finishing the "Modal" Component (03:29)
- Wrap Up (00:37)
- Useful Resources & Links (00:02)
- Module Introduction (00:34)
- Two-Way Binding Refresher (02:46)
- Understanding Custom Component Bindings (06:05)
- Relying on Automatic Number Conversion (02:55)
- Binding Checkboxes & Radio Buttons (04:53)
- Binding
- Binding to Element References (05:16)
- Binding to Component References (02:49)
- Validating Forms & Inputs (06:42)
- Wrap Up (00:58)
- Useful Resources & Links (00:02)
- Module Introduction (00:33)
- Exploring Different Validation Solutions (02:31)
- Adding Validation & Error Output to the "TextInput" Component (03:36)
- Adding Some Validation Logic (03:24)
- Finishing "TextInput" Validation (07:00)
- Validating the Overall Form (02:50)
- Improvements & Wrap Up (03:16)
- Useful Resources & Links (00:02)
- Module Introduction (01:03)
- What's the Problem? (03:41)
- Creating a Writable Store & Subscribing (05:34)
- Updating Store Data (04:35)
- Stores and Stateful & Presentational Components (01:56)
- Managing Store Subscriptions (03:52)
- Using Autosubscriptions (02:49)
- A Second Store! (06:48)
- Subscribing for a Short Period (03:48)
- Understanding Readable Stores (08:45)
- Unlimited Power with Custom Stores (07:56)
- Wrap Up (01:21)
- Derived Store & Store Bindings (00:27)
- Useful Resources & Links (00:02)
- Module Introduction (01:13)
- A Possible Error (00:11)
- Setting Up a Store (03:00)
- Using a Custom Store (08:09)
- Tapping into the Store from Different Components (05:06)
- Adding a "MeetupDetail" Component (12:33)
- Preparing the "Edit Meetup" Form (05:09)
- Continuing Work on the "Edit" Feature (09:13)
- Adding a "Delete" Functionality (03:22)
- Adding a "Filter" Component (08:48)
- Some Final Steps (02:36)
- Wrap Up (00:48)
- Useful Resources & Links (00:02)
- Module Introduction (00:53)
- Animating Values with a Tweened Store (06:54)
- Using a Spring Store Instead (08:20)
- Preparing a Transition Example (03:38)
- Element Transitions (06:30)
- More on Transitions (05:17)
- Using Different "in" and "out" Transitions (01:30)
- Animating Passive (Affected) Items (02:50)
- Deferred Transitions (00:08)
- Wrap Up (00:47)
- Useful Resources & Links (00:02)
- Module Introduction (01:03)
- Animating the Modal (03:26)
- Animating the Meetup Items (04:53)
- Animating the "Favorite" Badge & Wrap Up (01:25)
- Useful Resources & Links (00:02)
- Module Introduction (01:32)
- Adding a REST API (02:44)
- Sending Data via a POST Request (06:58)
- Showing a Loading Indicator & Sending Correct Data (03:16)
- Fetching & Transforming Data (04:12)
- Things to Consider (02:48)
- Using the "await" Block (03:35)
- Http + A Store (05:34)
- Wrap Up (00:59)
- Useful Resources & Links (00:02)
- Module Introduction (00:34)
- Storing Meetups on a Server (09:16)
- Fetching & Transforming Data (04:53)
- Adding a Loading Spinner (05:44)
- Updating via PATCH (06:32)
- Sending "Favorite" Updates & Deleting Data (03:56)
- Fixing the Order of Items (01:09)
- Adding Error Handling (07:13)
- Wrap Up (00:47)
- Useful Resources & Links (00:02)
- Module Introduction (00:35)
- Dynamic Components (07:22)
- Recursive Components (06:10)
- Accessing Windows, Body & Head (06:45)
- Cross-Component Scripts (05:38)
- Useful Resources & Links (00:02)
- Module Introduction (00:46)
- What and Why? (04:58)
- Understanding the Folder Structure (02:53)
- Inspecting the Web Page (02:20)
- Filenames & Routes (06:45)
- Error & Layout Pages (02:16)
- Preloading in Components (05:12)
- Pre-fetching Data (06:31)
- Migrating the Meetup Project Files into the Sapper Project (06:45)
- Fetching Data on the Client Side (09:14)
- Prefetching Data on the Server (06:12)
- Syncing Fetched Data & the Store (03:32)
- Editing & Deleting Meet
Who is this course for?
- This is for those learning JavaScript in their first year or those learning second year and want to have highly performant frontend applications.
- Individuals synced with current JS FW and sought basic information about a simple, ready-for-production framework.
![[LEGACY] Angular - The Complete Guide - Maximilian Schwarzmüller](https://tutlibrary.com/filemanagercontent/files/1/searchsmall/780-banner.png)
![ReactJS - The Beginner Masterclass [NEW] (Learn ReactJS From Basics to Advanced)](https://tutlibrary.com/filemanagercontent/files/1/searchsmall/467-banner.png)
