Throughout the history of software development, one value which has established itself as a constant is that of code reusability. For years, web development using HTML, CSS, and JavaScript has lacked the standardization which would allow for the free and flexible reuse of functional elements… until now. With the rise of the web component standard, web developers now have the standard mechanisms in place to enable low-level, yet universally applicable custom elements. And, when I say universally applicable, I mean, across browsers, across frameworks, and across content management systems. No matter how you look at it, this is truly the best of both worlds.
The Technology Backing Web Components
Web components are essentially the culmination of four major technologies in web development -- custom elements, shadow DOM, HTML templates, and ES modules. Looking back at my previous tutorial on creating web components (embedded below), we can see a few of these specifications emerge as we go through the process. In particular, we see the custom elements specification emerge when we run the function
CustomElements.define(...)
which includes our element in our HTML document’s CustomElements registry. We also see the ES modules specification emerge when we give our JavaScript web component class a type value of “module”. Beyond these specifications, the shadow DOM specification effectively allows us to isolate the scope of an element from the rest of the document so that there are no major issues when styling the element using CSS in a larger document which may use similar and conflicting naming conventions. Also, HTML templates allow us to take fragments of markup and give them values at runtime rather than at page load. And ultimately, these specifications all culminate in the enabling of our modern-day web component standard.
The Current State of Web Components
But where are all the web components? Well, slowly but surely, web components are on the rise. Brands like YouTube, EA, XFinity, and RedHat all utilize web components to some extent in their web interfaces. In fact, it’s estimated that between 5 to 10 percent of page loads involve a web component. But, with such an important and revolutionary technology, shouldn’t this number be much higher? Well, in theory, yes, but there also exists heavy fragmentation within the web development community with regard to the dominant web technology which ought to be used. Furthermore, it will take a considerable amount of time and effort to convince companies and organizations to begin to adopt web components within their existing properties. Nonetheless, there are ways that you can help web components become a widely-adopted technology. I detail this in my video embedded below -- namely, how to contribute to the LRNWebComponents open source project. If you would rather read through this tutorial, though, feel free to skip the video and read further.
Step 1: Install NPM
Downloading Node.js will give you access to NPM, or Node Package Manager.
Node.js Download
Step 2: Install Yarn using NPM
In the command line, run the command:
npm install --global yarn
Step 3: Fork the LRNWebComponents Repository
You can do this using GitHub's user-interface by traveling to the LRNWebComponents Repository and clicking the "Fork" button in the top-right.
Step 4: Clone the LRNWebComponents Repository
You can also do this using GitHub's user-interface from your forked repository by viewing it and clicking the green "Code" button. Once you've downloaded the repository as a .zip file, simply extract its contents and you're ready to go.
Step 5: Install the Required Dependencies and Dev Tools
Now, we'll move on to how we might go about modifying a web component within the LRNWebComponents repository. To do this, choose any web component in the /elements/ subdirectory and run the command:
yarn install
within its subdirectory from the command line. This will give us the necessary development tools and dependencies we need to carry out our contributions to the project.
Step 6: Start Yarn
Simply run the command:
yarn start
and you will have a hot reloading web server at your disposal for development purposes.
Step 7: Open the IDE
To edit your web component of choice, run the command:
code [FILENAME]
from the component's subdirectory in the command line. Replace "[FILENAME]" with the .js file containing the class definition of the web component you would like to modify.
Step 8: Edit the Web Component As You Wish
The specifics of this step are entirely up to you, the programmer!
Step 9: Commit Your Changes to Your Forked Repository
If you are inexperienced with Git, see my Git/GitHub tutorial (embedded below) for more info on this step.
Step 10: Send a Pull Request
Now all that is left to do is to send a pull request to the LRNWebComponents repository, and you are officially a contributor to the largest library of open-source web components in the world!
Top comments (0)