Modern JavaScript Development @ DotNetToscana

Modern JavaScript Development Matteo Baglini Software Developer, Freelance @matteobaglini matteo.baglini@gmail.com www.dotnettoscana.o #jsfull

Why JavaScript?How it all could have happened

“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

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

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

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 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)

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

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

“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

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

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

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 DependencyHow to refer to other units of code

Test Early Test OftenJavaScript Testing Strategy

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!

Tutto il materiale di questa sessione su Grazie! #jsfull http://www.dotnettoscana.org/javascript-full-immersion.aspx

Modern JavaScript Development @ DotNetToscana

More Related Content

What's hot

Similar to Modern JavaScript Development @ DotNetToscana

More from Matteo Baglini

Recently uploaded

Modern JavaScript Development @ DotNetToscana