Teknologisk Institut

Svelte & Svelte Kit

Beskrivelse

Svelte is a new approach to reactive Front End Frameworks. 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.
>> Available in Danish <<

Svelte placerede sig højt i State of JavaScript-undersøgelsen fra 2019, og det var med god grund.

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.

Key takeaway
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
Sapper

Sapper udvider Svelte med en router, kodeopdeling, offlinesupport, rendering på serversiden osv.

Indhold

Intro

Why use Svelte?
What is Svelte?

Main

Language constructs for Svelte
EcmaScript 202X (JavaScript): ...%%%

... The relevant features for Vue.js
Spread operator
Arrow functions
Object destructuring
More...
Option: TypeScript

Data binding

Render root
Content
Attributes
Handling events
Event modifiers
Styling
HTML Tags

Conditional rendering

If
Else
Else-If

List rendering

Each
Await

Reactivity

Reactive assignments, declarations and statements
Updating Arrays and Objects

Bindings

Inputs: Text, Numeric, Checkbox, Group
Single and Multiple Select
Other bindings
This

Component Interaction

Properties
Declaring Props
Default Values
Spread Props

Events

Component events
Event forwarding
Component Bindings
Nested Components

Starting a project

Templates
Rollup and Webpack

Lifecycle

Mounting
Destroying
Updates
Ticks

Stores

Writable, Readable, Derived and Custom Stores
Auto-subscriptions
Bindings

Transitions

Fade
Fly
Slide
Draw

Motion

Tweened
Spring
Animations
Actions

Classes

Class directive

Slots

Basics
Fallback
Names
Props

Context API

getContext
setContext

Module context

Sharing code

Special Svelte Elements

Self
Component
Window
Window Bindings
Body
Head
Options

Developer Experience

Debugging
DevTools
Storybook
Testing

Sapper

Templates
Routing
Client API
Preloading
Layouts
Server-Side Rendering
Stores
Prefetching

Appendix 1: Specials components

Virtual List
Scroller

Materiale
Kursusmaterialet vil have mere end 100 eksempler på alle de anvendte teknologier. Øvelserne er designet til at få kursisterne til at tænke selv, frem for at blive ledt igennem materialet. Det gør det nemmere at huske tingene.

Kommentar
Kurset kan følges måde på Mac- og Windows-maskiner med Visual Studio (kode) eller i din foretrukne editor. Kurset afholdes på engelsk.

Form ved virtuelt afholdelse
Du tilgår kurset via internettet fra din egen computer, stabil forbindelse er vigtig.
Du logger på via det tilsendte link, hvor vores underviser sidder klar til at gennemgå kurset live med en gruppe deltagere

Underviser
Rick er seniorkonsulent og underviser fra Holland. Han har over 25 års professionel erfaring med at arbejde i små og store organisationer samt organisationer, der er i kraftig vækst. Hans passion er enkelhed, velskrevet kode og teamdynamik. Han er specialiseret i front-end-teknologier, og han taler ofte om disse emner ved internationale begivenheder.

Forstå fordelene ved frameworket Svelte
Svelte er en ny tilgang til reaktive front-end-frameworks. Det bruger kompilering til at sørge for en hurtig runtime-ydeevne, hvor konkurrerende frameworks skal bruge langsommere løsninger i browsere.

Svelte har stadig alle de fordele, du forventer, såsom reaktivitet, komponenter, brugervenlighed osv, og Svelte placerede sig højt i State of JavaScript-undersøgelsen fra 2019, og det var med god grund.

Svelte Kit udvider Svelte med en router, kodeopdeling, offlinesupport, rendering på serversiden osv.

Deltagerprofil
Kurset henvender sig til dig, der er professionel softwareudvikler med kendskab til JavaScript. En vis viden om webteknologier som HTML og CSS er nyttig.

Lær at bruge, starte og vedligeholde Svelte- og Svelte Kit-projekter på egen hånd. På kurset bliver du introduceret til Svelte samt Svelte Kit. Du lærer fordelene ved Svelte i forhold til andre frameworks, og hvordan du bruger det sammen med JavaScript.

Lær om Svelte and JavaScript
Lær om Data binding, Conditional rendering og List rendering
Forstå Reactivity, Bindings og Component interaction
Bliv klogere på Project setup, Component Lifecycle og Stores
Lær om Transitions & Motion, Slots og Developer workflow
Bliv introduceret til Svelte Internals og Svelte Kit

Form
Kurset kan følges både på Mac- og Windows-maskiner med Visual Studio (kode) eller i din foretrukne editor. Kurset afholdes på engelsk.

Form ved virtuel afholdelse
Du tilgår kurset via internettet fra din egen computer, stabil forbindelse er vigtig.
Du logger på via det tilsendte link, hvor vores underviser sidder klar til at gennemgå kurset live med en gruppe deltagere

Materiale
Kursusmaterialet vil have mere end 100 eksempler på alle de anvendte teknologier. Øvelserne er designet til at få kursisterne til at tænke selv, frem for at blive ledt igennem materialet. Det gør det nemmere at huske tingene.

Indhold