Your SlideShare is downloading. ×
Modern JavaScript Development @ DotNetToscana
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modern JavaScript Development @ DotNetToscana


Published on

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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