Using Javascript in today's world
-
Upload
sudar-muthu -
Category
Technology
-
view
2.195 -
download
1
description
Transcript of Using Javascript in today's world
![Page 1: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/1.jpg)
GO BIG!
Using JavaScript in Today’s WorldSudar MuthuResearch EngineerYahoo! Labs
http://sudarmuthu.comhttp://twitter.com/sudarmuthu
![Page 2: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/2.jpg)
What is JavaScript?
![Page 3: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/3.jpg)
Drag picture to placeholder or click icon to add
World’s most popular programming
language
Douglas Crockford - http://javascript.crockford.com/popular.html
![Page 4: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/4.jpg)
Drag picture to placeholder or click icon to add
World’s most misunderstood programming
language
Douglas Crockford - http://javascript.crockford.com/popular.html
![Page 5: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/5.jpg)
Who am I?
To talk about JavaScript
![Page 6: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/6.jpg)
Drag picture to placeholder or click icon to add
Fan of Douglas Crockford
http://wp.me/p4WjA-pe
![Page 7: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/7.jpg)
The JavaScript wedding invitation guy
;)http://wp.me/p4WjA-rK
![Page 8: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/8.jpg)
Using JavaScript in the browser
![Page 9: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/9.jpg)
Options
Drag picture to placeholder or click icon to add
• YUI• jQuery• MooTools• Backbone.js• Knockout.js• .. and a million others
![Page 10: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/10.jpg)
When to use YUI
• You already know what JavaScript is
• To build full-fledged websites that have numerous components with interdependent dependencies
• You need lot of build-in widgets• Need to use design patterns• Need to have a maintainable
code
![Page 11: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/11.jpg)
When to use jQuery
• If you are new to JavaScript• Want something that is light• Have a simple website with
lesser number of components• Need a quick solution and want
something that is easier to learn
![Page 12: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/12.jpg)
When to use backbone.js
• Decouple data from the UI• Use a full fledged MVC in the
client side as well• Want to have multiple
views/clients (mobile, desktop, tablets etc)
• You have a clear understanding of JavaScript and also the MVC concepts
Drag picture to placeholder or click icon to add
![Page 13: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/13.jpg)
Other special purpose libraries
Drag picture to placeholder or click icon to add
• Lime.js – HTML5 based game framework
• Processing.js – Data visualizations and interactive animations
• flot – JavaScript plotting library• Raphael – Vector graphics library
![Page 14: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/14.jpg)
Using JavaScript in the server
![Page 15: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/15.jpg)
Why JavaScript on the server
Drag picture to placeholder or click icon to add
• Homogenous Programming Experience
• Easy meta programming• Easy reflection• Object literals• Interpreted Langauge
![Page 16: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/16.jpg)
What is node.js
• Event-driven• Non-blocking I/O• Asynchronous• Single-threaded• Light weight and efficient
![Page 17: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/17.jpg)
Why node.js
Code like this
var result = db.query("select..");// use result
either blocks the entire process orimplies multiple execution stacks (threads).
Drag picture to placeholder or click icon to add
![Page 18: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/18.jpg)
Why node.js
But a line of code like this
db.query("select..", function (result){ // use result});
allows the program to return to theevent loop immediately. No moreunnecessary threads.
Drag picture to placeholder or click icon to add
![Page 19: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/19.jpg)
Demo
![Page 20: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/20.jpg)
Demo of callback
// execute the callback after 2 secondssetTimeout(function () { console.log("World!");}, 2000);
// print in consoleconsole.log("Hello");
https://github.com/sudar/jsfoo/blob/master/callback.js
![Page 21: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/21.jpg)
Demo of a server in node.jsvar http = require('http'); // require the http module
// create a serverhttp.createServer(function (req, res) { // call this function when a request is received res.writeHead(200, { 'Content-Type': 'text/plain' }); // send this as part of the response res.end('Hello World\n');}).listen(1337, "127.0.0.1"); // listen on port 1337
// debug informationconsole.log('Server running at http://127.0.0.1:1337/');
https://github.com/sudar/jsfoo/blob/master/http-server.js
![Page 22: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/22.jpg)
When to use node.js
Drag picture to placeholder or click icon to add
• Writing highly concurrent server applications
• Sharing application logic between server and client
• Peer-to-peer web applications using websockets
• And node.js is available in Azure
![Page 23: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/23.jpg)
Other options to consider
Drag picture to placeholder or click icon to add
• Rhino• Spidermonkey• Narwhal• Nitro
![Page 24: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/24.jpg)
Using JavaScript in mobile applications
![Page 25: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/25.jpg)
PhoneGap
HTML5 app platform that allows you to write native mobile applications using web technologies like HTML and JavaScript
Yes it works in Windows Phone 7 as well
![Page 26: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/26.jpg)
When to use it?
Drag picture to placeholder or click icon to add
If you need to have one code base and develop mobile applications for
• Android• iOS• Blackberry• Window Phone• etc
![Page 27: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/27.jpg)
Using JavaScript in desktop applications
![Page 28: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/28.jpg)
Some options to consider
Drag picture to placeholder or click icon to add
• Windows metro apps• Yahoo Konfabulator• Cappuccino• Titanium• Couch DB
![Page 29: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/29.jpg)
Other exoctic use cases
Drag picture to placeholder or click icon to add
• Control USB hid devices – node-hid
• Control Serial devices – node-serialport
• Control Arduino – noduino• Control Powerpoint presentations
![Page 30: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/30.jpg)
Well, it’s all fine, but I don’t like
JavaScript Syntax
![Page 31: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/31.jpg)
Then use
CoffeeScript
![Page 32: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/32.jpg)
Demo
![Page 33: Using Javascript in today's world](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f81bdb4c905435d8b4a0b/html5/thumbnails/33.jpg)
QuestionsSudar Muthu
http://sudarmuthu.comhttp://twitter.com/sudarmuthu