Fork me on GitHub

The Future of JavaScript

Patrick Arlt

Experience Developer - ArcGIS for Developers

@patrickarlt - http://arcg.is/18GQw5E

A Brief History of JavaScript

Dark Ages (ES 3)

  • Browser Wars
  • No Standards
  • Wild West

Our Savior JQuery!

The Community Standards & The Framework Wars

The Community Standards (ES 5)

  • Modules - AMD, Common JS
  • Flow Control - Promises
  • Utilities - Underscore, Async
  • The Framework Wars

    Backbone

    Angular

    Ember

    Knockout

    React

    MarionetteJS

    Thorax

    Batman

    Dojo

    Meteor

    Aurelia

    Kendo UI

    Montage

    ExtJS

    Vue.js

    Flight

    Riot.js

    Mithril

    ...

    JavaScript Today

    Awesome. Fragmented. Wild West.

    Our Savior ES 6 ES 2015!

    Key ES 2015 (ES 6) Features

    Modules

    Classes

    Promises

    Arrow Functions

    Template Strings

    Default/Rest/Spread Params

    let and const

    Maps and Sets

    Loads more…

    //layer.js
    import FeatureLayer from 'esri/layers/FeatureLayer';
    import HeatmapRenderer from 'esri/renderers/HeatmapRenderer';
    
    var layer = new FeatureLayer(...);
    var renderer = new HeatmapRenderer(...);
    
    layer.setRenderer(renderer);
    
    export renderer;
    export layer;
    //map.js
    import Map from 'esri/map';
    import layer as earthquakes from './layer';
    
    var map = new Map(...);
    
    map.addLayer(earthquakes);
    
    export default map;
    class Person {
      constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
      }
    
      get name() {
        return this.firstName + ' ' + this.lastName;
      }
    
      set name(name) {
        var parts = name.split(' ');
        this.firstName = parts[0];
        this.lastName = parts[1];
      }
    }
    import Person from './Person';
    
    class Developer extends Person {
    	constructor(name, caffine){
    		super(name);
    		this.caffine = caffine
    	}
    	code(){
    		if(this.caffine > 1){
    			console.log("&#!^&*#%^*($%)!*");
    			this.caffine = this.caffine - 2;
    		} else {
    			console.log('Not enough caffine. Use coffee() or tea()');
    		}
    	}
    	coffee(){ this.caffine = this.caffine + 2; }
    	set caffine(value){ console.log(`caffine now ${this.caffine}`) }
    }
    var MyApp = {
    	items: [],
    	getItems: function(){
    		getPortalItems().then(function(items){
    			this.items = items; // this is actually window :(
    		});
    	}
    }
    var MyApp = {
    	items: [],
    	getItems: function(){
    		getPortalItems().then(hitch(this, function(items){
    			this.items = items; // now this now MyApp :)
    		}));
    	}
    }
    var MyApp = {
    	items: [],
    	getItems: function(){
    		getPortalItems().then(_.bind(function(items){
    			this.items = items; // now this now MyApp :)
    		}, this));
    	}
    }
    var MyApp = {
    	items: [],
    	getItems: function(){
    		getPortalItems().then(function(items){
    			this.items = items;  // now this now MyApp :)
    		}.bind(this));
    	}
    }
    var MyApp = {
    	items: [],
    	getItems: function(){
    		getPortalItems().then( (items) => {
    			this.items = items;  // now this now MyApp :)
    		});
    	}
    }

    Experiance the Future!

    6to5 Babel and Traceur compile ES 2015 (tomorrows standard) to ES 5 (todays standard).

    IE 9+

    Demos

    • JS API + Babel
    • Esri Leaflet + Babel

    Wait don't we still have a problem

    JQuery

    Dijits

    Polymer

    OpenUI

    Kendo UI

    Ember.Component

    Angular Directives

    ExtJS

    Sencha Touch

    Webix UI

    Widjmo

    Chocolate Chip UI

    Material Design

    Our Savior Web Components!

    Web Componets

    A set of (4) new standards for creating custom HTML elements. Lays the ground work for reusable UI Components.

    The Web Component Specs

    • Templates
    • HTML Imports
    • Shadow DOM
    • Custom Elements

    I'm going to focus on custom elements.

    • Templates are a little boring
    • Firefox isn't supporting HTML Imports
    • Shadow DOM is difficult to polyfill
    • Custom Elements are awesome just on their own
    class MyElement extends HTMLElement {
    	createdCallback(){
    		// what do yo do when your element is created?
    	}
    };
    
    // name must have a hypen, now you can create <my-element> anywhere
    document.registerElement('my-element', MyElement);
    <esri-map id="map" lat="45.528" lng="-122.680" zoom="15" basemap="Streets">
      <esri-feature-layer id="parks" url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"><esri-feature-layer>
    </esri-map>
    <esri-infographic id="age" variables="AGE.*" type="AgePyramid">
      <p>Click to query age ranges.</p>
    </esri-infographic>
    
    <script>
      var infographic = documnet.getElementById("age");
    
      map.on(click, function (e) {
        infographic.setLocation(e.mapPoint);
      });
    </script>
    <esri-search id="search" map="map">
      <esri-search-source name="Congressional Districts" displayField="DISTRICTID" searchField="DISTRICTID" url="http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0"><esri-search-source>
    </esri-search>

    Demo

    Web Components Today

    Everything usable today with support in IE 9+ with a polyfill from http://webcomponents.org/

    Angular Directives and Ember Components will be compatable with each other!

    Summary

    • New language features coming to JavaScript with ES 6
    • Real reusable UI componetns with Web Components
    • IE 9+ with compilers and polyfills

    Resources

    Thanks!

    www.esri.com/RateMyDevSummitSession

    Twitter: @patrickarlt

    Slides: http://arcg.is/18GQw5E

    Esri