Adding some @riotjs_ #webcomponents love ...
In my previous article, I showed how we use Visual Studio to work with web components written with the Polymer 2 library. How much work would it entail to toss in a Riot component into the mix? The whole idea of web components, is that we can combine them, right? Right! Oh, and as a side note, I personally found Riot super easy to get into! Might be a preference thing, but I'm just tossing that out there. The idea of Riot, is that it works right now with existing browser technologies whereas the Polymer components use Polyfills to bring the future of the web into the present. Groovy.
In previous experiments, I've tossed together a few riot components and published them to a blob container:
Just like web components written using the Polymer library has it as a dependency, Riot has a runtime that we must include where we consume our component; the riot+compiler.min.js. The cool thing about Riot, however, is that you can include that dependency at the end of your document, letting the rest of the document load and render (thereby seeming faster). What else ... you need to load your components. In Riot, you load these by including script tags of type riot/tag. Then, at the very end of your body, mount your Riot tags:
Since the tags are in a publicly accessible blob storage, you can gain access to them. They communicate through window-level custom events, where the top component emits a ContactIdChanged event whenever it finds a match. The third web component listens to the same event and does a lookup based on the contact Id whenever the contact changes. This way, we can keep the two datasets separate from each other, while still rendering them on the same page.
Web Components! Yeah!
In previous experiments, I've tossed together a few riot components and published them to a blob container:
Just like web components written using the Polymer library has it as a dependency, Riot has a runtime that we must include where we consume our component; the riot+compiler.min.js. The cool thing about Riot, however, is that you can include that dependency at the end of your document, letting the rest of the document load and render (thereby seeming faster). What else ... you need to load your components. In Riot, you load these by including script tags of type riot/tag. Then, at the very end of your body, mount your Riot tags:
Since the tags are in a publicly accessible blob storage, you can gain access to them. They communicate through window-level custom events, where the top component emits a ContactIdChanged event whenever it finds a match. The third web component listens to the same event and does a lookup based on the contact Id whenever the contact changes. This way, we can keep the two datasets separate from each other, while still rendering them on the same page.
Web Components! Yeah!
Comments