One of my favorite side-effects of using Web Components for DOM manipulation over more traditional approaches is that it makes your code a lot more obvious.
For example, consider a <button> that opens a modal.
<button id="open-tos">View the Terms of Service</button>Where would you find the code that runs that? What element does it open? Are there any side-effects that go along with it?
I can guess. There's probably an element on the page that contains the phrase "Terms of Service" that I could look for (maybe, hopefully). I could search the code base for #open-tos.
But imagine instead that you use an HTML Web Component, like this…
<toggle-modal target="#tos"> <button>View the Terms of Service</button> </toggle-modal>Now I know, just from looking at the HTML, that this <button> opens the #tos element. If I want to see how it works, I can look for the toggle-modal.js file (assuming your developer team uses some basic conventions for naming things).
Worst case scenario, I can search for the less needle-in-a-haystack term customElements.define('toggle-modal'.
I'm seeing first-hand how useful this is on a consulting project I'm working on for NASA. The backend developer knows HTML, but not much JavaScript. He's told me that this style of authoring has made it a lot more obvious what's happening with the code.
If you want help building stuff like this, I have one more consulting spot open.
I have a favor to ask. If you enjoyed this email, could you forward it to someone else who you think might also like it, or share a link to my newsletter on your favorite social media site?
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Web Components make your code more obvious"