Luckily, variables still hold data and objects... html is still built with elements / tags... and CSS still has selectors.
I decided to take a few minutes and hit the web to see what I could find on this new magic and I hit some valuable pages and wanted to log / share them.
- First is the W3C Wiki for WebComponents. It's a great place to start and has some nice links.
- If you find 'specs' to be good learning tools, then here is the specs for Web Components.
- HTML5Rocks provides a great intro tutorial with links that branch from there.
- HTML5Rocks includes two great articles on the Shadow DOM. 101 and 201.
- HTML5Rocks also has a great article on HTML imports, which becomes a deal breaker once you start working with these fancy Web Components.
- CSS-Tricks offers a Web Component tutorial / walkthrough as well.
- There's even an Online Group / Org for Web Components where you can discuss and learn.
Alot of the sessions mention ARIA, which I wasn't familiar with. It's Accessible Rich Internet Applications, or making your web-creations accessible to those with disabilities. There are some good articles on this topic as well and regardless of whether you are required (or not) to format your development for ARIA, you really should.
So for those of you asking, "What ARE web components?" Let's take a second and see if I can explain things AS I UNDERSTAND THEM... Keep in mind, I have yet to create one. But I'm actively making plans.
So you develop your ESRI Maps in JSAPI or Web AppBuilder with some custom code? Does this code include a DIV Soup (where you have divs nested in divs nested in divs, etc., ad nauseum)? Is that simple to peruse and look over? How many times do you have to pull apart those Divs just to get a better idea of what is going on? What if you could use a smarter HTML element?
If you've made a single web page in your life, regardless of GIS experience, then you've developed (or coded) a form. You've created the form tab, with an action attribute, and various inputs / selects / etc. inside of it. You've probably had to custom style certain components within the form as well. Then you've had CSS get absolutely silly moving buttons and labels all over. What if you had one form that you had to use ALL over your site but it required minor adjustments?
Technically, you could create a Custom Element version and shorten the amount of code you have to copy-n-paste all over.
So let's say you have a form that looks like
<form action="form_submit.php"> LabelTextA: <input type="text" name="custom-label-A"><br> LabelTextB: <input type="text" name="custom-label-B"> <textarea name="custom-name" rows="3" cols="20">Default entry goes here for visitor.</textarea> <br> <input type="submit"> </form>
Now, this is probably a bad example but I'm going to use it anyway...
Technically, with Custom Elements you could condense this entire chunk of HTML into something like THIS...
<my-reusable-form submit="form-submit.php" defaultText="Default entry goes here for visitor." />
The trick is all of the extra HTML would be placed into a Template that you could reuse ANYWHERE. Can you think of any tags that would make your work easier? Maybe even entire Widgets? What about sharing within your organization? Non-Map based web pages. Custom organization-only elements?
The sky is the limit... and this concept is huge and kind of overwhelming right now. I'm going to be looking at a process for laying out these kinds of concepts so we can see how possible this would be. But I'm hoping to make my coding easier, less time consuming, more reusable, better accessibility, etc.
Let's see if we can all do this...
<good-bye>Peace, Love and Harmony</good-bye>