Modern JavaScript Development @ DotNetToscana
-
Upload
baglinim -
Category
Technology
-
view
919 -
download
3
Transcript of Modern JavaScript Development @ DotNetToscana
Modern JavaScript DevelopmentMatteo BagliniSoftware Developer, Freelance
@matteobaglini
[email protected] 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
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