This document discusses front-end development and web components. It begins by outlining some of the challenges of front-end development, including constant changes in technology and the need for components to work across devices and browsers. It then introduces the concepts of encapsulated, reusable, and interoperable components. Web components are presented as a solution for building such components using vanilla JavaScript. Frameworks like Polymer and lit-html are discussed as ways to more easily implement web components. The document argues that web components improve interoperability and help software last longer despite changing technologies. It demonstrates the interoperability of a sample web component across frameworks like React, Angular, and Vue.

1. WEB
COMPONENTS
AND FRIENDS
@sergicontre

2. HOLA!
My name is Sergio Contreras
Front End Software Engineer at BBVA.
You can find me at @sergicontre
2

3. 1.
FRONT END
DEVELOPMENT
What is the
current context
of Front-End
development?
3

4. “The challenge associated with
front-end development is that
the tools and techniques used to
create the front-end of a website
change constantly and so the
developer needs to constantly be
aware of how the field is
developing.
4

5. FRONT-END CHALLENGE LIST
▸ Constant change technology
▸ Multiple tools / techniques
▸ Constant update of the developers
▸ Different resolutions
▸ Different browsers
▸ Different devices
▸ Performance
▸ ...
5

6. INGREDIENTS
LIST
6

7. YOU WANT JAVASCRIPT,
HTML AND CSS TO WORK
TOGETHER
7

8. YOU END UP WITH A MESS
8

9. 2.
CHALLENGE I
Create
encapsulated
component
9

10. ENCAPSULATED COMPONENT
10

11. 3.
CHALLENGE II
Create
reusable
component
11

12. COMPONENT MODEL
FRAMEWORKS / LIBRARIES
12

13. 4.
CHALLENGE III
Create
interoperable
component
13

14. ONE COMPONENT MODEL
FOR ALL FRAMEWORKS / LIBS
14

15. 5.
WEB
COMPONENTS
What are Web
Components?
15

16. WEB
COMPONENTS
16
“Web components are a set of web platform APIs that
allow you to create new custom, reusable,
encapsulated HTML tags to use in web pages and web
apps. Custom components and widgets build on the
Web Component standards, will work across modern
browsers, and can be used with any JavaScript
library or framework that works with HTML.”

17. QUESTION
17
Can I write whole apps with vanilla Web
Components?
Yes! You can, but maybe it’s a bit tedious

18. WEB COMPONENT EXAMPLE
CODE
18

19. QUESTION
19
Can I write whole apps with vanilla Web
Components?

20. QUESTION
20
Can I write whole apps with vanilla Web
Components?
Yes! You can, but maybe it’s a bit
tedious. So, Polymer library brings Web
Components into the mainstream

21. 6.
POLYMER
What are
Polymer?
21

22. POLYMER
22
“The Polymer library provides a set of features for
creating custom elements. These features are
designed to make it easier and faster to make custom
elements that work like standard DOM elements”

23. POLYMER EXAMPLE CODE
23

24. ROAD TO WEB COMPONENTS
24

25. QUESTION
25
Polymer is dead and will not continue?
https://goo.gl/qbKE2i

26. “Polymer's success is to die some
day, because this means that it
helped us in the past to use in a
simple way technology that was
not yet ready.
26

27. 7.
LIT HTML
What are
lit-html?
27

28. LIT-HTML
28
“lit-html: An efficient, expressive, extensible HTML
templating library for JavaScript.
lit-html is not a framework, nor does it include a
component model. It focuses on one thing and one
thing only: efficiently creating and updating DOM”

29. LIT-HTML EXAMPLE CODE
29

30. LITELEMENT
30
“A simple base class for creating custom elements
rendered with lit-html
LitElement uses lit-html to render into the element's
Shadow DOM and adds API to help manage element
properties and attributes. LitElement reacts to
changes in properties and renders declaratively using
lit-html.”

31. LITELEMENT EXAMPLE CODE
31

32. LITELEMENT BASE CLASS & API
▸ Setup properties with observable properties
support
▸ React to changes and ensuring changes in
rendering
▸ Declarative rendering using lit-html
▸ API
▹ render()
▹ shouldUpdate(changedProperties)
▹ update(changedProperties)
▹ firstUpdated(changedProperties)
▹ updateComplete
▹ ... 32

33. 8.
ARGUMENTS Why use it?
33

34. INTEROP
WITH POPULAR FRAMEWORKS
AND LIBRARIES
34

35. PRIMITIVES / STANDARDS
ARE DESIGNED SO WE CAN
BUILD ON TOP OF THEM
35

36. WEB COMPONENTS
BROWSER SUPPORT
36
HTML
<template>
26 13 22 8
Shadow DOM 53 Considering 63 10.1
Custom
Elements
54 Considering 63 10.1
ES Modules 61 61 60 10.1

37. COMPATIBLE WITH
MAINSTREAM TOOLS
37

38. FRAMEWORK / LIBRARY
APPROXIMATIONS SIZE
(GZipped versions)
38
v 3.0.0 v 6.0.3 v 16.5.2 v 2.5.17 v 3.0.5 V 0.6.0
113.6 K 38.2 K 31.8 K 30.3 K
11.3 K -
17.7K
5.4 K

39. 9.
#MY OPINION Why use it?
39

40. “If you have many projects /
applications / development teams
on different technology stacks, my
recommendation is to use Web
Components.
40

41. “Have a catalog of components that
are interoperable.
41

42. “use frameworks / libraries to
orchestrate and structure your
application.
Use Web Components to build
reusable UI components.
42

43. “Being close to the standards, my
software will live much longer and
better prepared for the constant
changes in technology.
43

44. “Technology is the same for everyone,
but it differentiates you how to use
it
44

45. 10.
INTEROP
45

46. INTEROPERABILITY CONCEPT
46
Is a characteristic of a product or system, whose
interfaces are completely understood, to work
with other products or systems, at present or in
the future, in either implementation or access,
without any restrictions

47. INTEROP REQUIREMENTS
47
- The framework/lib must be prepared to
say a component that the state must
have
- The framework/lib must be prepared to
listen to the changes that occur in my
component

48. INTEROP AND COMPONENT
LIFECYCLE
48
constructor ngOnInit constructor created
connectedCallback ngAfterContentChecked componentDidMount mounted
disconnectedCallback ngOnDestroy componentWillUnmount destroyed
attributeChangedCallback ngOnChanges componentDidUpdate updated

49. DEMO CHALLENGE
49
https://github.com/sergicontre/tinder-item
<tinder-item>

50. INTEROP SUMMARY
50

51. Place your screenshot here
VUE
POLYMER
51
Place your screenshot here
https://goo.gl/aDT9ZX

52. Place your screenshot here
REACT
POLYMER
52
Place your screenshot here
https://goo.gl/cvdCwT

53. Place your screenshot here
ANGULAR
POLYMER
53
Place your screenshot here
https://goo.gl/Fpzf89

54. THANKS!
Any questions?
You can find me at @sergicontre
54▸ Presentation template by SlidesCarnival