Kurser

Kursusadministration

Brug for hjælp?

  • 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 & Sapper

Svelte er en ny tilgang til reaktive Front End Frameworks. Det bruger kompilering til at tilbyde hurtig runtime performance, hvor konkurrerende frameworks har brug for langsommere in-browser løsninger. Svelte har stadig alle de fordele, du kan forvente, ligesom reaktivitet, komponenter, brugervenlighed osv. Når du har gennemført kurset, vil du være klar til selvstændigt at starte og vedligeholde Svelte- og Sapper-projekter. Undervisningen foregår på engelsk.

The course is held in English.

Svelte made a high entry in 2019's State of JavaScript survey and for a good reason.

Prerequisites

Professional software developer with knowledge of Javascript. Some knowledge of web technologies like HTML and CSS is helpful.

Outcome

  • 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 extends Svelte with a Router, code-splitting, offline support, server-side rendering, etc.

Content

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

Material

Material will have more than 100 examples of all the technologies used. Exercises are target to make the participants think instead of being directed, to achieve better memorization.

Comment

Course can be followed on both Mac and Window machines using Visual Studio Code or your editor of choice.

Instructor

Rick is a senior consultant and trainer from The Netherlands. He has over 20 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, well-written code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events.

Har du faglige spørgsmål, så kontakt:
Andre kigger også på