Javascript FTW
Upcoming SlideShare
Loading in...5
×
 

Javascript FTW

on

  • 4,889 views

 

Statistics

Views

Total Views
4,889
Views on SlideShare
4,152
Embed Views
737

Actions

Likes
2
Downloads
41
Comments
0

3 Embeds 737

http://cykod.com 729
url_unknown 7
http://test.cykod.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript FTW Javascript FTW Presentation Transcript

  • JAVASCRIPT FTW This is not your slightly older sibling’s scripting language. Pascal Rettig On twitter @cykodThursday, 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.Thursday, June 23, 2011
  • UNIVERSAL PRAISE FOR JAVASCRIPT..Thursday, June 23, 2011
  • “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
  • OK, MAYBE NOT..Thursday, June 23, 2011
  • WHY DID W E HATE JAVASCRIPT SO MUCH?Thursday, June 23, 2011
  • 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
  • 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
  • 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
  • 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
  • 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.htmlThursday, June 23, 2011
  • 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
  • JUST KIDDING...Thursday, June 23, 2011
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • JAVASCRIPT IS A LAX LANGUAGE - HOW ABOUT SOME RIGOR? Your javascript code will only be as rigorous as you are.Thursday, June 23, 2011
  • 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
  • LEARNING JAVASCRIPT Start with your “Crockford” aka “Javascript: the Good Parts” JavaScript patterns builds on the basics. http:// javascript.infogami.com/ Javascript_in_Ten_MinutesThursday, June 23, 2011
  • AUTOMATED TESTING FRAMEWORKS • QUnit - used in JQuery • Jasmine - Created by Pivotal Labs, Inspired by RSpecThursday, June 23, 2011
  • 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
  • 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
  • JAVASCRIPT (AKA HTML5) GAME DEVELOPMENT (Akihabara running on iPhone, Android, Firefox, ...) http://www.kesiev.com/ akihabara/demo/game- solitude.htmlThursday, June 23, 2011
  • 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
  • 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
  • Q1 2010 Q4 2010 Q2 2011 STATE O F HTML5 GAME DEVThursday, June 23, 2011
  • 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
  • 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
  • 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.gooThursday, June 23, 2011
  • 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
  • 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
  • MOBILE FRAMEWORKS jQuery Mobile + Sencha Touch are two methods of creating a “native” feeling experience. Sencha: http://bit.ly/jtWCxR jQueryMobile: http://bit.ly/mKBVgtThursday, June 23, 2011
  • 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.htmlThursday, June 23, 2011
  • DESKTOP + MOBILE APP IN JS? REALLY? • Yes, and it works, reasonably well • http://www.appcelerator.com/ • http://www.phonegap.com/Thursday, June 23, 2011
  • 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
  • TITANIUM EXAMPLEThursday, June 23, 2011
  • 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
  • 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
  • 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
  • BONUS USE CASE • Browser plugins - just HTML, CSS, and Javascript • http://code.google.com/ chrome/extensions/ getstarted.htmlThursday, June 23, 2011
  • DEMO TIME https://mozillademos.org/ demos/nocomply/ demo.htmlThursday, June 23, 2011
  • THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykodThursday, June 23, 2011