1. JAVASCRIPT
FTW
This is not your slightly
older sibling’s scripting
language.
Pascal Rettig
On twitter @cykod
Thursday, June 23, 2011

2. 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 difference.
Thursday, June 23, 2011

3. UNIVERSAL
PRAISE FOR
JAVASCRIPT..
Thursday, June 23, 2011

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

5. OK, MAYBE NOT..
Thursday, June 23, 2011

6. WHY DID W E HATE
JAVASCRIPT SO MUCH?
Thursday, June 23, 2011

7. 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)
Thursday, June 23, 2011

8. 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)
Thursday, June 23, 2011

9. 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
Thursday, June 23, 2011

10. 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
Thursday, June 23, 2011

11. 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 fire in other Browser
makers.
http://news.cnet.com/
8301-1001_3-10030888-92.html
Thursday, June 23, 2011

12. 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”
Effect
Thursday, June 23, 2011

13. JUST KIDDING...
Thursday, June 23, 2011

14. 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
• Offline Applications
• Server Side Development
Thursday, June 23, 2011

15. 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>
Thursday, June 23, 2011

16. 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.”
-Jeff Atwood (2007)
Thursday, June 23, 2011

17. 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/
Thursday, June 23, 2011

18. 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 finding the page will have no
idea of what the data is or what it is about. The only way to find out what a
Java applet means is to set it running in front of a person.
Thursday, June 23, 2011

19. JAVASCRIPT IN
A NUTSHELL
• 5 Basic Types: Bool, Number
(float), String, Array, Object
• + Function as first class objects.
• Very loosely typed
• Easily meta-programmed
• Support for Closures (Great for
Async Development)
Thursday, June 23, 2011

20. DEBUGGING
JAVASCRIPT
• Aka Firebug + Built-in clones
• Now have an environment that
rivals the best IDE’s
• Inspection, Console, Step
debugging, Network, Profiling
• http://cykod.github.com/
AlienInvaders/
Thursday, June 23, 2011

21. JAVASCRIPT IS A
LAX LANGUAGE - HOW
ABOUT SOME RIGOR?
Your javascript code will only be as
rigorous as you are.
Thursday, June 23, 2011

22. 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”)
Thursday, June 23, 2011

23. 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
Thursday, June 23, 2011

24. AUTOMATED
TESTING
FRAMEWORKS
• QUnit - used in JQuery
• Jasmine - Created by Pivotal
Labs, Inspired by RSpec
Thursday, June 23, 2011

25. 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" );
});
Thursday, June 23, 2011

26. 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);
});
});
Thursday, June 23, 2011

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

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

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

30. Q1 2010 Q4 2010 Q2 2011
STATE O F HTML5 GAME DEV
Thursday, June 23, 2011

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

32. 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>
Thursday, June 23, 2011

33. 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
Thursday, June 23, 2011

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

35. 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
• Offline Storage
• Canvas, SVG
• New Events (touch, orientation, accel)
• Geolocation (via GPS)
• All supported on Mobile Webkit stack
Thursday, June 23, 2011

36. 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
Thursday, June 23, 2011

37. OFFLINE APPL ICATIONS
• Google Gears had been around for
a while (where we got a lot of cool
stuff for HTML5)
• Replaced by HTML5 support for
cache manifest
• http://diveintohtml5.org/
offline.html
Thursday, June 23, 2011

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

39. 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.
Thursday, June 23, 2011

40. TITANIUM EXAMPLE
Thursday, June 23, 2011

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

42. 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.
Thursday, June 23, 2011

43. 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/');
Thursday, June 23, 2011

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

45. DEMO TIME
https://mozillademos.org/
demos/nocomply/
demo.html
Thursday, June 23, 2011

46. THANKS!
QUESTIONS?
Pascal Rettig
cykod.com
Twitter @cykod
Thursday, June 23, 2011