Custom Elements: An end to the Framework Wars

Patrick Arlt | @patrickarlt

http://bit.ly/1QK9hmY

The Framework Wars Peace Talks

JavaScript Tooling Fatigue

• Frontend framework hell
• Javascript Fatigue
• JavaScript fatigue fatigue

JS Tooling Incompatibility

• JS API w/ Common JS based systems
• Angular Service vs Ember Data
• Dojo Plugins vs Webpack Loaders vs System JS Plugins

Lets Learn to Share…

My tools dont work with your tools…

• ArcGIS Open Data: Ember
• ArcGIS For Developers: Angular 1
• ArcGIS Insights: Angular 2
• ArcGIS Online: Dojo
• Storymaps: JQuery

R&D Project

How can we share UI code?

Across any framework, using any build system,with any module format?

Our Component Based Future

Write UI Components once.

Components work with any framework.

Frameworks manage components, routing and data.

Web Components

Extend the DOM to create new HTML Elements.

Wait, What!?!

But, Why?

JavaScript has lots of tool to work with DOM (Frameworks, Libraries, Toolkits, Native DOM APIs), if we can extned the DOM we can write custom code that interoperates with ALL those tools.

Web Components

Extend the DOM to create new HTML Elements.

<esri-web>, <open-data-search>, <calcite-modal>

https://customelements.io/

Ok, Web Components

• Templates ✓ Done
• Shadow DOM ⚒ In Progress
• Custom Elements ⚒ In Progress
• HTML Imports ✕ Abandoned

Shadow DOM v1 statusChrome: http://t.co/pXtwYxrXQjSaf: https://t.co/86Q3tq0BleFF: https://t.co/nUmI5iuc8qEdge: http://t.co/WfOk1wpEWz

Shadow DOM v1

Total rewrite of the spec. All major browsers have agreed to impliment!

Custom Elements Rewrite

Spec rewrite, Safari has begun implementation. IE will likely impliment.

Web Standards at Work!

Some Custom Elements

<opendata-search
  api="http://opendata.arcgis.com"
  limit="20"
  sort="relevance"
  group="62be2f179f674941b393f1c9bc8ca73e"
  fields="record_count, item_type"></opendata-search>

<calcite-modal id="dialog-modal" aria-label="Confirmation Modal">
  <p>Comfirm something.</p>
  <button type="button" data-calcite-action="close-modal" class="btn">Ok</button>
</calcite-modal>

<arcgis-share-item itemid="44612e6217d34f40b1ce2a48f367e90a"></arcgis-share-item>

<esri-map
  id="map"
  basemap="topo"
  zoom="5"
  lat="38.95"
  lng="-100.95"></esri-map>

<esri-feature-layer
  url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Alternative_Fueling_Stations/FeatureServer/0"
  popupbody="popup"
  popuptitle="{Station_Na}"
></esri-feature-layer>

<template id="popup">
  

{Station_Na} {Street_Add} {City}, {State}, {ZIP}

Fuel Type: {Fuel_Type}

Phone: {Station_Ph}

Open to: {Groups_Wit}

Hours: {Access_Day}

<esri-basemap-toggle
  map-id="map" basemap="gray"></esri-feature-layer>

Now for the magic…

• Angular 1.0
• Angular 2.0
• Backbone
• Ember
• React

😱😂😎

Recap

We built 3 componets to make a simple app.

Reused components in 5 different frameworks.

Common Concerns

Localization?

Accessible?

Browser/Spec Stability?

Our Polyfilling Future

document.registerElement

Proven in production, will still keep working once the new spec is implimented.

Predictions

All browsers will impliment Shadow DOM this year. One browser besides Chrome will ship Custom Elements in a stable release.

Whats Next

• Open Data - <opendata-search>
• ArcGIS for Developers - blogs, downloads, ect...
• Custom Elements for JS API Widgets

More Notes

Thre is lots of additional info about the demos and my research on GitHub.