Cours
PrestaShop

Newsletter

Les WebComponents

Créer des balises HTML personnalisées et réutilisables grâce aux WebComponents

Ou s'abonner pour un accès illimité sans engagement à tout Skilleos pour 19,90€/mois. En savoir plus
chapitre

Chapitres

37

chrono

Durée

03h30 de cours en ligne

chrono

Prérequis

acces

Accès

24h/24 et 7j/7
PC/Mac, tablette et smartphone

certificat

Certificat

Délivré à la fin de la formation

1for1

Notes

4 / 5 - 2 votes

1for1

1 For 1

Un abo ou un achat sur Skilleos = Un cours offert à un bénéficiaire

Samir Medjdoub

Samir Medjdoub

Développeur depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), avec comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie, Samir Medjdoub a ainsi pris la vague Angular 2 dès les versions alpha et bêta fin 2015, celle de Node.js il y a sept années de cela et a eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : investissez dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2019.

Vous souhaitez créer des balises HTML personnalisées et réutilisables tout en étant moins dépendant des frameworks ? Vous voulez aussi créer des components en recourant uniquement aux standards du web ? Ce cours de WebComponents en ligne vous permettra de créer des custom components comme le font vos frameworks Front préférés, mais cela en vous passant desdits frameworks.

Ce cours en ligne sur les WebComponents vous permettra rapidement prendre en main les standards permettant de créer nativement des components. Ainsi, créer des balises HTML personnalisées grâce aux WebComponents sera un vrai jeu d'enfants, et vous bénéficierez d'une réutilisabilité et de performances bien meilleures. Toutefois, avant d'utiliser des surcouches au dessus des WebComponents, il est judicieux de prendre en main les quatre standards que sont Custom elements, Shadow DOM, HTML templates et HTML Imports.

À la fin du cours, vous serez capable de :

  • Comprendre ce que sont les WebComponents
  • Créer des balises HTML personnalisées et réutilisables
  • Comprendre les différentes interfaces de programmation que sont Shadow DOM, HTML Templates et Imports et Custom elements

Chapitres

LES STANDARDS PERMETTANT DE CRÉER DES WEB COMPONENTS
1
00:54
Introduction
2
05:40
Les quatre standards
3
05:14
Configurer l'environnement de développement
4
08:09
Custom Components
5
03:14
Custom Components (suite) : Callbacks et custom methods
6
08:26
HTML Template
7
08:22
HTML Template (suite)
8
05:39
Shadow DOM
9
02:23
HTML Import
10
04:07
Hériter d'un autre Web Component
CRÉER UN WEB COMPONENT PROPOSANT UNE API
11
07:12
Récupérer les attributs d'un Web Component et surveiller leur modification
12
05:17
Création de la la vue de notre Web Component
13
06:06
Implémenter la fonctionnalité de compte à rebours
14
05:16
Afficher la valeur du compteur dans la vue
15
05:53
Mettre sur pause et arrêter le compteur
16
10:55
Récupérer les valeurs des attributs à l'aide de getAttribute()
17
04:29
Refactorisation et mise en lumière d'un problème lié à l'absence d'encapsulation
18
04:52
Addingshadowdom
19
04:59
Résumé
CRÉER UN COMPONENT PROPOSANT UNE API ET INTERFAÇANT UNE LIBRAIRIE
20
03:49
Présentation du nouveau Web Component cc-map
21
04:30
Importer les APIs de Google Maps
22
04:35
Créer le Web Component cc-map
23
11:40
Ajouter une carte dans le component
24
10:07
Réagir aux changements de l'attribut "zoom" de notre Web Component
25
04:51
Afficher le titre passé au Web Component
26
07:33
Utiliser un getter et un setter pour enrichir l'API de notre Web Component
27
01:57
Utiliser un getter et un setter affectés au niveau de zoom
28
09:05
Permettre l'ajout de markers depuis l'API de notre Web Component
29
05:16
Obtenir le google marker le plus récemment ajouté
30
05:00
Passer un unique argument de type object plutôt que plusieurs arguments
31
04:21
Afficher une InfoWindow
32
08:06
Obtenir une latitude et une longitude via le déplacement d'un marker
33
05:26
Personnaliser l'icone d'un marker
34
06:05
Rendre la carte elle-même cliquable
35
02:20
Ajouter un marker lors d'un clic sur la carte
36
07:06
Récupérer Google Maps depuis le CDN
37
01:09
Conclusion


   Avis (2)

4/ 5


25 élèves suivent déjà ce cours



  • .
    Il y a 10 heures


    RAS

  • .
    Il y a 2 mois


    bien

Les WebComponents

39.00 €

close if for show price

  • langues fr