From Noob To Launch – What is Javascript? – API Driven Development

What is Javascript?

Javascript is a dynamically typed scripting language most commonly used for web application development.

In Javascript, everything is an object, and all objects are passed by reference.

What is an Object?

In the most abstract sense, an object is a constant pointer to specific memory.

In usage, an object is a collection of properties: key : value pairs for specific data.

Some properties are actually functions, known as methods.

Basic objects are used often, but aren't actually that useful.

Most applications eventually need reusable object templates.

Some applications also need to be able to know when an object's property changes.

Sometimes you need more advanced behavior from your properties

• Execute code when a value changes
• Controlled Access

Variable Scope

Javascript applications typically have three scopes to consider.

• Global (e.g. window)

Variable Scope

Javascript applications typically have three scopes to consider.

• Global (e.g. window)
• Closure

Variable Scope

Javascript applications typically have three scopes to consider.

• Global (e.g. window)
• Closure
• Local

Function Methods

I mentioned that functions are objects too. This means that functions also have properties and methods.

We say this above with closures and reusable objects, both of which utilized a function wrapper.

Three function methods you should know about: .call(), .apply() and .bind()

Programming in a Web Environment

Single Threaded Applications

Web applications are "mostly" limited to a single threaded environment.

All of your code, and all the rest of the code on a page, runs on a single blocking thread.

Some modern features (WebGL, CSS Transitions) greatly improve single threaded performance.

Some tricks (using document fragments, caching) are also used to improve performance.

What Synchronous Means

All function calls, including functions triggered by events, are pushing into a single callstack executed in the order they were received.

You can write code to mess with this order in a specific manner (controlled event loop), or you can use setTimeout to delay execution.

Takeaways from the previous example.

alert (usually) pauses the thread.

your entire script finishes executing before delayed functions are processed.

A timeout of 1 millisecond does not mean your code will execute 1 millisecond later.

A timeout (usually) means your code will execute after "at least N milliseconds."

The function invoked later by setTimeout is known as a callback.

What is a callback?

A callback is some code you want to run later, after something else has finished executing.

Are callbacks good?

That depends on the circumstance, but often no.

Sometimes you need to execute one function on success, and another on failure.

This is especially true when requesting data from an external location.

The solution: promises

Promises

Promises are functions that execute one function on success and another function on failure.

Promises can be chained and grouped

Libraries that provide a promise feature should conform to the Promises/A+ spec.

RSVP.js is one such a library, and is used within Ember.js

Promise Arrays

Sometimes you have a collection of unrelated promises for which you need to ensure all succeed.

Sometimes you will want these promises executed in a particular order.

Asynchronous Programming

Events, Callbacks, setTimeout, Promises, and AJAX collectively make up "asynchronous behavior".

The web is driven by asynchronous behavior; AJAX is an acronym for...

Asynchronous JavaScript and XML (AJAX)

Transports and "RealTime"

AJAX Requests typically utilize a basic HTTP request to send or retrieve data.

Basic HTTP requests have a connection that closes quickly and cannot handle much data.

Other request types involve HTTP Long-poll, WebSockets, and Flash Sockets.

Most "real-time" applications utilize all four request types in order to support all browser environments.

Keyterms Defined

TCP/IP:

Socket:

Port:

HTTP: (Hyper Text Transfer Protocol).

HTTP Long-Poll

Essentially the HTTP connection gets held open longer so that it can be reused and more data sent through as it becomes ready.

HTTP and HTTP Long-Poll real time solutions involve a constant stream of new HTTP requests to ensure that one connection is always present as soon as the previous connection closes.

Flash Sockets

The Java based Flash plugin offers a socket API allowing for streaming. Where available, flash sockets are the most stable and reliable transport.

Concerns about Java and Flash security as a whole mean that this transport option is often under-utilized.

Custom Java plugins and applets can provide sockets as well, but these would need to be installed by the end user.

WebSockets

WebSockets are a new browser API that allows for a "socket-like" transport.

WebSockets aren't widely supported yet, but most modern browsers have a stable enough implementation for us to utilize them extensively.

The Web Challenge

Web standards, browser APIs, and browser environments are always-changing.

What works in Javascript, HTML, and CSS today might not work tomorrow and likely didn't work yesterday.

People do use older browsers.

Even "modern" browsers have differing opinions on what the standards specs mean or should be, and implement them differently.

Graceful Degredation

The idea that technology should support the most recent standard, but "gracefully" fallback onto older standards when needed.

Works pretty well for HTML / CSS support.

Was the design principle behind "APE" and "Socket.io", but has been proven a flawed approach.

Socket.io's version of "Graceful Degredation"

• Use Flash Socket
• (else) use WebSockets (new)
• (else) use WebSockets (old)
• (else) use Long Poll Requests
• (else) use HTTP Requests

This causes problems because feature detection can take a while, can fail to ever resolve, and doesn't meet user expectations for fast connections.

Progressive Enhancement

The idea that technology should support the most basic version, then "gradually enhance" the experience for devices supporting newer standards.

Works really well for video, audio, and "web real-time"

Is the design principle behind "engine.io" as well as YouTube's video player.

Engine.io's version of "Progressive Enhancement"

• use HTTP Requests
• attempt Long Poll, if working use.
• attempt old WebSockets, if working use.
• attempt new WebSockets, if working use.
• attempt Flash Socket, if working use.

API Driven Development

What is an API?

API stands for "application programming interface".

An API is a collection of named functions that are grouped by a "namespace"

Most of the time, an API is synonymous with a "code library"

Wait, I thought an API was a collection of URLs?

They can be that too!

An API is a way to expose properties or methods to a user.

In a web based API, these properties and methods are accessd via URL instead of by invoking a function call.

What is API Driven Development?

In API driven development, an engineer scaffolds the functions or data an API should expose, then implements (programms) scripts to actually do so.

API driven development

• organizes code
• makes code and code libraries more human readable
• prevents namespace cluttering
• helps ensure future/backwards compatible software
• makes code behavior more quickly understood
• helps you develop with an "iterative/agile" approach.