1. Modern
JavaScript
Development
Matteo Baglini
Software Developer, Freelance
@matteobaglini
matteo.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 World's Most Misunderstood
Programming Language”
by Douglas Crockford

6. The Ancestors of JavaScript
Functions
(Lamba)
Lexical Scope
Loosely
Typed
Prototypal
Inheritance
Dynamic
Objects
Syntax
Some
convention
Name (Part)

7. Did you mean ECMAScript?
1996 – First public release
1999 – Becomes standard ECMA-262 as
ECMAScript 3
2009 – Major update ECMAScript 5
2011 – Last review ECMAScript 5.1 (ISO/IEC
16262:2011)
WIP* – Next version ECMAScript 6

8. “JavaScript is the only language
people feel like they don't need to
learn to use it”
by Douglas Crockford

9. Comes Web 2.0 & UX

10. “Hidden under a hugesteaming
pile of goodintentions and
blunders is
anelegant, expressiveprogrammin
g language. A language of many
contrasts.”
by Douglas Crockford

11. JavaScript Popularity

12. Back to BasicsJavaScript Building Block

13. Functions
Functions are first-class objects
Can be created at runtime
Can be stored in variables
Can be passed as parameters to functions
Can be returned by functions
Can be expressed as anonymous literals

14. Functions

15. Functions
Fundamental modular
unit
Encloses a set of
statements
Code Reuse
Information Hiding
Object Composition

16. Scope
No block-level
Lexical Scoping
Function (everywhere)
Global
Scope Chain

17. Hoisting
Declaration is moved to
the top of the scope
Also for function
declaration

18. Closure
Inner function get
access to variables and
parameter of parent
function
Variables, not values

19. Objects
JavaScript is
fundamentally about
objects
Arrays are objects
Functions are objects
Objects are objects
So what are objects?
Objects are collections
of name-value pairs
(properties)

20. Objects

21. Prototype
twitter
account: ...
prototype: -
name
first: ...
last: ...
prototype: -
Object
prototype: -
Linkage feature that
allows one object to
inherit the properties of
another

22. Context (this)
„This‟ represent the
context object
Determined by the
invocation pattern
Method invocation
Function invocation
Constructor invocation
Apply invocation

23. Context (this)

24. Object WayObject Oriented Programming and JavaScript

25. Object Creation
JavaScript provides
several different ways to
create an object
Object Literal
When we need only
one object of some
kind
Reduce a large
number of parameters
Collect settings

26. Object Creation
JavaScript provides
several different ways to
create an object
Constructor Function
When we need many
independent instance
of some object
Add constructor
logic
Reduce memory
allocation

27. Object Creation
JavaScript provides
several different ways to
create an object
ECMAScript 5
Creating an object
without going through
its constructor
Better object‟s
properties specification

28. Information Hiding
JavaScript does not
offer accessibility levels
(public, private, etc.) on
members
This does not mean
that JavaScript objects
can‟t have private
members

29. Information Hiding
The array will be
created each time the
function is invoked

30. Information Hiding
We can use functions
and closure to make
modules.
A module is a function
or object that
presents an interface
but that hides its
state and
implementation.
Also known as:
Module Pattern

31. Inheritance
(Pseudoclassical)Objects produced by
constructur functions
The prototype object
is the place where
inherited traits are to
be deposited
Create an object
whose prototype is
Function‟s prototype
and initialize it
executing Function

32. Pseudoclassical To The Max
Build a special class
object that
encapsulate repetitive
code
Use class object to
define other class
Instantiate new object
from class

33. Pseudoclassical To The Max

34. “Favor object composition over
class inheritance”
by Erich Gamma (GoF)

35. Inheritance (Prototypal)
JavaScript natual way
Class-free
Objects inherit from
objects (Delegation)
Customizing the new
one (Differential
Inheritance)
Officially a part of the
language
(ECMAScript 5)

36. Inheritance (Copying)
The easiest way
Objects inherit from
objects
(Shallow/Deep Copy)

37. Inheritance (Mixins)
Simulate multi-
inheritance
Objects inherit from
many objects
(Shallow/Deep Copy)

38. Functional WayFunctional Programming and JavaScript

39. Inheritance (Functional)
Also known as Power
Constructors
Define maker function
composed by four
steps
Creates a new
object
Defines private
members
Augments that new
object
Returns that new
object

40. Callback
Functions can make it
easier to deal with
discontinuous events
Typically used to
make an
asynchronous
requests
Combining with
closure it become an
great way to hide the
complexity

41. Callback
Take care to use "this"
in the callback
Be careful when
callback is a method
of an object

42. Iterator
Internal (passive)
iterator controlled by
the aggregate object
Take a callback as
parameter
Apply callback for
each item
Compact, hide
complex traverse logic

43. Iterator

44. Curry
Is a function
transformation
process (Haskell
Curry)
Produce a new
function by combining
a function and an
argument
When invoked, returns
the result of calling
that original
function, passing it all
of the arguments

45. Memoization
Functions can
remember the results
of previous operations
Use a simple cache
with combination of
objects and arrays
Speed up execution

46. ToolboxJavaScript Must Have Tools

47. Static Code Analysis
Programs
by Douglas Crockford

48. Static Code Analysis
Programs

49. Playground

50. Browser Inspector

51. Pack It!Organize the code base

52. Namespace Pattern
Create a single global
variable for your
application
Assign namespace
object to local variable
Act as “import”
directive

53. Namespace Pattern
Remove boring
definition code
Use a namespace
builder utility method

54. Module Pattern
Modules are an
integral piece, it
provides a way of
wrapping methods
and variables
Protecting pieces from
leaking into the global
scope
Clean solution for
shielding logic

55. Module Pattern

56. But is not enough, we need
more…

57. Asynchronous Module
Definition Pattern (AMD)
A format for writing
modular JavaScript in
the browser
Separate module
definition (define) and
dependencies loading
(require)
All can be
asynchronously
loaded

58. RequireJS Setup/Startup
Add require.js to the
scripts directory
Add custom
JavaScript application
start file to the scripts
directory

59. RequireJS Module Definition
How to encapsulate a
piece of code into a
useful unit
How to register its
capability/export a
value for the module

60. RequireJS Resolve
DependencyHow to refer to other
units of code

61. Test Early Test
OftenJavaScript Testing Strategy

62. Why is testing important?

63. Automated testing is very
important with dynamic
languages, but it is even more so
with JavaScript

64. Because JavaScript live into
browser…

65. …and browsers, with different
DOM API and different language
interpreters, make JavaScript
schizophrenic!

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 su
Grazie!
#jsfull
http://www.dotnettoscana.org/javascript-full-immersion.aspx