Javascript FTW

Pascal RettigOn twitter @cykod

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

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 difference.


UNIVERSAL PRAISE FOR JAVASCRIPT..


“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 CailliauThursday, June 23, 2011

http://en.wikipedia.org/wiki/Robert_Cailliau

http://en.wikipedia.org/wiki/Robert_Cailliau

OK, MAYBE NOT..


WHY DID WE HATE JAVASCRIPT SO MUCH?


JAVASCRIPT... THE BAD 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 BIGGEST REASON:

• 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-2005People saw what you could do with large scale systems built primarily in JavaScript


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


WHAT CHANGED? Finally the “Chrome” eraLate 2008-TodayChrome 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






SOME AWESOME THINGS YOU CAN DO IN JAVASCRIPT...

• Dynamically Check and Uncheck checkboxes

• Load HTML DYNAMICALLY and Asynchronously via A-J-A-X

• Load images with a “Lightbox” Effect


JUST KIDDING...


THE REAL AWESOME 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


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.”

-Jeff Atwood (2007)


WE ARE ENTERING THE “JAVASCRIPT 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/


http://metamarketsgroup.com/blog/node-js-and-the-javascript-age/




ACTUALLY A COROLLARY 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.




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)


DEBUGGINGJAVASCRIPT• 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/


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’INGhttp://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”)


http://javascriptlint.com/

http://javascriptlint.com/

http://jslint.com/

http://jslint.com/

http://www.outofhanwell.com/

http://www.outofhanwell.com/

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


http://javascript.infogami.com/Javascript_in_Ten_Minutes






AUTOMATED TESTING FRAMEWORKS• QUnit - used in JQuery• Jasmine - Created by Pivotal

Labs, Inspired by RSpec


QUNIThttp://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" );});

By John Resig, Founder of JQuery


http://docs.jquery.com/Qunit

http://docs.jquery.com/Qunit

JASMINEFrom 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); });});


http://pivotal.github.com/jasmine/

http://pivotal.github.com/jasmine/

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


http://www.kesiev.com/akihabara/demo/game-solitude.html






IMPACT.JSNOW RUNS BROWSER + IOS NATIVENative 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


Q4 2010 Q2 2011Q1 2010

STATE OF 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>


http://code.bocoup.com/presentations/javascript-web-audio_html5-game-dev-meetup/tutorial/02-reading-audio-data

http://code.bocoup.com/presentations/javascript-web-audio_html5-game-dev-meetup/tutorial/02-reading-audio-data

3D IN THE BROWSERhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html

http://webglsamples.googlecode.com/hg/spacerocks/spacerocks.html


http://webglsamples.googlecode.com/hg/aquarium/aquarium.html


































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” FEATURES(HTML5 HAS COME TO MEAN A LOT MORE THAN JUST THE HTML5 SPEC)

• 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


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

MOBILE FRAMEWORKS


http://bit.ly/jtWCxR

http://bit.ly/jtWCxR

http://bit.ly/mKBVgt

http://bit.ly/mKBVgt

OFFLINE APPLICATIONS

• 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


http://diveintohtml5.org/offline.html




DESKTOP + MOBILE APP IN JS? REALLY?• Yes, and it works,

reasonably well• http://www.appcelerator.com/• http://www.phonegap.com/


http://www.appcelerator.com/

http://www.appcelerator.com/

http://www.phonegap.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


PHONE 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 World\n'); }).listen(8124, "127.0.0.1");

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


http://127.0.0.1:8124/'

http://127.0.0.1:8124/'

BONUS USE CASE• Browser plugins - just HTML,

CSS, and Javascript• http://code.google.com/

chrome/extensions/getstarted.html


http://code.google.com/chrome/extensions/getstarted.html






DEMO TIMEhttps://mozillademos.org/demos/nocomply/demo.html


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






THANKS! QUESTIONS?

Pascal Rettigcykod.comTwitter @cykod


Technology

Javascript FTW