Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript FTW


Published on

Published in: Technology
  • Login to see the comments

Javascript FTW

  1. JAVASCRIPT FTW This is not your slightly older sibling’s scripting language. Pascal Rettig On twitter @cykodThursday, 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 CailliauThursday, 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 JavaScriptThursday, 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 jQueryThursday, 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. 8301-1001_3-10030888-92.htmlThursday, 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” EffectThursday, 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 DevelopmentThursday, 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 ... Ill call Atwoods 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.” - age/Thursday, June 23, 2011
  18. ACTUALLY A COR OLLARY TO “THE RULE OF LEAST POWER” 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 • 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 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_in_Ten_MinutesThursday, June 23, 2011
  24. AUTOMATED TESTING FRAMEWORKS • QUnit - used in JQuery • Jasmine - Created by Pivotal Labs, Inspired by RSpecThursday, June 23, 2011
  25. QUNIT By John Resig, Founder of JQuery 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 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, ...) akihabara/demo/game- solitude.htmlThursday, 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 developmentThursday, June 23, 2011
  30. Q1 2010 Q4 2010 Q2 2011 STATE O F HTML5 GAME DEVThursday, 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 http://webglsamples.g oc ks/spacerocks.html g ht tp://webglsamples.gooThursday, 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 onlyThursday, 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 stackThursday, June 23, 2011
  36. MOBILE FRAMEWORKS jQuery Mobile + Sencha Touch are two methods of creating a “native” feeling experience. Sencha: jQueryMobile:, 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 • offline.htmlThursday, June 23, 2011
  38. DESKTOP + MOBILE APP IN JS? REALLY? • Yes, and it works, reasonably well • •, 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 EXAMPLEThursday, 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, ""); console.log(Server running at;Thursday, June 23, 2011
  44. BONUS USE CASE • Browser plugins - just HTML, CSS, and Javascript • chrome/extensions/ getstarted.htmlThursday, June 23, 2011
  45. DEMO TIME demos/nocomply/ demo.htmlThursday, June 23, 2011
  46. THANKS! QUESTIONS? Pascal Rettig Twitter @cykodThursday, June 23, 2011