Modern JavaScript Development @ DotNetToscana

  • 851 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
851
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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