Web components
Download as PPTX, PDF0 likes120 views
Web components are a collection of standards enabling developers to create reusable HTML, CSS, and JavaScript components for use in web applications, facilitating faster development and reduced duplication. This document discusses integrating web components with Drupal, comparing them with traditional modules, and outlines a potential migration from Drupal 6/7 to Drupal 8. It emphasizes the benefits of adopting web components in improving efficiency and frontend experience as Drupal evolves towards better component-based theming.
Web components
- 1. Welcome to the World of Web Components
- 2. Index ● Introduction ● Why Web Components ● Examples ● Modules vs Web Components ● Drupal Connect ● Migrating from Drupal 6/7 to Drupal 8 ● Conclusion
- 3. ● Adhering with existing web standards, web components are nothing but a collection of technologies combined to allow developers to create reusable components(bundles of HTML, CSS, JavaScript). They let us effectively describe the implementation of HTML elements that already exist for the web. ● Similar to the component-based frameworks like Vue and React, web components lead us to create component-based applications natively in the browser. Introduction
- 4. With these basics in check, we will walk through... ● The process of how web component can ease the process with suitable examples ● Introduce techniques to integrate web components with Drupal ● Discuss the comparison between Drupal modules and web components in modern web development.
- 5. Why Web Components? When a design is to be development phase, the first step of the front end process is to break down the design into components. It is very much possible that the style of an article can be one of the components that occurs on multiple pages. Thus, a web component for styling can be utilised to obtain a standard style on all pages. In this process, when similar requirements are bundled, they lead to faster application and reduce duplication of work. Design In development phase Components Eg: header, footer, images, etc. Web components To obtain a standard style on all page
- 6. Examples ● For creating custom elements, Polymer can provide a set of features. ● An open source lightweight web component library, Slim.js, provides data-binding and extended capabilities for components. ● Stencil, an open source compiler, can generate standards- compliant web components. ● Hybrids, a UI library, can create Web Components with a simple and functional API. ● LitElement adds API to help manage element properties and attributes.
- 7. Modules Vs Web Components Autonomous units made up of components Act as a group of reusable codes containing more than one element Eg: header, footer, articles, and sections Eg: unordered lists, quotes, cards, tables, etc Each one has a special style and function to create an independent whole Assimilated in different ways with other components to build a different program
- 8. Drupal Connect Drupal.org provides for about 17,000 modules available to download for Drupal-powered sites As an emerging web industry, web components replace the layout systems, template engines, and endless tpl files
- 9. Migrate from Drupal 6/7 to Drupal 8 ● Display suite, a redefined list of layouts, allows you to take full control over how your content is displayed using a drag and drop interface in Drupal ● With the decrease in its requirement on the module side, companies are scaling up to Drupal 8 to decrease the complexity of the sites along with opening up pathways to a more fun and progressive programming. ● At the same time, the workflow is improving and getting out of the shell of Drupal 6/7. Further, the complexity of the Drupal sites on the backend via hybrid and headless sites is also on a downfall, making an easy transition towards Drupal 8.
- 10. How to Use Web Components in Drupal? ● As an emerging web industry, web components replace the layout systems, template engines, and endless twig files. In this futuristic approach, Drupal supports Polymer, a powerful JavaScript library, for building multiple component engines and creating simple reusable and documented templates. ● It also utilizes the web component entity type so that can save after parsing html files it finds, making Drupal aware of all the polymer components it finds.
- 11. You can also use vanilla JavaScript, HTML and CSS to write web components. However, web components can only be used with HTML skills and in back-end templating languages like Twig. When we adopt web components in line with Drupal's principle to support established and emergent standards, the proposed resolution is: ● To create a proof of concept project with Web Components using vanilla JavaScript. This can be used as a basis for related issues and decisions. ● To decide on if you want to commit to and adopt Web Components
- 12. Conclusion ● With several open issues related to component based theming and front-end frameworks, Web Components are very much a possible resolution in Drupal. ● As Drupal 9 is just around the corner, drupalers await the big leap forward for UX with better JavaScript and component-based theming. Till then, Drupal 8 and its features can execute all your website requirements.
- 13. Talk to Drupal experts, ping us at hello@opensenselabs.com to get the best of Drupal and augmented reality for your future businesses.
- 14. THANK YOU