VanillaJS & the Web Platform, a match made in heaven?
0 likes32 views
Le document présente une discussion sur l'évolution de la plateforme web et l'utilisation de VanillaJS en 2023, mettant en avant les composants web comme technologie clé pour les applications. Il souligne l'importance de l'évolution constante des navigateurs et fournit des ressources pour les développeurs concernant les tests et les meilleures pratiques. En conclusion, la plateforme web moderne, intégrant CSS, HTML et JavaScript, est mise en avant comme un outil essentiel pour les développeurs.
![VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023
Web Components : list
custom element names
console.log(
[...new Set([].map.call(
document.querySelectorAll('*'),
el => el.nodeName.toLowerCase()))
].filter(
customElements
.get.bind(customElements)
)
)](https://image.slidesharecdn.com/very-tech-trip-web-platform-bertrand-2023-230202102327-a30b9303/85/VanillaJS-the-Web-Platform-a-match-made-in-heaven-15-320.jpg)
VanillaJS & the Web Platform, a match made in heaven?
- 1. VanillaJS et la Web Platform, le couple de l'année? Bertrand Delacrétaz Principal Scientist, Adobe Member of the Board of Directors, Apache Software Foundation Very Tech Trip, Paris, Février 2023 Photos are from Adobe Stock unless indicated otherwise slides version 2023-02-01b
- 3. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 The Web Platform https://www.ecma-international.org/publications-and-standards/standards/ecma-262/ https://www.w3.org/Style/CSS/specs.en.html https://html.spec.whatwg.org/ https://developer.mozilla.org/en-US/ CURIA VISTA - 1999 www.parlament.ch
- 4. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 The Web Platform : the Evergreen Web https://www.w3.org/2001/tag/doc/evergreen-web/ Constant evolution is fundamental to the web's usefulness Browsers are a part of the web and therefore they must be continually updated.
- 5. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 The Web Platform : resources Mozilla Developer Network (MDN) https://developer.mozilla.org/en-US/ web.dev brought to you by the Google Chrome DevRel team https://web.dev/ web-platform-tests.org cross-browser test suite for the Web Platform stack caniuse.com Browser support tables for modern web technologies
- 6. Vanilla JS ?
- 7. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Vanilla JS ? + Web API https://developer.mozilla.org/en-US/docs/Web/API
- 8. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 JavaScript Frameworks: why? components examples best practices tools developers events training documentation well-known modern portable conferences
- 9. No more Web Frameworks?
- 10. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Web Platform, Web Components? components examples best practices tools developers events training documentation well-known modern portable conferences The Web Platform and Web Components provide all 99% 93.42% of this! long-lived learning standards
- 11. Web Components
- 12. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Web Components ? MDN says: Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. https://developer.mozilla.org/en-US/docs/Web/Web_Components custom elements shadow dom HTML templates encapsulated JavaScript & CSS progressive enhancement custom events polyfills
- 13. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Web Components : who ? https://github.blog/2021-05-04-how-we-use-web-components-at-github/ https://vitemadose.covidtracker.fr/ https://opensource.adobe.com/spectrum-web-components/
- 14. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Web Components : example no JavaScript:
- 15. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Web Components : list custom element names console.log( [...new Set([].map.call( document.querySelectorAll('*'), el => el.nodeName.toLowerCase())) ].filter( customElements .get.bind(customElements) ) )
- 17. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 TodoMVC using Web Components https://github.com/adobe/web-platform-zoo https://opensource.adobe.com/web-platform-zoo/examples/web-components/todomvc/
- 18. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 TodoMVC: todo-list component Usage:
- 19. Testing
- 20. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 End-to-end testing: Playwright ? https://playwright.dev/ Cross-browser, cross-platform, cross-language
- 21. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 Testing the TodoMVC Web Components Playwright test report:
- 22. Coda
- 23. VanillaJS et la Web Platform :: Bertrand Delacrétaz, Adobe, 2023 @bdelacretaz https://fosstodon.org/@bdelacretaz https://grep.codeconsult.ch/ Web Components modern and forward-looking the Web Platform is back! Evergreen Web modern css modern html modern JavaScript https://blog.developer.adobe.com/the-web-platform-is-back-fa5752fabdfc long-lived learning standards