Courses and Conferences

DTI Main Reception

Do you need help?

  • Gregersensvej 8
  • 2630 Taastrup
Google MapsApple MapsRejseplanen
  • Forskerparken Fyn, Forskerparken 10F
  • 5230 Odense M
Google MapsApple MapsRejseplanen
  • Teknologiparken Kongsvang Allé 29
  • 8000 Aarhus C
Google MapsApple MapsRejseplanen
  • NordsøcentretPostboks 104
  • 9850Hirtshals
Google MapsApple MapsRejseplanen
  • Gammel Ålbovej 1
  • 6092Sønder Stenderup
Google MapsApple MapsRejseplanen

Svelte & Svelte Kit

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 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
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

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
Rick Beerendonk

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.

Do you have any course related questions, please contact