Your SlideShare is downloading. ×
0
ModernJavaScriptDevelopmentMatteo BagliniSoftware Developer, Freelance@matteobaglinimatteo.baglini@gmail.com www.dotnettos...
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 ScopeLooselyTypedPrototypalInheritanceDynamicObjectsSyntaxSomeconventio...
Did you mean ECMAScript?1996 – First public release1999 – Becomes standard ECMA-262 asECMAScript 32009 – Major update ECMA...
“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 ...
JavaScript Popularity
Back to BasicsJavaScript Building Block
FunctionsFunctions are first-class objectsCan be created at runtimeCan be stored in variablesCan be passed as parameters t...
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 object...
Objects
Prototypetwitteraccount: ...prototype: -namefirst: ...last: ...prototype: -Objectprototype: -Linkage feature thatallows on...
Context (this)„This‟ represent thecontext objectDetermined by theinvocation patternMethod invocationFunction invocationCon...
Context (this)
Object WayObject Oriented Programming and JavaScript
Object CreationJavaScript providesseveral different ways tocreate an objectObject LiteralWhen we need onlyone object of so...
Object CreationJavaScript providesseveral different ways tocreate an objectConstructor FunctionWhen we need manyindependen...
Object CreationJavaScript providesseveral different ways tocreate an objectECMAScript 5Creating an objectwithout going thr...
Information HidingJavaScript does notoffer accessibility levels(public, private, etc.) onmembersThis does not meanthat Jav...
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 interface...
Inheritance(Pseudoclassical)Objects produced byconstructur functionsThe prototype objectis the place whereinherited traits...
Pseudoclassical To The MaxBuild a special classobject thatencapsulate repetitivecodeUse class object todefine other classI...
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 (Dif...
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 newobjectDefine...
CallbackFunctions can make iteasier to deal withdiscontinuous eventsTypically used tomake anasynchronousrequestsCombining ...
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 item...
Iterator
CurryIs a functiontransformationprocess (HaskellCurry)Produce a newfunction by combininga function and anargumentWhen invo...
MemoizationFunctions canremember the resultsof previous operationsUse a simple cachewith combination ofobjects and arraysS...
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”...
Namespace PatternRemove boringdefinition codeUse a namespacebuilder utility method
Module PatternModules are anintegral piece, itprovides a way ofwrapping methodsand variablesProtecting pieces fromleaking ...
Module Pattern
But is not enough, we needmore…
Asynchronous ModuleDefinition Pattern (AMD)A format for writingmodular JavaScript inthe browserSeparate moduledefinition (...
RequireJS Setup/StartupAdd require.js to thescripts directoryAdd customJavaScript applicationstart file to the scriptsdire...
RequireJS Module DefinitionHow to encapsulate apiece of code into auseful unitHow to register itscapability/export avalue ...
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
Upcoming SlideShare
Loading in...5
×

Modern JavaScript Development @ DotNetToscana

940

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
940
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Modern JavaScript Development @ DotNetToscana"

  1. 1. ModernJavaScriptDevelopmentMatteo BagliniSoftware Developer, Freelance@matteobaglinimatteo.baglini@gmail.com www.dotnettoscana.o#jsfull
  2. 2. Thanks to our sponsor
  3. 3. Why JavaScript?How it all could have happened
  4. 4. The Birth of JavaScript
  5. 5. “The Worlds Most MisunderstoodProgramming Language”by Douglas Crockford
  6. 6. The Ancestors of JavaScriptFunctions(Lamba)Lexical ScopeLooselyTypedPrototypalInheritanceDynamicObjectsSyntaxSomeconventionName (Part)
  7. 7. 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
  8. 8. “JavaScript is the only languagepeople feel like they dont need tolearn to use it”by Douglas Crockford
  9. 9. Comes Web 2.0 & UX
  10. 10. “Hidden under a hugesteamingpile of goodintentions andblunders isanelegant, expressiveprogramming language. A language of manycontrasts.”by Douglas Crockford
  11. 11. JavaScript Popularity
  12. 12. Back to BasicsJavaScript Building Block
  13. 13. 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
  14. 14. Functions
  15. 15. FunctionsFundamental modularunitEncloses a set ofstatementsCode ReuseInformation HidingObject Composition
  16. 16. ScopeNo block-levelLexical ScopingFunction (everywhere)GlobalScope Chain
  17. 17. HoistingDeclaration is moved tothe top of the scopeAlso for functiondeclaration
  18. 18. ClosureInner function getaccess to variables andparameter of parentfunctionVariables, not values
  19. 19. ObjectsJavaScript isfundamentally aboutobjectsArrays are objectsFunctions are objectsObjects are objectsSo what are objects?Objects are collectionsof name-value pairs(properties)
  20. 20. Objects
  21. 21. Prototypetwitteraccount: ...prototype: -namefirst: ...last: ...prototype: -Objectprototype: -Linkage feature thatallows one object toinherit the properties ofanother
  22. 22. Context (this)„This‟ represent thecontext objectDetermined by theinvocation patternMethod invocationFunction invocationConstructor invocationApply invocation
  23. 23. Context (this)
  24. 24. Object WayObject Oriented Programming and JavaScript
  25. 25. Object CreationJavaScript providesseveral different ways tocreate an objectObject LiteralWhen we need onlyone object of somekindReduce a largenumber of parametersCollect settings
  26. 26. Object CreationJavaScript providesseveral different ways tocreate an objectConstructor FunctionWhen we need manyindependent instanceof some objectAdd constructorlogicReduce memoryallocation
  27. 27. Object CreationJavaScript providesseveral different ways tocreate an objectECMAScript 5Creating an objectwithout going throughits constructorBetter object‟sproperties specification
  28. 28. Information HidingJavaScript does notoffer accessibility levels(public, private, etc.) onmembersThis does not meanthat JavaScript objectscan‟t have privatemembers
  29. 29. Information HidingThe array will becreated each time thefunction is invoked
  30. 30. 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
  31. 31. Inheritance(Pseudoclassical)Objects produced byconstructur functionsThe prototype objectis the place whereinherited traits are tobe depositedCreate an objectwhose prototype isFunction‟s prototypeand initialize itexecuting Function
  32. 32. Pseudoclassical To The MaxBuild a special classobject thatencapsulate repetitivecodeUse class object todefine other classInstantiate new objectfrom class
  33. 33. Pseudoclassical To The Max
  34. 34. “Favor object composition overclass inheritance”by Erich Gamma (GoF)
  35. 35. Inheritance (Prototypal)JavaScript natual wayClass-freeObjects inherit fromobjects (Delegation)Customizing the newone (DifferentialInheritance)Officially a part of thelanguage(ECMAScript 5)
  36. 36. Inheritance (Copying)The easiest wayObjects inherit fromobjects(Shallow/Deep Copy)
  37. 37. Inheritance (Mixins)Simulate multi-inheritanceObjects inherit frommany objects(Shallow/Deep Copy)
  38. 38. Functional WayFunctional Programming and JavaScript
  39. 39. Inheritance (Functional)Also known as PowerConstructorsDefine maker functioncomposed by fourstepsCreates a newobjectDefines privatemembersAugments that newobjectReturns that newobject
  40. 40. CallbackFunctions can make iteasier to deal withdiscontinuous eventsTypically used tomake anasynchronousrequestsCombining withclosure it become angreat way to hide thecomplexity
  41. 41. CallbackTake care to use "this"in the callbackBe careful whencallback is a methodof an object
  42. 42. IteratorInternal (passive)iterator controlled bythe aggregate objectTake a callback asparameterApply callback foreach itemCompact, hidecomplex traverse logic
  43. 43. Iterator
  44. 44. CurryIs a functiontransformationprocess (HaskellCurry)Produce a newfunction by combininga function and anargumentWhen invoked, returnsthe result of callingthat originalfunction, passing it allof the arguments
  45. 45. MemoizationFunctions canremember the resultsof previous operationsUse a simple cachewith combination ofobjects and arraysSpeed up execution
  46. 46. ToolboxJavaScript Must Have Tools
  47. 47. Static Code AnalysisProgramsby Douglas Crockford
  48. 48. Static Code AnalysisPrograms
  49. 49. Playground
  50. 50. Browser Inspector
  51. 51. Pack It!Organize the code base
  52. 52. Namespace PatternCreate a single globalvariable for yourapplicationAssign namespaceobject to local variableAct as “import”directive
  53. 53. Namespace PatternRemove boringdefinition codeUse a namespacebuilder utility method
  54. 54. Module PatternModules are anintegral piece, itprovides a way ofwrapping methodsand variablesProtecting pieces fromleaking into the globalscopeClean solution forshielding logic
  55. 55. Module Pattern
  56. 56. But is not enough, we needmore…
  57. 57. Asynchronous ModuleDefinition Pattern (AMD)A format for writingmodular JavaScript inthe browserSeparate moduledefinition (define) anddependencies loading(require)All can beasynchronouslyloaded
  58. 58. RequireJS Setup/StartupAdd require.js to thescripts directoryAdd customJavaScript applicationstart file to the scriptsdirectory
  59. 59. RequireJS Module DefinitionHow to encapsulate apiece of code into auseful unitHow to register itscapability/export avalue for the module
  60. 60. RequireJS ResolveDependencyHow to refer to otherunits of code
  61. 61. Test Early TestOftenJavaScript Testing Strategy
  62. 62. Why is testing important?
  63. 63. Automated testing is veryimportant with dynamiclanguages, but it is even more sowith JavaScript
  64. 64. Because JavaScript live intobrowser…
  65. 65. …and browsers, with differentDOM API and different languageinterpreters, make JavaScriptschizophrenic!
  66. 66. Unit Testing frameworks
  67. 67. QUnit Step 1 - Tests
  68. 68. QUnit Step 2 – Run/Result
  69. 69. JsTestDriver
  70. 70. Headless Testing
  71. 71. Karma way (ex Testacular)
  72. 72. Keep It Simple
  73. 73. Let‟s StudyJavaScript Books
  74. 74. Books
  75. 75. Books
  76. 76. Tutto il materiale di questa sessione suGrazie!#jsfullhttp://www.dotnettoscana.org/javascript-full-immersion.aspx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×