Web components, polymer and aligning drupal's destiny
Download as PPTX, PDF1 like186 views
The document discusses the use of web components in various applications, highlighting their benefits such as separation of concerns and framework interoperability. It details how the ELMS:LN project employs web components, particularly in teaching and learning environments, and outlines the integration process with Drupal. Relevant links for further resources on web components and their applications are also provided.
Web components, polymer and aligning drupal's destiny
- 2. elmsln.org
- 4. What is ? Idea Domain
- 9. NGDL E Image ©2015 Buttercups Training, used with permission.
- 10. Image ©2010 Daniel Diaz, DeviantArt.com http://danimix1983.deviantart.com/art/Ironman-184550435
- 11. Polymer helps us build web components
- 12. The Web Components spec
- 13. Not pattern lab (but similar concept)
- 14. Not Angular or React (again, similar concepts)
- 16. <awesome-explosion size=“tiny”> <awesome-explosion size=“small”> <awesome-explosion size=“big”> <awesome-explosion size=“epic”>
- 17. <awesome-explosion color=“blue”> <awesome-explosion color=“yellow”> <awesome-explosion color=“red”> <awesome-explosion color=“purple”>
- 19. Web components
- 21. Ok, but what uses Web Components?
- 22. Google Earth built on web components
- 23. YouTube.com/new built on web components
- 24. YouTube.com/new built on web components
- 25. ELMS:LN is loaded with Web Components
- 34. Cons of this approach • Browser Support
- 35. Pros of this approach • Separation of concerns ✅ • “Headless” theming ✅ • Unidirectional data flow ✅ • Component architecture ✅ • Design Documentation ✅ • Framework Interoperability 😱
- 37. FRAMEWORK INTEROPERABILITY • Drupal ✅ • GravCMS ✅ • Home grown ✅ • Static generators ✅ • Joomla ✅ • Wordpress 😱
- 38. LRN Web Components for Teaching & Learning
- 39. So where did Drupal go?
- 40. Web components module bridges Drupal
- 41. Render articles through a hero component
- 42. Create the elmsln-hero web component
- 43. Create the elmsln-hero web component
- 44. Create the elmsln-hero web component
- 45. Place the component in scope of drupal
- 46. Turn on the web components module
- 47. Find the elmsln-hero viewmode
- 49. Render content through elmsln-hero viewmode
- 50. Drupal + web components = ♥️
- 51. Webcomponents: One Page App integration
- 52. Place “app” in a module/apps directory
- 53. Place “app” in a module/apps directory
- 54. Add ”app_integration” to manifest.json
- 56. How the App knows to talk to Drupal
- 57. Seeing the XHR via source-path
- 60. Return json
- 62. Manifest providing a block
- 63. Drag drop upload example
- 64. 3 little Drupal functions away from pure PHP
- 66. Relevant links: • https://www.webcomponents.org/ • https://www.drupal.org/project/webcomponents • https://www.polymer-project.org/ • https://drupal.psu.edu/blog • https://www.elmsln.org/
Editor's Notes
- #10: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #11: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #16: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #17: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #18: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #19: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #21: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #27: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #28: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #29: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #30: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #31: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #32: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #33: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317
- #34: https://www.w3.org/TR/2016/WD-low-vision-needs-20160317