Les Web Components par la pratique
créez vos propres components HTML ainsi que les APIs permettant de les contrôler programmatiquement.
Voir la bande annonce
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.
Votre formateur
Développeur web depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), dirigeant de la société rennaise Code Concept spécialisée en formation JavaScript Front, Back et mobiles hybrides, Samir Medjdoub a eu 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, il a ainsi pris la vague Angular 2 dès les versions bêta en 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. Il a toujours cru que comparaison était raison et a porté une égale attention à React et Redux dès 2015, puis Vue.js en 2016. Meteor et désormais Svelte.js sont les outsiders qui retiennent régulièrement son attention.
Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : les formations de la société Code Concept vous aideront à investir efficacement dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2024 !
Programme de la formation
-
PrévisualiserLes quatre standards (5:39)
-
PrévisualiserConfigurer l'environnement de développement (5:13)
-
PrévisualiserCustom Components (8:09)
-
CommencerCustom Components (suite) : Callbacks et custom methods (3:13)
-
CommencerHTML Template (8:25)
-
CommencerHTML Template (suite) (8:22)
-
CommencerShadow DOM (5:38)
-
CommencerHTML Import (2:23)
-
CommencerHériter d'un autre Web Component (4:06)
-
CommencerRécupérer les attributs d'un Web Component et surveiller leur modification (7:12)
-
CommencerCréation de la la vue de notre Web Component (5:17)
-
CommencerImplémenter la fonctionnalité de compte à rebours (6:05)
-
CommencerAfficher la valeur du compteur dans la vue (5:16)
-
CommencerMettre sur pause et arrêter le compteur (5:53)
-
CommencerRécupérer les valeurs des attributs à l'aide de getAttribute() (10:55)
-
CommencerRefactorisation et mise en lumière d'un problème lié à l'absence d'encapsulation (4:28)
-
CommencerAjout du Shadow DOM (4:51)
-
CommencerRésumé (4:59)
-
CommencerPrésentation du nouveau Web Component cc-map (3:49)
-
CommencerImporter les APIs de Google Maps (4:29)
-
CommencerCréer le Web Component cc-map (4:35)
-
CommencerAjouter une carte dans le component (11:39)
-
CommencerRéagir aux changements de l'attribut "zoom" de notre Web Component (10:07)
-
CommencerAfficher le titre passé au Web Component (4:50)
-
CommencerUtiliser un getter et un setter pour enrichir l'API de notre Web Component (7:33)
-
CommencerUtiliser un getter et un setter affectés au niveau de zoom (1:57)
-
CommencerPermettre l'ajout de markers depuis l'API de notre Web Component (9:04)
-
CommencerObtenir le google marker le plus récemment ajouté (5:16)
-
CommencerPasser un unique argument de type object plutôt que plusieurs arguments (5:00)
-
CommencerAfficher une InfoWindow (4:20)
-
CommencerObtenir une latitude et une longitude via le déplacement d'un marker (8:06)
-
CommencerPersonnaliser l'icone d'un marker (5:25)
-
CommencerRendre la carte elle-même cliquable (6:04)
-
CommencerAjouter un marker lors d'un clic sur la carte (2:20)
-
CommencerRécupérer Google Maps depuis le CDN (7:05)
-
Commencerdernières mises à jour vendredi 30 mars 2018