76
Modern JavaScript Development Matteo Baglini Software Developer, Freelance @matteobaglini [email protected] www.dotnettoscan a.org #jsf ull

Modern JavaScript Development @ DotNetToscana

Embed Size (px)

Citation preview

Page 1: Modern JavaScript Development @ DotNetToscana

Modern JavaScript DevelopmentMatteo BagliniSoftware Developer, Freelance

@matteobaglini

[email protected] www.dotnettoscana.org

#jsfull

Page 2: Modern JavaScript Development @ DotNetToscana

Thanks to our sponsor

Page 3: Modern JavaScript Development @ DotNetToscana

Why JavaScript?How it all could have happened

Page 4: Modern JavaScript Development @ DotNetToscana

The Birth of JavaScript

Page 5: Modern JavaScript Development @ DotNetToscana

“The World's Most Misunderstood Programming

Language”by Douglas Crockford

Page 6: Modern JavaScript Development @ DotNetToscana

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

Prototypal Inheritance Dynamic Objects

Syntax Some convention Name (Part)

Page 7: Modern JavaScript Development @ DotNetToscana

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

Page 8: Modern JavaScript Development @ DotNetToscana

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

by Douglas Crockford

Page 9: Modern JavaScript Development @ DotNetToscana

Comes Web 2.0 & UX

Page 10: Modern JavaScript Development @ DotNetToscana

“Hidden under a hugesteaming pile of

goodintentions and blunders is anelegant,

expressiveprogramming language. A language of many

contrasts.”by Douglas Crockford

Page 11: Modern JavaScript Development @ DotNetToscana

JavaScript Popularity

Page 12: Modern JavaScript Development @ DotNetToscana

Back to BasicsJavaScript Building Block

Page 13: Modern JavaScript Development @ DotNetToscana

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

Page 14: Modern JavaScript Development @ DotNetToscana

Functions

Page 15: Modern JavaScript Development @ DotNetToscana

Functions Fundamental modular unit Encloses a set of

statements Code Reuse Information Hiding Object Composition

Page 16: Modern JavaScript Development @ DotNetToscana

Scope No block-level Lexical Scoping Function

(everywhere) Global Scope Chain

Page 17: Modern JavaScript Development @ DotNetToscana

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

Page 18: Modern JavaScript Development @ DotNetToscana

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

Page 19: Modern JavaScript Development @ DotNetToscana

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)

Page 20: Modern JavaScript Development @ DotNetToscana

Objects

Page 21: Modern JavaScript Development @ DotNetToscana

Prototype

twitter

account: ...

prototype: -

name

first: ...

last: ...

prototype: -

Object

prototype: -

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

Page 22: Modern JavaScript Development @ DotNetToscana

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

invocation Apply invocation

Page 23: Modern JavaScript Development @ DotNetToscana

Context (this)

Page 24: Modern JavaScript Development @ DotNetToscana

Object WayObject Oriented Programming and JavaScript

Page 25: Modern JavaScript Development @ DotNetToscana

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

Page 26: Modern JavaScript Development @ DotNetToscana

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

Page 27: Modern JavaScript Development @ DotNetToscana

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

Page 28: Modern JavaScript Development @ DotNetToscana

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

Page 29: Modern JavaScript Development @ DotNetToscana

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

Page 30: Modern JavaScript Development @ DotNetToscana

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

Page 31: Modern JavaScript Development @ DotNetToscana

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

Page 32: Modern JavaScript Development @ DotNetToscana

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

Page 33: Modern JavaScript Development @ DotNetToscana

Pseudoclassical To The Max

Page 34: Modern JavaScript Development @ DotNetToscana

“Favor object composition over class inheritance”

by Erich Gamma (GoF)

Page 35: Modern JavaScript Development @ DotNetToscana

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)

Page 36: Modern JavaScript Development @ DotNetToscana

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

Page 37: Modern JavaScript Development @ DotNetToscana

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

Page 38: Modern JavaScript Development @ DotNetToscana

Functional WayFunctional Programming and JavaScript

Page 39: Modern JavaScript Development @ DotNetToscana

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

Page 40: Modern JavaScript Development @ DotNetToscana

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

Page 41: Modern JavaScript Development @ DotNetToscana

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

Page 42: Modern JavaScript Development @ DotNetToscana

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

Page 43: Modern JavaScript Development @ DotNetToscana

Iterator

Page 44: Modern JavaScript Development @ DotNetToscana

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

Page 45: Modern JavaScript Development @ DotNetToscana

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

Page 46: Modern JavaScript Development @ DotNetToscana

ToolboxJavaScript Must Have Tools

Page 47: Modern JavaScript Development @ DotNetToscana

Static Code Analysis Programs

by Douglas Crockford

Page 48: Modern JavaScript Development @ DotNetToscana

Static Code Analysis Programs

Page 49: Modern JavaScript Development @ DotNetToscana

Playground

Page 50: Modern JavaScript Development @ DotNetToscana

Browser Inspector

Page 51: Modern JavaScript Development @ DotNetToscana

Pack It!Organize the code base

Page 52: Modern JavaScript Development @ DotNetToscana

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

directive

Page 53: Modern JavaScript Development @ DotNetToscana

Namespace Pattern Remove boring definition code Use a namespace

builder utility method

Page 54: Modern JavaScript Development @ DotNetToscana

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 

Page 55: Modern JavaScript Development @ DotNetToscana

Module Pattern

Page 56: Modern JavaScript Development @ DotNetToscana

But is not enough, we need more…

Page 57: Modern JavaScript Development @ DotNetToscana

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

Page 58: Modern JavaScript Development @ DotNetToscana

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

Page 59: Modern JavaScript Development @ DotNetToscana

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

Page 60: Modern JavaScript Development @ DotNetToscana

RequireJS Resolve Dependency How to refer to other units of code

Page 61: Modern JavaScript Development @ DotNetToscana

Test Early Test OftenJavaScript Testing Strategy

Page 62: Modern JavaScript Development @ DotNetToscana

Why is testing important?

Page 63: Modern JavaScript Development @ DotNetToscana

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

Page 64: Modern JavaScript Development @ DotNetToscana

Because JavaScript live into browser…

Page 65: Modern JavaScript Development @ DotNetToscana

…and browsers, with different DOM API and

different language interpreters, make

JavaScript schizophrenic!

Page 66: Modern JavaScript Development @ DotNetToscana

Unit Testing frameworks

Page 67: Modern JavaScript Development @ DotNetToscana

QUnit Step 1 - Tests

Page 68: Modern JavaScript Development @ DotNetToscana

QUnit Step 2 – Run/Result

Page 69: Modern JavaScript Development @ DotNetToscana

JsTestDriver

Page 70: Modern JavaScript Development @ DotNetToscana

Headless Testing

Page 71: Modern JavaScript Development @ DotNetToscana

Karma way (ex Testacular)

Page 72: Modern JavaScript Development @ DotNetToscana

Keep It Simple

Page 73: Modern JavaScript Development @ DotNetToscana

Let’s StudyJavaScript Books

Page 74: Modern JavaScript Development @ DotNetToscana

Books

Page 75: Modern JavaScript Development @ DotNetToscana

Books

Page 76: Modern JavaScript Development @ DotNetToscana

Tutto il materiale di questa sessione su

Grazie!#jsfull

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