JAVASCRIPTNOLONGERA“TOY”LANGUAGE

ANLPNGUYENKMSTECHNOLOGY

26THMAR2016

ICEBREAKER

• 6-PERSONGROUPS• GETTOKNOWEACHOTHERS• SHAREYOURNAME• FILLMEMBERNAMESASGROUPNAME• ASKTHEMOSTVALUABLEQUESTION

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

$whoami

▸ Front-end/backenddeveloperinKMSIncubator

▸ Rubyloversince2011▸ HasbeeninarelationshipwithJavaScriptsince2013

AnLPNguyenanlpnguyen@kms-technology.com@crashbell

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

$whoareyou

▸ var,function,callback▸ hoisting,prototype,closure▸ fatarrowfunction,generator,async/await

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

AGENDA

▸ Atoylanguage▸ StacksJavascripthasbeeninvolving▸ SignificantupdatesfromES6andES7▸ Demo▸ Quiz▸ Takeaways

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPTISMOSTCOMMONLYUSEDASACLIENTSIDESCRIPTINGLANGUAGE.

WhatisJavascriptlanguage?-Quora

JAVASCRIPT - A TOY LANGUAGE

JAVASCRIPT - A TOY LANGUAGE

FunFacts

▸ Mocha,LiveScriptandJavaScript

▸ “Java”inJavaScriptwasamarketingstrategy

▸ JavaScriptwasdevelopedatNetscape-NotSunMicrosystems

▸ JavaScriptisnothingrelatedtoJavaexceptC-likesyntax

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - A TOY LANGUAGE

The90’s

▸ Annoyingpopups▸ Statusbars▸ Mouseovers▸ Autoscrolling▸ Blinkingtexts▸ NoDOM,NoCSS,NoRegex

JavaScript was used in website for fun and "annoying"

Source:http://www.makeuseof.com/

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JavaScriptusedtobea“toy”languagewhichwasusedtodecorateawebsiteandsolvecross-browsercompatibilities

JAVASCRIPTISEVERYWHERE.SOAREWEALLOKWITHTHAT?

JavaScriptJourneywww.theregister.co.uk

STACKS JAVASCRIPT HAS BEEN INVOLVING

STACKS JAVASCRIPT HAS BEEN INVOLVING

Source:http://githut.info

STACKS JAVASCRIPT HAS BEEN INVOLVING

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS

▸ Backend

▸ Front-end

▸ Database&Mobile/Desktop

BACKEND

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

STACKS JAVASCRIPT HAS BEEN INVOLVING

NodeJS

▸ Cross-platformruntimeenvironment

▸ BuiltonChrome'sV8JavaScriptengine

▸ Event-drivenarchitecture

▸ Non-blockingI/OAPI

Source:http://code-maven.com

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

NodeJS–EventLoop

Source:http://softwareengineeringdaily.com

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

Source:http://www.slideshare.net/yurabogdanov/nodejs-talken

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

NodeJS–CPUBOUND&IOBOUND

STACKS JAVASCRIPT HAS BEEN INVOLVING

Backendframeworks

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

▸ Express:AminimalandflexibleNode.jswebapplicationframeworkthatprovidesarobustsetoffeaturesforwebandmobileapplications.

▸ koa:AnewwebframeworkdesignedbytheteambehindExpress,whichaimstobeasmaller,moreexpressive,andmorerobustfoundationforwebapplicationsandAPIs.

▸ Hapi:Enablesdeveloperstofocusonwritingreusableapplicationlogicinsteadofspendingtimebuildinginfrastructure.

FRONT-END

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

STACKS JAVASCRIPT HAS BEEN INVOLVING

SPAFrameworks

Source:http://brewhouse.io

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

Front-EndWorkflow

Source:http://joellongie.com/

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

Mycurrentfront-endtools&frameworks

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

▸ Packagemanager:NPM▸ Taskrunner:Gulp▸ Modulebundler:Webpack▸ Framework:React+Redux▸ Testframework:Mocha▸ Codequalitytool:ESlint,Babel

