Modern JavaScript Development @ DotNetToscana
Upcoming SlideShare
Loading in...5

Modern JavaScript Development @ DotNetToscana






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Modern JavaScript Development @ DotNetToscana Modern JavaScript Development @ DotNetToscana Presentation Transcript

  • ModernJavaScriptDevelopmentMatteo BagliniSoftware Developer, www.dotnettoscana.o#jsfull
  • Thanks to our sponsor
  • Why JavaScript?How it all could have happened
  • The Birth of JavaScript
  • “The Worlds Most MisunderstoodProgramming Language”by Douglas Crockford
  • The Ancestors of JavaScriptFunctions(Lamba)Lexical ScopeLooselyTypedPrototypalInheritanceDynamicObjectsSyntaxSomeconventionName (Part)
  • Did you mean ECMAScript?1996 – First public release1999 – Becomes standard ECMA-262 asECMAScript 32009 – Major update ECMAScript 52011 – Last review ECMAScript 5.1 (ISO/IEC16262:2011)WIP* – Next version ECMAScript 6
  • “JavaScript is the only languagepeople feel like they dont need tolearn to use it”by Douglas Crockford
  • Comes Web 2.0 & UX
  • “Hidden under a hugesteamingpile of goodintentions andblunders isanelegant, expressiveprogramming language. A language of manycontrasts.”by Douglas Crockford
  • JavaScript Popularity
  • Back to BasicsJavaScript Building Block
  • FunctionsFunctions are first-class objectsCan be created at runtimeCan be stored in variablesCan be passed as parameters to functionsCan be returned by functionsCan be expressed as anonymous literals
  • Functions
  • FunctionsFundamental modularunitEncloses a set ofstatementsCode ReuseInformation HidingObject Composition
  • ScopeNo block-levelLexical ScopingFunction (everywhere)GlobalScope Chain
  • HoistingDeclaration is moved tothe top of the scopeAlso for functiondeclaration
  • ClosureInner function getaccess to variables andparameter of parentfunctionVariables, not values
  • ObjectsJavaScript isfundamentally aboutobjectsArrays are objectsFunctions are objectsObjects are objectsSo what are objects?Objects are collectionsof name-value pairs(properties)
  • Objects
  • Prototypetwitteraccount: ...prototype: -namefirst: ...last: ...prototype: -Objectprototype: -Linkage feature thatallows one object toinherit the properties ofanother
  • Context (this)„This‟ represent thecontext objectDetermined by theinvocation patternMethod invocationFunction invocationConstructor invocationApply invocation
  • Context (this)
  • Object WayObject Oriented Programming and JavaScript
  • Object CreationJavaScript providesseveral different ways tocreate an objectObject LiteralWhen we need onlyone object of somekindReduce a largenumber of parametersCollect settings
  • Object CreationJavaScript providesseveral different ways tocreate an objectConstructor FunctionWhen we need manyindependent instanceof some objectAdd constructorlogicReduce memoryallocation
  • Object CreationJavaScript providesseveral different ways tocreate an objectECMAScript 5Creating an objectwithout going throughits constructorBetter object‟sproperties specification
  • Information HidingJavaScript does notoffer accessibility levels(public, private, etc.) onmembersThis does not meanthat JavaScript objectscan‟t have privatemembers
  • Information HidingThe array will becreated each time thefunction is invoked
  • Information HidingWe can use functionsand closure to makemodules.A module is a functionor object thatpresents an interfacebut that hides itsstate andimplementation.Also known as:Module Pattern
  • Inheritance(Pseudoclassical)Objects produced byconstructur functionsThe prototype objectis the place whereinherited traits are tobe depositedCreate an objectwhose prototype isFunction‟s prototypeand initialize itexecuting Function
  • Pseudoclassical To The MaxBuild a special classobject thatencapsulate repetitivecodeUse class object todefine other classInstantiate new objectfrom class
  • Pseudoclassical To The Max
  • “Favor object composition overclass inheritance”by Erich Gamma (GoF)
  • Inheritance (Prototypal)JavaScript natual wayClass-freeObjects inherit fromobjects (Delegation)Customizing the newone (DifferentialInheritance)Officially a part of thelanguage(ECMAScript 5)
  • Inheritance (Copying)The easiest wayObjects inherit fromobjects(Shallow/Deep Copy)
  • Inheritance (Mixins)Simulate multi-inheritanceObjects inherit frommany objects(Shallow/Deep Copy)
  • Functional WayFunctional Programming and JavaScript
  • Inheritance (Functional)Also known as PowerConstructorsDefine maker functioncomposed by fourstepsCreates a newobjectDefines privatemembersAugments that newobjectReturns that newobject
  • CallbackFunctions can make iteasier to deal withdiscontinuous eventsTypically used tomake anasynchronousrequestsCombining withclosure it become angreat way to hide thecomplexity
  • CallbackTake care to use "this"in the callbackBe careful whencallback is a methodof an object
  • IteratorInternal (passive)iterator controlled bythe aggregate objectTake a callback asparameterApply callback foreach itemCompact, hidecomplex traverse logic
  • Iterator
  • CurryIs a functiontransformationprocess (HaskellCurry)Produce a newfunction by combininga function and anargumentWhen invoked, returnsthe result of callingthat originalfunction, passing it allof the arguments
  • MemoizationFunctions canremember the resultsof previous operationsUse a simple cachewith combination ofobjects and arraysSpeed up execution
  • ToolboxJavaScript Must Have Tools
  • Static Code AnalysisProgramsby Douglas Crockford
  • Static Code AnalysisPrograms
  • Playground
  • Browser Inspector
  • Pack It!Organize the code base
  • Namespace PatternCreate a single globalvariable for yourapplicationAssign namespaceobject to local variableAct as “import”directive
  • Namespace PatternRemove boringdefinition codeUse a namespacebuilder utility method
  • Module PatternModules are anintegral piece, itprovides a way ofwrapping methodsand variablesProtecting pieces fromleaking into the globalscopeClean solution forshielding logic
  • Module Pattern
  • But is not enough, we needmore…
  • Asynchronous ModuleDefinition Pattern (AMD)A format for writingmodular JavaScript inthe browserSeparate moduledefinition (define) anddependencies loading(require)All can beasynchronouslyloaded
  • RequireJS Setup/StartupAdd require.js to thescripts directoryAdd customJavaScript applicationstart file to the scriptsdirectory
  • RequireJS Module DefinitionHow to encapsulate apiece of code into auseful unitHow to register itscapability/export avalue for the module
  • RequireJS ResolveDependencyHow to refer to otherunits of code
  • Test Early TestOftenJavaScript Testing Strategy
  • Why is testing important?
  • Automated testing is veryimportant with dynamiclanguages, but it is even more sowith JavaScript
  • Because JavaScript live intobrowser…
  • …and browsers, with differentDOM API and different languageinterpreters, make JavaScriptschizophrenic!
  • Unit Testing frameworks
  • QUnit Step 1 - Tests
  • QUnit Step 2 – Run/Result
  • JsTestDriver
  • Headless Testing
  • Karma way (ex Testacular)
  • Keep It Simple
  • Let‟s StudyJavaScript Books
  • Books
  • Books
  • Tutto il materiale di questa sessione suGrazie!#jsfull