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.
Dimitri Gielis
A Primer on Web
Components in APEX
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be
Dimitri Gielis
❖ Founder & CEO of APEX R&D
❖ 17+ years of Oracle Experience (OCP & APEX Certified)
❖ Oracle ACE Director
❖...
http://dgielis.blogspot.com @dgielis
Demo
Adding a slider
(normal way)
Adding a slider
(web components way)
Web Components
HTML Templates
<template id=“”>
</template>
Creating a Template
<template id="mytemplate">
<img src="" alt="image">
<div class="comment"></div>
</template>
Template
❖ Not rendered (hidden to DOM)
❖ Scripts don’t run, audio doesn’t play, …
❖ Templates can be placed anywhere
❖ Te...
Activating a Template
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelect...
Shadow DOM
div
#document-fragment
span
Creating a Shadow DOM
Custom Elements
<my-element>
</my-element>
Creating a Custom Element
Creating a Custom Element
Custom Elements
❖ Name must contain a dash
❖ Its prototype must extend HTMLElement
HTML Imports
<link rel=“import” href=“part.html”>
End of theory
Examples
https://customelements.io
http://component.kitchen
https://elements.polymer-project.org
http://builtwithpolymer.org
How to get started
Demo
Web Components & APEX
Browser Support
Polyfills to the resque
❖ Snippets/Library of code that provide the technology that the
browser should provide natively
❖ ...
Lessons learned
❖ Web Components (frameworks) actively being developed
❖ Components not always backwards/forwards compatib...
References
❖ Eric Bidelman
❖ http://java.dzone.com/articles/introduction-web-components
❖ http://www.html5rocks.com
❖ http...
Recap
❖ What are Web Components
❖ Examples of Web Components
❖ How to get started and use them in APEX
Q&A
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be
❖ Looking for consulting, training and development in Oracle
Application Express (APEX)?
❖ Contact : www.apexRnD.be
❖ Mail...
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
A Primer on Web Components in APEX
Upcoming SlideShare
Loading in …5
×

A Primer on Web Components in APEX

1,092 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

×