ES6+ maintenant...• Juin 2015 : ES6 / ES2015. Enormément de nouveautés de langage pur. • Juin...

Preview:

Citation preview

ES6+maintenant!Speaker:ChristophePorteneuveFormat:ConférenceDate:21avril2016Slides:http://tdd.github.io/devoxx-es6-maintenant/AnciendéveloppeurJava,ChristophedéveloppeenJavaScriptdepuis1995.Ilcommeparrappelerqu’ECMAScriptestlastandardisationdeJavaScript.

Historique:d’ES3àES7

• Mai1995:JS1.0(en10jours).Netscape2.0beta3en12/95.ConçuenmêmetempsqueJava.Pourquoidiableavoirchoisicenom?=>TropdeconfusionsauniveauRH.

• Juin1997:ECMAScript(ES1,ECMA-262),standardofficiel=>UtiliséparIE8• Décembre1999:ES3.JScript1.5àpeuprèsàceniveau(IE4-8)• Décembre2009:ES5.Baselinedecompatibilitéactuelle.IE9+,Node,etc.Peudegros

changements.• Juin2015:ES6/ES2015.Enormémentdenouveautésdelangagepur.• Juin2016:ES7/ES2016(prévu;versionsannuellesdésormais,danslecadre

d’ES.Next,d’oùlechangementdenom)Prises-enchargenatived’ES6?

• Navigateurs:de90%à98%surlesnavigateursEvergreens.Safariestrestésur53%.D’aprèsChristophe,Applebridevolontairementsonnavigateurafindepromouvoirledéveloppementd’applicationsnatives.

• Serveurs:NodeLTS(4.4.3)à48%,Nodestable(5.10.1)à58%Babel

• TranspileES6+enES5• Enpratique:IE9+,navigateursEvergreens,touslesNodes.js/io.js• Intégrationavectout:

o Builders:grunt,gulp

o Runtime:Node,RequireJSo Frameworks,IDE,outilsdetest

Christopheseveutrassurant.Babelestmature.IlcompileintégralementleslignesdecodedeFacebookES6,pourquoi?

• Plusfacile:moinsdepiège,modestrict,isolationdemauvaisepratique• Pluspuissant• Plusfiable• Plusperformant

Objets&Classes

• Mêmesfonctionnalitésmaisnouveauxobjets• Littérauxobjets• Propriétéscalculées• Motsclés:class,extends,constructor,super,static.Obligel’appelauconstructeur

hérité(ex:super(props))• AccesseurstransparentscommeenC#etDelphi:getetset

Fonctionnalités

• Déstructuration:onarriveàdesparamètresnommés

• Rest&Spread:le…commeenJava.

• Valeurpardéfaut,sedéclencheencasd’undefined.Lavaleurpardéfautpeutêtre

unappeldefonctionsouêtrecomposésdesautresparamètres• TemplatestringscommeenPHPavecledélimiteur`etnativementmulti-line

• Lemotclévaradisparu.Utiliserlet&const.Engénéralonutiliseconstcarles

variablesnechangentpasdevaleur.Letestréservéauxboucles.Attentionconst<>d’immutable(deepfreeze)

• Litérauxétendus:octaux/binaires,unicodeavec2codescaractèresUTF-16

• Fonctionsfléchées:ellesnebindpaslethis!!Unefonctionnormaleredéfinitthis,arguments,superetnew.target.Maispasunefonctionfléchée:ellen’apasdethis.

• Devraismodules

o Reprendtoutcequiétaitbiendanslesautressystèmesdemoduleo 1module=1fichier(commeCommonJS)

• Chargementasynchrone(LoaderAPI):pasencorebienprisencharge• Promessesennatif.Interopérableaveclespromessesd’autreslib.

• Motsclésasync/awaitpiquéàC#5.Complémentelespromessessansles

remplacer.Codeasynchronenonbloqué.Onpeutrécupérerfacilementlesexceptions=>ES2017déjàsupportéparBabel

• Proxies(ES207):interceptionpossibledetoutemanipulationd’unobjet.NonsupportéparBabel.Patterndecorator.PermetdeleveruneReferenceError.

• Décorateurs@autobind,@memoize,@override(ES207):vaplusloinquelesannotations

LeprojetLebabpermetd’identifierducodeES5éligibleàduES6(l’inversedeBabel).QuestionsurTypeScript:trèsbien,pourlesgensquiontbesoindetypagefort(lesdéveloppeursquiviennentdelangagesfixes).Enalternatif:flowestuntypecheckerintéressant.LessyntaxessontpresquesISO.Labasculeestfacile.

Recommended