Posted by Ancestry Team on June 19, 2013 in CSS/HTML/JavaScript, Web

Things are changing in the front end web world. Among those changes are HTML APIs.  Here’s the problem. You’ve made a webby-UI widget that is really cool. It’s so cool, that other people want to re-use it. How do you expose your widget so that other people can use it? In the old world, you provided a Javascript API that clients would call, passing in the element. See jquery-ui, code mirror, or anything using Backbone or written as a jQuery plugin. For one or two UI widgets, we tolerate it. But if your page uses a lot of UI widgets, it’s misery. Backbone style misery.  The problem here is that view is being described in Javascript rather than HTML.  If you don’t think that’s extremely hard work, imagine generating ALL of your html using document.createElement.

 

The new world is better. It uses HTML APIs in the HTML itself. For example, Radian, which is powered by AngularJS allows you to specify plots and graphs in HTML, such as:

<plot height=600 aspect=1 stroke="none" marker="circle" axis-x-label="Age" axis-y-label="Height">
<points x="[[fam.age]]" y="[[fam.height]]" fill="[[mfpal(fam.sex)]]" marker-size="[[30*sqrt(fam.salaryhr)]]">
</points>
</plot>

Simply plunk this stuff down in your html, include the right script, and AngularJS + Radian + D3 do their magic.  I’d like to see more of these. I’d like to see accordions useable using <accordion>, and a calendar using a <calendar>.
AngularJS is a fantastic start for creating HTML APIs, but it isn’t the only way. On Ancestry.com’s Surname page we use an HTML API to define the svg graphics. Enter your surname, then view the source. You’ll see two odd looking tags:

 

<div id="surname-origin" context="surname.origin" surname=Harris options='{"limit": 3, "circleSpacing": 30}'></div>
<div context="surname.choropleth" surname=Harris id="surname-choropleth"></div>

 

Why do it this way? When other teams at Ancestry.com want to use our graphics they just include the tags on the page, and our HTML does the rest.

 

The Web world is getting more declarative. Join it. The next time you write a UI visual component, make it a tag.

Join the Discussion

We really do appreciate your feedback, and ask that you please be respectful to other commenters and authors. Any abusive comments may be moderated. For help with a specific problem, please contact customer service.