Web components and friends
•
0 likes•183 views
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.
Report
Share
Web components and friends
- 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
- 7. YOU WANT JAVASCRIPT, HTML AND CSS TO WORK TOGETHER 7
- 8. YOU END UP WITH A MESS 8
- 12. COMPONENT MODEL FRAMEWORKS / LIBRARIES 12
- 14. ONE COMPONENT MODEL FOR ALL FRAMEWORKS / LIBS 14
- 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
- 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
- 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”
- 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
- 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”
- 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.”
- 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
- 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
- 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