DATABASES&MOBILE/DESKTOP

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

STACKS JAVASCRIPT HAS BEEN INVOLVING

Databases

▸ ApacheCouchDB™:AdatabasethatusesJSONfordocuments,JavaScriptforMapReduceindexes,andregularHTTPforitsAPI

▸ MongoDB:Across-platformdocument-orienteddatabase(NoSQL),useJSONfordocumentsJavaScriptobjectquerying

▸ PouchDB:Adatabasewithinbrowserwascreatedtohelpwebdevelopersbuildapplicationsthatworkaswellofflineastheydoonline.

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

STACKS JAVASCRIPT HAS BEEN INVOLVING

Mobile/DesktopApplications

▸ Buildcross-platformweb-baseddesktopapplicationwithElectron

▸ ReactNative:AframeworktobuildnativemobileappsusingReact(Notacrossplatformframework)

▸ Cordova:WrapsyourHTML/JavaScriptappintoanativecontainerwhichcanaccessthedevicefunctionsofseveralplatforms.

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JavaScriptcandoalmosteverythingnow!

JAVASCRIPT–NOLONGERA“TOY”LANGUAGE

TEABREAK(IN10MINS)

IT’STHENEXTVERSIONOFJAVASCRIPT,ANDITHASSOMEGREATNEWFEATURES.

ECMAScript6(ES6):What’sNewInTheNextVersionOfJavaScript

www.smashingmagazine.com

SIGNIFICANT UPDATES FROM ES6/7

JAVASCRIPT–NOLONGERA“TOY”LANGUAGE

Here’snotafullwalkthroughofES6/7features

SIGNIFICANT UPDATES FROM ES6/7

WhatisES6/7

▸ JavaScripthasbeenstandardizedsince1998underthenameECMAScriptorES

▸ EShasbeendesignedbyTC39(TechnicalCommittee39)▸ ESreleasesperyear(since2015)▸ ES6(ECMAScript2015)wasfinalizedonJune17,2015▸ ES7(ECMAScript2016)isworkinprocess

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

MINORUPDATES

▸ letandconst▸ letisvarwithblockscope

▸ templateliterals

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

MINORUPDATES

▸ fatarrowfunction▸ ()=>{}

▸ For..Of

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

CLASSES

▸ Declareaclass

▸ Initializenewobject

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

ASYNC-CALLBACKHELL

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

ASYNC-PROMISE

▸ Simplyunderstanding:ithassuccessandfailurecallbacks

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

ASYNC-PROMISE

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

ASYNC-ChainingPromises

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

SIGNIFICANT UPDATES FROM ES6/7

ASYNC-ASYNC/AWAIT

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

FormoreES6featurespleasefindhere:http://es6-features.org

ForES7async/awaitfeature:https://github.com/tc39/ecmascript-asyncawait

JAVASCRIPT–NOLONGERA“TOY”LANGUAGE

DEMO

REDUX+BABEL+WEBPACK

JAVASCRIPT–NOLONGERA“TOY”LANGUAGE

QUIZ

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

QUIZ-1

WhatdoesNPMstandfor?1.NodePullingMessage2.NodePackageManagement3.NodePackageMinimization4.NodePackageManager

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

QUIZ-2

WhatisReactNative?1.Cross-platformframework2.Web-basedmobileapplication3.BuildingnativeappswithJavaScript4.Desktopbuilder

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

QUIZ3-TemplateLiterals

Whatiscorrectconvert?

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

OpenQuestion

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

TAKEAWAYS

▸ JavaScriptisnolongeratoyandamateurlanguage.Letchangeyourthought(ifyouhave)aboutit.

▸ JavaScripthaschangedrapidlyonmanytechnologystacks

▸ NewversionsofJavaScripthavecomeupveryfastandalotofchangesonJavaScript.

▸ Getpreparedyourself!

Source:http://99u.com

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

JAVASCRIPT–NOLONGERA“TOY”LANGUAGE

Q&A

Source:http://www.faithdeployed.com

THANKYOU

©2013KMSTechnology