Modern JavaScript DevelopmentMatteo BagliniSoftware Developer, Freelance

@matteobaglini

matteo.baglini@gmail.com www.dotnettoscana.org

#jsfull

Thanks to our sponsor

Why JavaScript?How it all could have happened

The Birth of JavaScript

“The World's Most Misunderstood Programming

Language”by Douglas Crockford

The Ancestors of JavaScript Functions (Lamba) Lexical Scope Loosely Typed

Prototypal Inheritance Dynamic Objects

Syntax Some convention Name (Part)

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

* Work In Progress

“JavaScript is the only language people feel like they don't need to learn to use it”

by Douglas Crockford

Comes Web 2.0 & UX

“Hidden under a hugesteaming pile of

goodintentions and blunders is anelegant,

expressiveprogramming language. A language of many

contrasts.”by Douglas Crockford

JavaScript Popularity

Back to BasicsJavaScript Building Block

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

Functions

Functions Fundamental modular unit Encloses a set of

statements Code Reuse Information Hiding Object Composition

Scope No block-level Lexical Scoping Function

(everywhere) Global Scope Chain

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

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

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)

Objects

Prototype

twitter

account: ...

prototype: -

name

first: ...

last: ...

prototype: -

Object

prototype: -

Linkage feature that allows one object to inherit the properties of another

Context (this) ‘This’ represent the context object Determined by the invocation pattern Method invocation Function invocation Constructor

invocation Apply invocation

Context (this)

Object WayObject Oriented Programming and JavaScript

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

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

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

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

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

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

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

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

Pseudoclassical To The Max

“Favor object composition over class inheritance”

by Erich Gamma (GoF)

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)

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

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

Functional WayFunctional Programming and JavaScript

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

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

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

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

Iterator

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

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

ToolboxJavaScript Must Have Tools

Static Code Analysis Programs

by Douglas Crockford

Static Code Analysis Programs

Playground

Browser Inspector

Pack It!Organize the code base

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

directive

Namespace Pattern Remove boring definition code Use a namespace

builder utility method

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 

Module Pattern

But is not enough, we need more…

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

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

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

RequireJS Resolve Dependency How to refer to other units of code

Test Early Test OftenJavaScript Testing Strategy

Why is testing important?

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

Because JavaScript live into browser…

…and browsers, with different DOM API and

different language interpreters, make

JavaScript schizophrenic!

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 su

Grazie!#jsfull

http://www.dotnettoscana.org/javascript-full-immersion.aspx