Javascript FTW

JAVASCRIPT
FTW
This is not your slightly
older sibling’s scripting
language.

Pascal Rettig
On twitter @cykod

Thursday, June 23, 2011

JAVASCRIPT
WAS...
• Né Mocha by Netscape’s Brendan Eich
• Released as LiveScript in NN 2.0 Sept. 95’
• Renamed JavaScript, for no good reason,
in a move that will forever cause confusion
to managers and clients, who will continue
to insist on referring to the language as
Java and not understand the diﬀerence.


UNIVERSAL
PRAISE FOR
JAVASCRIPT..


“I was convinced that
we needed to build-in
a programming
language, but the
developers, Tim ﬁrst,
were very much
opposed. It had to
remain completely
declarative. Maybe, but
the net result is that
the programming-
vacuum ﬁlled itself
with the most horrible
kludge in the history
of computing:
Javascript.”
-Robert Cailliau

OK, MAYBE NOT..


WHY DID W E HATE
JAVASCRIPT SO MUCH?

JAVASCRIPT...
THE BA D PARTS
• Incompatible Implementations (Not
mentioning anyone related to this
building)
• OO, but not a classical inheritance
• Initial Implementation were slow
• It looked like a silly toy next to Flash
• No AJAX to start with (while Flash did)


THE B IGGEST R EASON:

• People didn’t know how to Program
in it.
• People didn’t know how to Program
large, well-designed systems in it
(And many didn’t think it was
possible)


WHAT
CHANGED?
The “Gmail” and “Google
Maps Era”
starting in 2004-2005
People saw what you could
do with large scale systems
built primarily in
JavaScript


WHAT
CHANGED?
Followed quickly by the
“Framework Era”
2005-Today
Popular, well supported
frameworks that made writing
cross-browser, dynamic code a
breeze.
Prototype, YUI, GWT,
MooTools, and jQuery


WHAT
CHANGED?
Finally the “Chrome” era
Late 2008-Today
Chrome was released and
set a high bar for Javascript
performance w/ V8 that lit
a ﬁre in other Browser
makers.

http://news.cnet.com/
8301-1001_3-10030888-92.html

SOME A WESOME T HINGS YOU
CAN D O IN JAVASCRIPT...
• Dynamically Check and
Uncheck checkboxes
• Load HTML DYNAMICALLY
and Asynchronously via
A-J-A-X
• Load images with a “Lightbox”
Eﬀect


JUST KIDDING...


THE REA L AWESOM E THINGS
YOU CAN DO IN JAVASCRIPT...

• cross-browser, cross-platform Game Development.
(& interactive data visualization)
• Mobile + Desktop App Development
• Audio processing and rendering
• Hardware accelerated 3D in the Browser
• Oﬄine Applications
• Server Side Development


THE ADVANTAGES
OF JAVASCRIPT
• Extremely low “Ceremony” language
• Most accessible language in world -
toolchain installed on almost 100% of
computers in the world.
• Hello World!
<script>
alert(“Hello World!”);
</script>


ATWOODS LAW
“I propose a corollary ... I'll call
Atwood's Law: any application that
can be written in JavaScript, will
eventually be written in JavaScript.”
-Jeﬀ Atwood (2007)


WE ARE ENTERING
THE “JAVASCR IPT AGE”
1991-1999: The HTML Age
2000-2009: The LAMP Age
2010-??: The Javascript Age

The Javascript age is about event streams. Modern web pages
are not pages, they are event-driven applications through which
information moves.
“The Javascript age brings us closer to a web that is not a global
digital library, but a global digital nervous system, whose
implications we are only beginning to apprehend.”
-http://metamarketsgroup.com/blog/node-js-and-the-javascript-
age/


ACTUALLY A COR OLLARY TO
“THE RULE OF LEAST POWER”

http://www.w3.org/2001/tag/doc/leastPower.html
Computer Science spent the last forty years making languages which were
as powerful as possible. Nowadays we have to appreciate the reasons for
picking not the most powerful solution but the least powerful. The less
powerful the language, the more you can do with the data stored in that
language. If you write it in a simple declarative from, anyone can write a
program to analyze it. If, for example, a web page with weather data has
RDF describing that data, a user can retrieve it as a table, perhaps average
it, plot it, deduce things from it in combination with other information. At
the other end of the scale is the weather information portrayed by the
cunning Java applet. While this might allow a very cool user interface, it
cannot be analyzed at all. The search engine ﬁnding the page will have no
idea of what the data is or what it is about. The only way to ﬁnd out what a
Java applet means is to set it running in front of a person.


JAVASCRIPT IN
A NUTSHELL
• 5 Basic Types: Bool, Number
(ﬂoat), String, Array, Object
• + Function as ﬁrst class objects.
• Very loosely typed
• Easily meta-programmed
• Support for Closures (Great for
Async Development)


DEBUGGING
JAVASCRIPT
• Aka Firebug + Built-in clones
• Now have an environment that
rivals the best IDE’s
• Inspection, Console, Step
debugging, Network, Proﬁling
• http://cykod.github.com/
AlienInvaders/


JAVASCRIPT IS A
LAX LANGUAGE - HOW
ABOUT SOME RIGOR?
Your javascript code will only be as
rigorous as you are.


