Vous avez déjà un compte client ORSYS
Se connecter
Vous êtes nouveau chez ORSYS
Créer un compte
Vous ne souhaitez pas créer de compte
Poursuivre sans me connecter

Publication date : 04/05/2024

Course : Svelte, development with the lightest and fastest JavaScript frameworks

Practical course - 3d - 21h00 - Ref. JCT
Price : 1830 € E.T.

Svelte, development with the lightest and fastest JavaScript frameworks




Cette formation permet de maîtriser Svelte, un framework JavaScript innovant, car également compilateur. Réputé plus simple et plus rapide que ses homologues, il constitue une véritable alternative pour développer rapidement et efficacement des Single Page Applications (SPA).


INTER
IN-HOUSE
CUSTOM

Practical course in person or remote class
Available in English on request

Ref. JCT
  3d - 21h00
1830 € E.T.

Download in PDF format

Share this course by email




Cette formation permet de maîtriser Svelte, un framework JavaScript innovant, car également compilateur. Réputé plus simple et plus rapide que ses homologues, il constitue une véritable alternative pour développer rapidement et efficacement des Single Page Applications (SPA).


Teaching objectives
At the end of the training, the participant will be able to:
Master Svelte's key concepts and syntax
Understanding how Svelte stands out from other frameworks
Rethinking the notion of application reactivity
Manage a Svelte application from component to deployment

Intended audience
Anyone wishing to learn about the Svelte JavaScript framework.

Prerequisites
Knowledge of JavaScript.

Practical details
Hands-on work
Creation of a film library using a third-party film API.
Teaching methods
Training alternates theory and practice. Everything we learn is put into practice.

Course schedule

1
Introducing and setting up the framework

  • Introducing Svelte.
  • Svelte versus other frameworks.
  • Examination of a use case.
  • Presentation of the "fil rouge" project: a film library.
  • Environment settings.
  • Creating an application.
  • Organization of Svelte files.
Hands-on work
Visualization of stateofjs.com site statistics. Set up the editor, set up a Svelte application and analyze the files.

2
Basic components and syntax

  • Setting up a component.
  • Use of braces.
  • Using data binding.
  • Variables and reactive methods.
  • Event processing.
  • Use of tables and objects.
  • Add styles and classes.
  • HTML insertion.
  • Control of component life cycles.
  • Component nesting.
Hands-on work
Creation of the first page of the film library with several components.

3
Communication between components

  • Using if / else / else if.
  • Use of each.
  • Add keys.
  • Communication via props and slots.
  • Transmission of a prop.
  • Set prop. default value.
  • Transmission of an object.
  • Slot usage.
  • Use of named slots.
Hands-on work
Add props and slots to customize and communicate application components.

4
Go further with events

  • When and how to use event modifiers
  • Reacting to a child component event.
  • Launch a customized event.
Hands-on work
Implementation of reactions to film thumbnail hovers (thumbnail changes) and thumbnail clicks (interface modification with display of selected film).

5
The forms

  • Form definition.
  • Setting up input bindings.
  • Definition of checkbox and radio bindings.
  • Definition of selects bindings.
  • Definition of textarea bindings.
  • Form validation.
Hands-on work
Added filters to the film listing page.

6
Blinds

  • Create and subscribe to a writable store.
  • Self-underwriting.
  • Store data update.
  • Create and subscribe to a readable store.
  • Use of derivative blinds.
  • Create and subscribe to a custom store.
Hands-on work
Addition of a general blind to the film library.

7
APIs and routers

  • About APIs.
  • Connection to a third-party API.
  • Making an API call.
  • Use of the await block.
  • Exploring different routers.
  • Example of a router.
Hands-on work
Integration of data from the third-party API "The Movie Database". Addition of a "film card" page to the film library.

8
Animations and transitions.

  • Add a transition.
  • Add animation.
Hands-on work
Improved ergonomics by adding smooth transitions to the application.
PARTICIPANTS
Anyone wishing to learn about the Svelte JavaScript framework.

PREREQUISITES
Knowledge of JavaScript.

TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.

ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.

TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.

TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.

ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.