Web components are the "next" big thing in web development. This presentation will go over the concepts with a lot of demos and integration points in Oracle Application Express (APEX).

1. Dimitri Gielis
A Primer on Web
Components in APEX
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be

2. Dimitri Gielis
❖ Founder & CEO of APEX R&D
❖ 17+ years of Oracle Experience (OCP & APEX Certified)
❖ Oracle ACE Director
❖ “APEX Developer of the year 2009” by Oracle Magazine
❖ Presenter at Oracle Conferences (OOW, ODTUG, OGh, UKOUG, …)

3. http://dgielis.blogspot.com @dgielis

5. Demo

7. Adding a slider
(normal way)

11. Adding a slider
(web components way)

13. Web Components

15. HTML Templates
<template id=“”>
</template>

16. Creating a Template
<template id="mytemplate">
<img src="" alt="image">
<div class="comment"></div>
</template>

17. Template
❖ Not rendered (hidden to DOM)
❖ Scripts don’t run, audio doesn’t play, …
❖ Templates can be placed anywhere
❖ Templates can be nested (but are not automatically activated)

18. Activating a Template
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

19. Shadow DOM
div
#document-fragment
span

21. Creating a Shadow DOM

22. Custom Elements
<my-element>
</my-element>

23. Creating a Custom Element

24. Creating a Custom Element

25. Custom Elements
❖ Name must contain a dash
❖ Its prototype must extend HTMLElement

26. HTML Imports
<link rel=“import” href=“part.html”>

27. End of theory

28. Examples

29. https://customelements.io

30. http://component.kitchen

31. https://elements.polymer-project.org

32. http://builtwithpolymer.org

33. How to get started

35. Demo

36. Web Components & APEX

37. Browser Support

38. Polyfills to the resque
❖ Snippets/Library of code that provide the technology that the
browser should provide natively
❖ Two common libraries:
❖ Polymer (by Google)
❖ X-Tag (by Mozilla)

39. Lessons learned
❖ Web Components (frameworks) actively being developed
❖ Components not always backwards/forwards compatible

40. References
❖ Eric Bidelman
❖ http://java.dzone.com/articles/introduction-web-components
❖ http://www.html5rocks.com
❖ https://css-tricks.com/modular-future-web-components/
❖ http://slides.com/jasonmayes/introduction-to-web-
components#/

41. Recap
❖ What are Web Components
❖ Examples of Web Components
❖ How to get started and use them in APEX

42. Q&A
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be

43. ❖ Looking for consulting, training and development in Oracle
Application Express (APEX)?
❖ Contact : www.apexRnD.be
❖ Mail : info@apexRnD.be
Consulting, Development, Training