Udemy

Platform

Français

Language

Web Development

Category

Les Web Components par la pratique

Créez vos propres Web Components et les APIs permettant de les contrôler programmatiquement pour enrichir vos web apps

4.70 (21 reviews)

Students

3.5 hours

Content

Jun 2018

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive SkillShare Offer
Unlimited access to 30 000 Premium SkillShare courses
40%OFF ANNUAL MEMBERSHIP

What you will learn

Etre à la pointe de l'évolution majeure que représentent les Web Components en apprenant à créer vos propres components utilisables dans vos application web


Description

Les Web Components vous permettent de créer des custom components comme le font vos frameworks Front préférés. Mais en se passant desdits frameworks, les Web Components permettent une réutilisation et des performances bien meilleures. Cette amélioration des performances constatées lors de l'utilisation de custom components est précieuse dans le contexte d'une PWA. Enfin, si vous souhaitez utiliser les Web Components avec un framework, c'est également possible.

Les Web Components, c'est pour quand ? Pour maintenant, en tous cas pour 2018. Un indice fort : Ionic les a déjà adoptés par l'intermédiaire de Stencil. Et ce n'est pas le genre de virage pris sur un coup de tête. L'autre framework qui facilite la création des Web Components est Polymer.
Mais avant d'utiliser des surcouches au dessus des Web Components, il est judicieux de prendre en main les quatre standards que sont Custom elements, Shadow DOM, HTML templates et HTML Imports.

L'approche sera orienté projets et vous montrera comment créer :
- un component simple
- des component héritant d'un autre component créé par vous-même ou par un autre développeur
- un component paramétrable via des attributs accessibles aux développeurs qui utiliseront ledit component 
- un component avec une API, qui permettra aux autres développeurs d'utiliser cette API depuis leur code JavaScript

Les Web Components permettent de faire nativement ce que seuls permettaient jusqu'à présent de faire frameworks et librairies. C'est une évolution majeure du web que vous pouvez suivre dès maintenant grâce à cette formation.


Screenshots

Les Web Components par la pratique
Les Web Components par la pratique
Les Web Components par la pratique
Les Web Components par la pratique

Content

Les standards permettant de créer des Web Components

Les quatre standards

Configurer l'environnement de développement

Custom Components

Custom Components (suite) : Callbacks et custom methods

HTML Template

HTML Template (suite)

Shadow DOM

HTML Import

Hériter d'un autre Web Component

Créer un Web Component proposant une API

Récupérer les attributs d'un Web Component et surveiller leur modification

Création de la la vue de notre Web Component

Implémenter la fonctionnalité de compte à rebours

Afficher la valeur du compteur dans la vue

Mettre sur pause et arrêter le compteur

Récupérer les valeurs des attributs à l'aide de getAttribute()

Refactorisation et mise en lumière d'un problème lié à l'absence d'encapsulation

Ajout du Shadow DOM

Résumé

Créer un component proposant une API et interfaçant une librairie

Présentation du nouveau Web Component cc-map

Importer les APIs de Google Maps

Créer le Web Component cc-map

Ajouter une carte dans le component

Réagir aux changements de l'attribut "zoom" de notre Web Component

Afficher le titre passé au Web Component

Utiliser un getter et un setter pour enrichir l'API de notre Web Component

Utiliser un getter et un setter affectés au niveau de zoom

Permettre l'ajout de markers depuis l'API de notre Web Component

Obtenir le google marker le plus récemment ajouté

Passer un unique argument de type object plutôt que plusieurs arguments

Afficher une InfoWindow

Obtenir une latitude et une longitude via le déplacement d'un marker

Personnaliser l'icone d'un marker

Rendre la carte elle-même cliquable

Ajouter un marker lors d'un clic sur la carte

Récupérer Google Maps depuis le CDN

Bonus

Coupons vers des formations complémentaires


Reviews

V
Vincent14 February 2021

Très bonne formation sur les web components. Il est possible de l'adapter avec open street maps, petit challenge que je me suis ajouté en suivant le cours: https://github.com/Raigyo/web-components


1583842

Udemy ID

3/6/2018

Course created date

8/7/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram