Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Primer on Web Components in APEX

1,125 views

Published on

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

Published in: Technology
  • Be the first to comment

A Primer on Web Components in APEX

  1. 1. Dimitri Gielis A Primer on Web Components in APEX www.apexRnD.be dgielis.blogspot.com @dgielis dgielis@apexRnD.be
  2. 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. 3. http://dgielis.blogspot.com @dgielis
  4. 4. Demo
  5. 5. Adding a slider (normal way)
  6. 6. Adding a slider (web components way)
  7. 7. Web Components
  8. 8. HTML Templates <template id=“”> </template>
  9. 9. Creating a Template <template id="mytemplate"> <img src="" alt="image"> <div class="comment"></div> </template>
  10. 10. 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)
  11. 11. 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);
  12. 12. Shadow DOM div #document-fragment span
  13. 13. Creating a Shadow DOM
  14. 14. Custom Elements <my-element> </my-element>
  15. 15. Creating a Custom Element
  16. 16. Creating a Custom Element
  17. 17. Custom Elements ❖ Name must contain a dash ❖ Its prototype must extend HTMLElement
  18. 18. HTML Imports <link rel=“import” href=“part.html”>
  19. 19. End of theory
  20. 20. Examples
  21. 21. https://customelements.io
  22. 22. http://component.kitchen
  23. 23. https://elements.polymer-project.org
  24. 24. http://builtwithpolymer.org
  25. 25. How to get started
  26. 26. Demo
  27. 27. Web Components & APEX
  28. 28. Browser Support
  29. 29. 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)
  30. 30. Lessons learned ❖ Web Components (frameworks) actively being developed ❖ Components not always backwards/forwards compatible
  31. 31. 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#/
  32. 32. Recap ❖ What are Web Components ❖ Examples of Web Components ❖ How to get started and use them in APEX
  33. 33. Q&A www.apexRnD.be dgielis.blogspot.com @dgielis dgielis@apexRnD.be
  34. 34. ❖ Looking for consulting, training and development in Oracle Application Express (APEX)? ❖ Contact : www.apexRnD.be ❖ Mail : info@apexRnD.be Consulting, Development, Training

×