• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Modern JavaScript Development @ DotNetToscana

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, Freelance@matteobaglinimatteo.baglini@gmail.com 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!#jsfullhttp://www.dotnettoscana.org/javascript-full-immersion.aspx