ecma6 in 30 minutes
TRANSCRIPT
![Page 1: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/1.jpg)
![Page 2: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/2.jpg)
AboutMe• TechnicalLeaderandAgileCoach• Front-endDeveloper(testfirst!)• MobileDeveloper(HybridwithCordova,iOS,Android)• TechnologyEnthusiast• [email protected]• GSDguy
![Page 3: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/3.jpg)
McGrawHillEducationisHiring
http://www.mheducation.com/careers
![Page 4: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/4.jpg)
What'sNext?
ScotchStreamingandScaling11Feb2015www.meetup.com/mobiletea
![Page 5: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/5.jpg)
Agenda• UsingECMA6today• ECMA6modules• VariablesscopingwithECMA6• ECMA6newcorefeatures(Array,String,Numbers,etc.)• HandlingdatawithMapsandSets• DestructuringArraysandObjects• HandlignexternaldatausingPromisesandDeferred
![Page 6: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/6.jpg)
IspeakEcmaScript!https://github.com/GiorgioNatili/es6
![Page 7: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/7.jpg)
SharpentheWeapons
![Page 8: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/8.jpg)
WhereisJavaScript?
![Page 9: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/9.jpg)
ModularJavaScript• Selfcontained• Avoidglobalscopepollution(globalscopeisnotevil!)• Keeptheprojectorganized• Improvecodereusability• HighlytestableandwelldefinedAPI
![Page 10: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/10.jpg)
WhichOptions?
AMD
CommonJS
![Page 11: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/11.jpg)
AMDModule(1/3)Simplereturnobjectasacollectionofname/valuepairs
define({color:"black",size:"unisize"});
![Page 12: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/12.jpg)
AMD(2/3)Returnobjectwith"privacy"implementation
define(function(){//Dosetupworkherereturn{color:"black",size:"unisize"}});
![Page 13: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/13.jpg)
AMD(3/3)Returnobjectwith"privacy"implementationanddependenciesmanagement
define(["./inventory","./currencies"],function(inventory,currencies){varcode="ye76hg";vargetPrice=function(){returncurrencies.getPrice(code);};
![Page 14: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/14.jpg)
CommonJSModule(1/2)
Simpleplainfilethat"exports"featuresusingthe"module"variable(client.js)
varrest,mime,client;
rest=require('rest');mime=require('rest/interceptor/mime');
![Page 15: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/15.jpg)
CommonJSModule(1/2)
Simpleplainfilethat"imports"features
importclientfromcollections;
client.doStuff();
![Page 16: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/16.jpg)
Whowins?
idgafanimatedGIF
![Page 17: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/17.jpg)
idgafanimatedGIF
![Page 18: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/18.jpg)
idgafanimatedGIF
AMDtoCommonJSdefine(function(require,exports,module){
//PuttraditionalCommonJSmodulecontenthere
exports.randomize=function(input){returnshuffler.shuffle(input);
}
});
![Page 19: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/19.jpg)
CommonJStoAMDConvertthecommonJSformattoabrowsercompatibleoneusing
browserify
$npminstall-gbrowserify
$browserifymain.js-obundle.js
![Page 20: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/20.jpg)
ECMA6Modules• export,functionsandvariables
exportfunctionarea(radius){returnMath.PI*radius*radius;}exportPI=Math.PI;
• import,modules
![Page 21: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/21.jpg)
Advantages• Compact,synchronoussyntax• Asynchronousloading• Conditionalmoduleinclusion• Promotecodemodularization• APIstyledevelopment
![Page 22: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/22.jpg)
CanIusethemtoday?Kindaof...
![Page 23: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/23.jpg)
wowanimatedGIF
![Page 24: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/24.jpg)
ExperimentalEnvironments
![Page 25: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/25.jpg)
LocalEnvironment• InstallNodeJSusingbrew
$ruby-e"$(curl-fsSLhttps://raw.github.com/Homebrew/homebrew/go/install)"$brewinstallnode
• Verifythatnpmininstalled
$npm
![Page 26: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/26.jpg)
DevEnvironment(opt1)• Installyeomanglobally
$npminstallyo-g
• Installthees6nextyeomangenerator
![Page 27: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/27.jpg)
DevEnvironment(opt2)
• Install6to5atranspilerabletoproducereadableECMA5codeECMA6
$npminstall-g6to5
![Page 28: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/28.jpg)
DevEnvironment(opt3)
• Cloneaboilerplate
$gitclonehttps://github.com/davidjnelson/es6-boilerplate.git
• Installthedependencies
$npminstall
![Page 29: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/29.jpg)
RunYourFirstTranspilation
excitedanimatedGIF
d
![Page 30: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/30.jpg)
BrowsersSupport
GuessIE?
![Page 31: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/31.jpg)
GuessIE?internetanimatedGIF
![Page 32: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/32.jpg)
internetanimatedGIF
NewCoreFeatures
TheFutureof
![Page 33: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/33.jpg)
TheFutureofJavaScript
fightanimatedGIF
![Page 34: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/34.jpg)
fightanimatedGIF
Object.assingCopythebehaviorofanobjecttoanotherobjectwithoutusing
classesorprototypesinheritance.
varworker={};
varcanEat={food:'nothing',eat:function(){console.log(`eats$this.food`);//templatestring(partofES6)}};
![Page 35: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/35.jpg)
Object.isObjectmethodtodeterminewhethertwovaluesarethesamevalue
likethestrictequalityoperator.
Object.is("foo","foo");//trueObject.is(window,window);//true
Object.is("foo","bar");//falseObject.is([],[]);//false
vartest={a:1};Object.is(test,test);//true
![Page 36: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/36.jpg)
__proto__inobjectliterals
Changetheprototypeofanobjectliteral
varobj={__proto__:Array.prototype};
![Page 37: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/37.jpg)
String.prototype.containsSearchforastringcontainedinastringfromaspecificposition
(optional)
varstr="TobeinBostonwiththesnowiscool.";
console.log(str.contains("Tobe"));//trueconsole.log(str.contains("question"));//falseconsole.log(str.contains("Chicago"));//falseconsole.log(str.contains("Tobe",1));//false
![Page 38: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/38.jpg)
String.prototype.startsWithCheckfromaspecificindex(optional)ifastringstartswithaspecific
string
varstr="TobeinMiamiwhenthereisthesnowinBostonisbetter.";
console.log(str.startsWith("Tobe"));//trueconsole.log(str.startsWith("Tobe",2));//false
![Page 39: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/39.jpg)
String.prototype.repeatRepeatandconcatenateastringaspecificamountoftimes.
varstr="ECMA6isprettycool.";
console.log(str.repeat(2));//ECMA6isprettycool.ECMA6isprettycool.
![Page 40: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/40.jpg)
Array.prototype.fromCreateanArrayfromanarray-likeobjectoraniterableobject.
vartest=(function(){varargs=Array.from(arguments);returnargs;}(1,2,3));
console.log(test);//[1,2,3]
![Page 41: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/41.jpg)
Array.prototype.findReturnthefirstoccurrenceinanArraythatsatisfiestheconditions
describedbythecallbackargument.
functionisPrime(element,index,array){varstart=2;while(start<=Math.sqrt(element)){if(element%start++<1)returnfalse;}return(element>1);}
![Page 42: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/42.jpg)
IteratorsAniteratorhasamethodcallednext,thismethodreturnsanobject
withtwoproperties:valueanddone.
varit=['yo','ya','yes','now','then'].keys();
console.log(it.next().value,it.next().done);console.log(it.next().value,it.next().done);console.log(it.next().value,it.next().done);
console.log(it.next().value,it.next().done);//???
![Page 43: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/43.jpg)
Array.prototype.keysReturnsaniterableobjectfromanArray.
varsequence=[1,4,5,8,2,6];
console.log(sequence.keys());//Iterator{}
Aniterableobjecthasanext()methodthatreturnanobjectwiththethevalueanddoneproperties.
![Page 44: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/44.jpg)
Array.prototype.entriesReturnsanewArrayIteratorobjectthatcontainsthekey/valuepairs
foreachindexinthearray
vararr=['a','b','c'];vareArr=arr.entries();
varobj=eArr.next();while(!obj.done){console.log(obj.value);obj=eArr.next();
![Page 45: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/45.jpg)
NumberConstantsUsefulconstantstodeterminethesmallestintervalbetweentwo
numbersandtheminimumandmaximumsafeintegers.
console.log(Number.EPSILON);console.log(Number.MAX_SAFE_INTEGER);console.log(Number.MIN_SAFE_INTEGER);
![Page 46: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/46.jpg)
Number(static)Methods
CheckifanumberisNaN,infinite,integer,etc.
varnum=456;
console.log(Number.isFinite(num));//trueconsole.log(Number.isInteger(num));//trueconsole.log(Number.isNaN(num));//false
![Page 47: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/47.jpg)
for...ofIteratesoveriterableobjects(includingArray,Map,Set,arguments
objectandsoon)ignoringinstanceandprototypeproperties
letarr=[3,5,7];arr.foo="hello";
for(variinarr){console.log(i);//"0","1","2","foo"}
for(variofarr){
![Page 48: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/48.jpg)
Set+MapASetisasetofarbitraryvalues,aMapisakey/valuepairsbased
object;aSetdoesn’tallowduplicates//Setsvars=newSet();s.add("hello").add("goodbye").add("hello");
console.log(s.size);//2console.log(s.has("hello"));//true
console.dir(s);//add(),clear(),delete(),entries(),values(),forEach(),etc.
//Maps
![Page 49: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/49.jpg)
ProxyProxiesenablecreationofobjectswiththefullrangeofbehaviors
availabletohostobjects
vartarget={age:1};varhandler={get:function(receiver,name){console.log(receiver)return`Hello,${name}!`;}};
varp=newProxy(target,handler);
![Page 50: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/50.jpg)
TemplateStringsTemplatestringsaredefinedusingbackticks`,inside,youcanusea
dollarsignwithbracketstoinsertexecutablecodeorvariables.
varname='Giorgio',surname='Natili';vartemplate=`Hello!Mynameis${name}${surname}!`;console.log(template);//Hello!MynameisGiorgioNatili!
![Page 51: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/51.jpg)
GeneratorsGeneratorsarefunctionsthatcanbeexitedandthenre-entered,eachcalltothenext()methodwillrunthebodyofthefunction.
function*idGenerator(){varindex=0,val='';while(true){index++;yieldval='UID'+index;}}
![Page 52: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/52.jpg)
VariablesScopingFinallytheletkeywordallowustocreatescopesvariable.
for(leti=0;i<10;i++){console.log(i);}console.log(i);//iisnotdefined
if(true){(function(){varscoped='test';})();console.log(scoped);//scopedisnotdefined
![Page 53: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/53.jpg)
DestructuringItreferstoakindofassignmentthatallowsyoutoassignthepropertiesofanarrayorobjecttovariablestoeffectively
matchvaluestovariablesorproperties.
var[x,y,z]=[1,2,3];//isequivalentto...varx=1,y=2,z=3;
let[x,y]=[1,2];console.log(x,y);//1,2
[x,y]=[y,x];//Swapthevaluesofxandy
![Page 54: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/54.jpg)
SpreadsOperatorsRestparametersallowtoclearlydefinefunctionsthataccepta
variablenumberofarguments,the...constructorisusedtoprovidespreadstoarrays.
functionlogEach(...things){things.forEach(function(thing){console.log(thing);//"a""b""c"});}logEach("a","b","c");
functionexample(a,b,c){
![Page 55: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/55.jpg)
LoadingExternalData
Promises
![Page 56: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/56.jpg)
PromisesthesimpsonsanimatedGIF
![Page 57: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/57.jpg)
thesimpsonsanimatedGIF
WhatisaPromise• Iwantyoutoburnthisphraseinyourmind:Apromiseisanasynchronousvalue
• ThePromiseobjectisusedfordeferredandasynchronouscomputations
• APromiseisaplaceholderforafuturepossiblevalue
![Page 58: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/58.jpg)
PromisesinActionAttheirmostbasic,promisesareabitlikeeventlistenersexcept:
varpromise=newPromise(function(resolve,reject){//doathing,possiblyasync,then…
if(/*everythingturnedoutfine*/){
• Apromisecanonlysucceedorfailonce• Ifapromisehassucceededorfailedandyoulateraddasuccess/failurecallback,thecorrectcallbackwillbecalled,eventhoughtheeventtookplaceearlier
![Page 59: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/59.jpg)
UsingaPromiseApromisecanbeusedbyinvokingthethen()method,itacceptsa
successandafailurehandlerasarguments.
varpromise=Promise.resolve($.ajax('/whatever.json'));
promise.then(function(result){console.log(result);//"Stuffworked!"},function(err){console.log(err);//Error:"Itbroke"});
Promises
![Page 60: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/60.jpg)
PromisesImplementations
• Qhttps://github.com/kriskowal/q• YUIhttp://yuilibrary.com/yui/docs/promise/• es6-promisehttps://github.com/jakearchibald/es6-promise• JQueryhttp://api.jquery.com/promise/• Angularhttps://docs.angularjs.org/api/ng/service/$q• RSVP(ember)https://github.com/tildeio/rsvp.js/
![Page 61: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/61.jpg)
Resources
![Page 62: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/62.jpg)
Links• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources• https://developer.mozilla.org/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla• https://github.com/google/traceur-compiler• https://github.com/jmcriffey/grunt-traceur-compiler• http://pointedears.de/scripts/test/es-matrix/• http://kangax.github.io/compat-table/es6• https://people.mozilla.org/~jorendorff/es6-draft.html
![Page 63: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/63.jpg)
@giorgionatili#mobiletea#javascript#swift#wearable#agile#android#tdd
![Page 64: Ecma6 in 30 minutes](https://reader034.vdocument.in/reader034/viewer/2022052413/55bdf4bebb61eb852d8b47cd/html5/thumbnails/64.jpg)
Thanks!Grazie!Graçias!Danke!Merci!��!
skyanimatedGIF