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

2.
Web Platform?

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)
)
)

16.
TodoMVC
Using Web Components

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