ESRI Dev Summit Notes and Thoughts : Web Components

Blog Post created by bokeefe on Mar 16, 2016

So on Friday, March 11th, at the ESRI Dev Summit there was a session that grabbed my attention. I've started reading up on it and plan on implementing it within both my own programming (outside of ESRI) and for Mapping-based web applications. The session was titled, "Custom Elements : An End to the Framework Wars" given by Patrick Arlt and he covered A LOT... Being a recent returnee to truly delving into Javascript and other Web-based programming I am confronted with an almost completely new world. HTML5 is here, Be responsive, Flash is Dead, Shadow DOM, and more is quite a learning curve to find myself stepping back into.


Luckily, variables still hold data and objects... html is still built with elements / tags... and CSS still has selectors.


So in the session Patrick discussed a few websites, is one. It's a repository of these 'Web Components' or 'Custom Elements' and it's loaded. Now there have been some decent adjustments to ECMAScript (the foundation of Javascript) so if this information finds you scratching your head, go grab a few video tutorials or books and catch up. It shouldn't take long. But, the power that is presented here is staggering.


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.



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>
  <input type="submit">


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>