CONSIDER
LINT’ING
http://javascriptlint.com/
http://jslint.com/
Browser (or Command line
tool by Matthias Miller)
built on the work done by
Douglas Crockford (“JS, the
good parts”)


LEARNING
JAVASCRIPT
Start with your “Crockford”
aka “Javascript: the Good
Parts”
JavaScript patterns builds
on the basics.
http://
javascript.infogami.com/
Javascript_in_Ten_Minutes


AUTOMATED
TESTING
FRAMEWORKS
• QUnit - used in JQuery
• Jasmine - Created by Pivotal
Labs, Inspired by RSpec


QUNIT
By John Resig, Founder of JQuery
http://docs.jquery.com/Qunit

test("a basic test example", function() {
ok( true, "this test is fine" );
var value = "hello";
equals( "hello", value, "We expect value to be hello" );
});

module("Module A");

test("first test within module", function() {
ok( true, "all pass" );
});


JASMINE
From Pivotal Labs, Successor to JsUnit,
inspired (partly) by RSpec
http://pivotal.github.com/jasmine/

describe('Calculator', function () {
var counter = 0

it('can add a number', function () {
counter = counter + 2; // counter was 0 before
expect(bar).toEqual(2);
});

it('can multiply a number', function () {
counter = counter * 5; // counter was 2 before
expect(bar).toEqual(10);
});
});


JAVASCRIPT
(AKA HTML5)
GAME
DEVELOPMENT
(Akihabara running on
iPhone, Android, Firefox, ...)
http://www.kesiev.com/
akihabara/demo/game-
solitude.html


IMPACT.JS
NOW RUNS
BROWSER +
IOS NATIVE
Native Hardware-
Accelerated Compatibility
Layer.
Biolab Disaster is in the
App Store.
All Javascript.

JAVASCRIPT
GAME DEV
• Cross browser, Cross
platform, game development
from a single codebase.
• No Curator (No App store)
• Web Sockets, Realtime
development


Q1 2010 Q4 2010 Q2 2011

STATE O F HTML5 GAME DEV

AUDIO
PROCESSING
• So far only FF4
• API’s for reading and writing audio
• Chrome developing a much more
feature-rich (& complicated)
version.


READING AUDIO
(BOCOUP.COM)

<audio id="input" src="../drumbeat.ogg" controls></audio>

<div id="display"></div>

<script>

var display = document.getElementById('display'),
input = document.getElementById('input');

input.addEventListener('MozAudioAvailable', function(e){
display.innerHTML += e.frameBuffer[0] + ", ";
}, false);

</script>


3 D IN THE BROWSEaRm/aquarium.html
u riu ooglecode.com/hg/aq
http://webglsamples.g oc ks/spacerocks.html
g lecode.com/hg/spacer
ht tp://webglsamples.goo


WEBGL
(OPENGL ES2.0)
IS IN PRODUCTION
• Chrome Stable
• Firefox 4
• Webkit Nightly’s
• an Opera Preview Release
• No IE (Sorry) - Silverlight only


MOBILE “ HTML5” FE ATURES EC)
THA N JUST THE HTML5 SP
(HTML5 HAS COME TO MEAN A LOT MORE

• CSS3 - visual goodies, transitions
• Audio, Video (Limited)
• WebSockets
• Local Storage
• Oﬄine Storage
• Canvas, SVG
• New Events (touch, orientation, accel)
• Geolocation (via GPS)
• All supported on Mobile Webkit stack


MOBILE
FRAMEWORKS
jQuery Mobile + Sencha
Touch are two methods of
creating a “native” feeling
experience.
Sencha:
http://bit.ly/jtWCxR
jQueryMobile:
http://bit.ly/mKBVgt


OFFLINE APPL ICATIONS
• Google Gears had been around for
a while (where we got a lot of cool
stuﬀ for HTML5)
• Replaced by HTML5 support for
cache manifest
• http://diveintohtml5.org/
oﬄine.html


DESKTOP +
MOBILE APP IN JS?
REALLY?
• Yes, and it works,
reasonably well
• http://www.appcelerator.com/
• http://www.phonegap.com/


TITANIUM / APPCELERATOR

• Build your UI in Javascript
• Assign properties like width, height, backgrounds,
etc.
• Access native functionality like camera, audio, etc.
• Releasing a Web/HTML5 version as well.
• A little Buggy, poorly doc’d.
• Slightly painful building UI components.


TITANIUM EXAMPLE


PHO NE GAP
• Build normal HTML Apps
• Works well with Sencha Touch
and jQuery mobile.
• Access to native features via
javascript objects.


JAVASCRIPT ON
THE SERVER
• Got a huge boost when Google
released V8 as an easily
embeddable server
• Node.js is the big project right
now.
• Single threaded, async framework
• Actually pretty Friggin fast.


SIMPLE NODE.JS
SERVER
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");

console.log('Server running at http://127.0.0.1:8124/');


BONUS USE
CASE
• Browser plugins - just HTML,
CSS, and Javascript
• http://code.google.com/
chrome/extensions/
getstarted.html


DEMO TIME
https://mozillademos.org/
demos/nocomply/
demo.html


THANKS!
QUESTIONS?

Pascal Rettig
cykod.com
Twitter @cykod


Javascript FTW

More Related Content

Viewers also liked (8)

Similar to Javascript FTW (20)

More from Pascal Rettig (8)

Recently uploaded (20)

Javascript FTW