dojo2es5

View Github Repository Open presentation in a new window

charlesbuczel

See all presentation from charlesbuczel

dojo2es5

0 0

dojo2es5

Presentation showing ES5 alternatives over some dojo functions

On Github charlesbuczel / dojo2es5

ES5

You might not need Dojo

ECMAScript

Why native ES over dojo?

  • less dependence on the framework - more reusability across projects
  • less abstraction
  • potential migration to different stack easier
  • easier for new hires to join the project (easier for js developer than a dojo dev)
  • ...

JSON

                require(["dojo/json"], function(JSON){
    var newJson = JSON.parse('{"hello":"world"}'),
        jsonString = JSON.stringify(newJson);
});
becomes: 

                var newJson = JSON.parse('{"hello":"world"}'),
    jsonString = JSON.stringify(newJson);

Gotchas

  • dojo's parse uses eval underneath. optional second param (boolean) to enable secure parsing
  • es5 parse - optional second param is a function allowing to transform the json
  • stringify works same for both

Function.prototype.bind()

            require(["dojo/_base/lang"], function(lang){
    var myObj = { foo: "bar" },
        func = lang.hitch(myObj, function(){
            console.log(this.foo);
        });

        func();
});
becomes: 

            var myObj = { foo: "bar" },
    func = function(){
        console.log(this.foo);
    }.bind(myObj);

func();

Object.prototype.keys()

                require([
    'dojox/lang/functional/object'
], function(o) {
    var obj = {
        key: 'value1',
        name: 'myName',
        numeric: 1,
        'hello': 'there'
    };

    console.log(o.keys(obj));
    console.log(o.values(obj));
});
...

Object.prototype.keys()

becomes: 

                var obj = {
    key: 'value1',
    name: 'myName',
    numeric: 1,
    'hello': 'there'
};

console.log(Object.keys(obj));
//Object.keys(obj).forEach(/*...*/);

Array

  • Array.prototype.isArray()
  • Array.prototype.indexOf() and .lastIndexOf()
  • Array.prototype.forEach()
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype.filter()
  • Array.prototype.map()
  • Array.prototype.reduce() and .reduceRight()

Array.isArray([])

                require(["dojo/_base/lang"], function(lang){
  lang.isArray([1,2]);
});
becomes: 

                Array.isArray("this will be false");

[].indexOf and [].lastIndexOf

                require(["dojo/_base/array"], function(array){
    var arr = [ 1, 2, 3, 4, 5 ];
    array.indexOf(arr, 1);
    array.lastIndexOf(arr,1);
});
becomes: 

                var arr = [ 1, 2, 3, 4, 5 ];
arr.indexOf(1);
arr.lastIndexOf(1);

[].forEach/every/some/filter

  • first argument a callback function(currentElement, index, array), second context

                require(["dojo/_base/array"], function(array){
    var arr = [ 1, 2, 3, 4, 5 ];
    array.forEach(arr, function (element) { console.log(element); });
    array.filter(arr, function (element) { return element > 2; }, this)
});
becomes: 

                var arr = [ 1, 2, 3, 4, 5 ];
arr.some(function (e, index) { return index > 2 && e > 2; }, this);
arr.every(Array.isArray);

[].map

  • loop through array and transform each element
  • first argument a callback function(currentValue, index, array), second context

                require(["dojo/_base/array"], function(array){
    var arr = [ 1, 2, 3, 4, 5 ];
    array.map(arr, function (element) { return element * element; });
});
becomes: 

                var arr = [ 1, 2, 3, 4, 5 ];
arr.map(Math.sqrt)
arr.map(parseInt);

[].reduce/reduceRight

    • REDUCE array to single value, iterating from left or right
    • only in dojox...
    • callback: previousValue, currentValue, index, array

                require(["dojox/lang/functional/array"], function(array){
    var arr = [ [1, 2], [3, 4, 5] ];
    array.reduce(arr, function(prev, curr) { return prev + curr; });
});
becomes: 

                var arr = [ 1, 2, 3, 4, 5 ];
arr.reduceRight(function(a, b) { a.concat(b); });

String.prototype.trim()

            require(["dojo/_base/lang"], function(lang){
  lang.trim("   one\f\n\t");
});
becomes: 

            "  test  \n".trim();

And so on...

  • Date.now()
  • parseInt radix defaults to 10
  • trailing commas ok
  • 'strict mode' (no support from IE9)
  • no reserved words for property names
  • NaN, Infinity, undefined are now constants
  • summary of es5 features: gist.github.com/sym3tri/2425983

Summary

  • dojo/json --> JSON
  • lang.hitch() --> fn.bind()
  • lang.trim() --> str.trim()
  • Object.keys(obj)
  • no need for dojo/_base/array
ES5 You might not need Dojo