Svelte.js – The Complete Guide (incl. Sapper.js)
-
Getting Started
-
Base Syntax & Core FeaturesModule Introduction0sUsing Curly Braces & Understanding the Core Syntax0sReactive Variables0sMore Reactivity0sBinding to Element Properties0sTwo-Way Binding Shortcut0sUsing Multiple Components0sComponents & Communication via Props0sDiving Deeper into Bindings0sUsing Self-Extending Properties0sOutputting HTML Content0sA XSS ExampleSetting Dynamic CSS Classes0sWrap Up0sUseful Resources & Links
-
Working with Conditionals & Loops
-
A Closer Look at Reactivity
-
Course Project – First StepsModule Introduction0sProject Setup & A First Component0sDifferent Ways of Mounting Components0sHow to Embed WidgetsAdding Data0sAdding a New Component (MeetupItem)0sWorking with Different Component Types0sPassing Data Into Components0sAdding a “MeetupGrid” Component0sAdding New Meetups via a Form0sCreating a “TextInput” Component0sAdding a Custom “Button” Component0sWrap Up0sUseful Resources & Links
-
Diving Deeper Into ComponentsModule Introduction0sUnderstanding the Different Component Types0sComponent Communication Overview0sEvent Forwarding0sEmitting Custom Events0sHow to Extract Event Data0sUsing Spread Props & Default Props0sWorking with Slots0sNamed & Default Slots0sExample: Opening & Closing a Modal0sUsing Slot Props0sThe Component Lifecycle – Theory0sCreation & Update Lifecycle Hooks in Action0sUsing “tick()”0sWrap Up0sUseful Resources & Links
-
Course Project – Components Deep DiveModule Introduction0sAdding Default Props0sCommunication via Custom Events0sUtilizing Slots0sCreating an “EditMeetup” Component0sCommunicating Between Components0sTime for More Slots!0sAdding a Re-Usable “Modal” Component0sFinishing the “Modal” Component0sWrap Up0sUseful Resources & Links
-
Working with Bindings & FormsModule Introduction0sTwo-Way Binding Refresher0sUnderstanding Custom Component Bindings0sRelying on Automatic Number Conversion0sBinding Checkboxes & Radio Buttons0sBinding <select< Dropdowns0sBinding to Element References0sBinding to Component References0sValidating Forms & Inputs0sWrap Up0sUseful Resources & Links
-
Course Project – Bindings & Forms
-
Managing State & Data with StoresModule Introduction0sWhat’s the Problem?0sCreating a Writable Store & Subscribing0sUpdating Store Data0sStores and Stateful & Presentational Components0sManaging Store Subscriptions0sUsing Autosubscriptions0sA Second Store!0sSubscribing for a Short Period0sUnderstanding Readable Stores0sUnlimited Power with Custom Stores0sWrap Up0sDerived Store & Store BindingsUseful Resources & Links
-
Course Project – StoresModule Introduction0sA Possible ErrorSetting Up a Store0sUsing a Custom Store0sTapping into the Store from Different Components0sAdding a “MeetupDetail” Component0sPreparing the “Edit Meetup” Form0sContinuing Work on the “Edit” Feature0sAdding a “Delete” Functionality0sAdding a “Filter” Component0sSome Final Steps0sWrap Up0sUseful Resources & Links
-
Motion, Transitions & AnimationsModule Introduction0sAnimating Values with a Tweened Store0sUsing a Spring Store Instead0sPreparing a Transition Example0sElement Transitions0sMore on Transitions0sUsing Different “in” and “out” Transitions0sAnimating Passive (Affected) Items0sDeferred TransitionsWrap Up0sUseful Resources & Links
-
Course Project – Transitions
-
Network Interaction via Http
-
Course Project – Http
-
Special Elements
-
Routing & Server-side Rendering with SapperModule Introduction0sWhat and Why?0sUnderstanding the Folder Structure0sInspecting the Web Page0sFilenames & Routes0sError & Layout Pages0sPreloading in Components0sPre-fetching Data0sMigrating the Meetup Project Files into the Sapper Project0sFetching Data on the Client Side0sPrefetching Data on the Server0sSyncing Fetched Data & the Store0sEditing & Deleting Meetups0sRendering the MeetupDetail Page0sAdding Global CSS0sWrap Up0sUseful Resources & Links
-
Deployment
-
Course Roundup
Svelte.js is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.
You’ll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.
In this course, you learn all about Svelte, how it works, its core features and how to run your final app on a real server!
Svelte.js is a tool for building highly reactive, modern user interfaces for the web – and it’s a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.
What will you learn?
What is Svelte and why would you use it?
All the core features and base syntax
How to render conditional and list content
How to write reactive and fast web applications
All about components, how to pass data around and how to create re-usable building blocks
How to efficiently manage data in your application via Svelte stores
How to reach out to a backend server and send + fetch data
How to pre-render your app on a server and improve SEO
Is this course for you?
Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.
You don’t need to know these frameworks to learn Svelte though – but if you do know them, you’ll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way!).
You need NO advanced JavaScript knowledge, basic knowledge will do.
If you’re interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn’t overlook!
What’s in the course?
Learn Svelte from scratch – zero knowledge assumed!
Theory and practice modules
A complete course project (the “meetup planner”)
Assignments and tasks
All source code is attached to lectures and modules
Who’s teaching you?
My name is Maximilian Schwarzmüller and I’m teaching a broad variety of web & mobile development topics here on Udemy. I immediately loved Svelte when I learned about it since it fills an important gap between vanilla JavaScript and frameworks like Angular, React or Vue.
It can be used to replace these frameworks or to enhance apps built with them – and I simply love lightweight apps and clean syntax rules.
What's included
- 12.5 hours on-demand video
- 25 articles
- 187 downloadable resources
- Access on mobile and TV
- Certificate of completion