Everything You Always Wanted To Know About … JavaScript

Tomasz Masternak

Why JavaScript? Widely used,

Web, Phones, Tablets, TV Sets, …

No choice, It is here and is going to stay,

At first seems like C#, It is not!

Agenda

Language,Technology,Libraries, Tools,Additional Resources,

Language Scoping – static and dynamic, Methods as first class citizens, Differential inheritance,

Types Simple,

number, string, boolean, null, undefined, They have methods like objects, Immutable,

Objects, function, array, regular-expression, object literals, Bag of things – hashtables, Never copied – always passed as reference,

Objects Literals,

{ <name1>: <value1>, <name2>: <value2>, …} Mutations,

Property: modification, creation, deletion, Hidden link to Prototype,

One level up in inheritance chain, It is used during member retrieval, Literals link to Object.prototype,

Reflection, for .. in, hasOwnProperty function,

Type augmentation Every type (simple or object) has a prototype,

[Object|Function|Array…].prototype, Instance has a hidden prototype link, Somehow similar to extensions methods, More on that latter,

ObjectA

ObjectB

ObjectC

Functions Functions are objects,

Bag of properties, Hidden prototype link - Function.prototype, Hidden content – function body, Hidden context – closure,

Can be invoked, Function literals – lambdas in C# 4 invocation patterns,

Differ function context ,

Invocation patterns 4 types,

Method invocation, Function invocation, Constructor invocation, Apply invocation,

One function can be invoked by each pattern, Pattern defines this reference binding.

Functions Reflection,

arguments – implicit argument, Return,

value, undefined, this – for constructor pattern, Exceptions,

try – catch – finally, single catch, one can throw any object

Scope Defines visibility and lifetime of the variables, JavaScript vs C#,

At first seems quite similar – identical, … but it is not ,

Variable definition best practices, Define all variables with var, Put all definitions at the top,

Scope and Closure Function has access to variables declared

outer function, this and arguments are exceptions,

What if inner function has longer lifetime? A closure is created,

That gives interesting possibilities , access privileges – module pattern, variable sharing – also source of confusion, this – that pattern

Inheritance No classes only object instances,

a.k.a. differential inheritance, Prototype based,

Object.prototype

Function.prototype

Number.prototype

String.prototype

Inheritance Syntax,

Vague – pretending it is class based, Constructor function,

Object.prototype

Fprototype

this

{ }

{surname: }

Inheritance Another class in inheritance chain,

It could not be more intuitive , Problems,

No private members, No super reference, Forget about new and a global variable is created

Inheritance Can be done better,

Type augmentation, Functional, Mix-ins Support from frameworks $.extend, Class.create,

Usually try to pretend it is normal OOP,

It is worth knowing the internals,

Web WWW = HTML + CSS + JavaScript, Interactive part of Web pages,

I never heard about Node.js so don’t ask ,

Fetch

Parse

Flow

Paint

Url Cache TreeDisplay

ListPixels

Loading Load and run delivery,

<script> - download and run JavaScript content, Avoid code inlining,

Page could be half-loaded, Scripts are downloaded sequentially,

Asynchronous load possible – tag inlining, Loading sequence best practice,

Content, Styling, Interactivity,

Linking Linking,

Implicit global object, It should be treated as namespace!,

Possible name clashes otherwise, Best practices,

No global objects, “Long enough” namespaces to avoid problems,

Order matters esp. when using 3rd party libraries, Tools support for the rescue (tools section)

Threading Interactivity loop,

Single thread,

Script

Flow Paint

Event

• Timer• UI Event• I/O Completion• Fetch engine• …

Communication XmlHttpRequest – Http requests,

Problem with format, Problem with Same-Origin-Policy,

Site A

Site B

BrowserJS

Code

GET

GET

GET

Communication JSONP,

Script tag added dynamically, Query string holds callback function name, Good jQuery support, Hack used by most of big companies,

Cross-Site Resource Sharing, W3C spec. – supported by most modern browsers,

WCF services – easy support for both, Custom behavior on service level ,

Security Minification/obsfuscation

Great but ... , Once script is downloaded,

Client can do anything he wants with it, BingMap approach,

Script can do anything it wants , All sorts of attacks – XSS, XSRF …

Libraries jQuery,

jQuery.BBQ jQuery.UI, jQuery.Templates, jQuery.Addresses,

Amplify.js Modernizr.js Knockout.js

Tools Knapsack.js JsLint Reshaper 6

Further reading Project Silk

http://silk.codeplex.com/ Windows 8 Metro UI

http://www.buildwindows.com/ Knockout.js

http://learn.knockoutjs.com/#/?tutorial=intro