An illustratration on javascript as an evolving platform.

1. The world of
Javascript
Rapee Suveeranont
Web Technology

2. False
popular
belief

3. It’s some kind of JAVA
No,
Not in technological terms
Syntax C
Features Smalltalk
Buzz word JAVA

4. Performance is poor
No,
Getting better and better,
at even faster speed
2008 – 2010 Javascript engine war
IE 7 →9 = 140X
Firefox 3 → 4 = 10X

5. Performance is poor

6. Run (only) in browser
No,
it also run in
Desktop, Mobile, Server,
RIA, Widgets, DB, OS and
Documents

7. Javascript
Today

8. We can do this,
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/');
% node example.js Server running at http://127.0.0.1:8124/
Here comes a web server!

9. Naked Javascript
Pure programming language
ECMAScript
No standard library
Not even document.write()
No package management
unlike PHP, Ruby, Python
Many engines of choice
Rhino, TraceMonkey, Nitro, Chakra, Carakan

10. Ecosystem

11. Ecosystem
ECMAScript Language

12. Ecosystem
Objective-J
ActionScript JScript
Caja Javascript QTScript
Dialect
WMLScript Javascript OSA Jscript.NET
Language
ECMAScript

13. Ecosystem
V8 Chakra
Rhino Nitro
TraceMonkey Carakan Engine
Dialect
Language

14. Ecosystem
Browser RIA
Mobile DB OS Desktop
Platform
Documents Widgets
Engine
Dialect
Language

15. Ecosystem
Client jQuery, Mootools, prototype
YUI, Dojo, Ext, SproutCore
Server Narwhal, Jaxer, AppJet
CommonJS, Node.js,
Framework
Mobile App Phonegap
Titanium,
Platform
Engine
Dialect
Language

16. Ecosystem
AJAX JSON etc.
Others
MongoDB CouchDB
Framework
Platform
Engine
Dialect
Language

17. At a glance

18. JSON. BSON.
Very popular
JSON + byte array
light, fast and readable
(binary)
compact data format
{
'id': 99,
'name': '高橋じゅん',
'address': [
{'country': 'JP', 'postcode': '144-0012'},
{'country': 'TH', 'postcode': '10400'}
],
'married': false
}

19. Appcelerator
Titanium
Native iPhone/Android
Cross-platform Framework

20. Titanium
Create native UI with tabs
Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup({id:'tabGroup1'});
var win1 = Titanium.UI.createWindow({id:'win1'});
var tab1 = Titanium.UI.createTab({id:'tab1', window:win1});
tabGroup.addTab(tab1);
tabGroup.open();
Open built-in camera
// Display phone’s camera
Titanium.Media.showCamera({
success: function(event) { ... },
overlay: overlay,
showControls: false,
mediaTypes: Ti.Media.MEDIA_TYPE_PHOTO,
autohide: false
});

21. Node.jsServer-side application
File system, HTTP, SSL, Net, DNS, datagram, process
Open socket and listen to incoming data
var net = require('net');
net.createServer(function (socket) {
socket.write("Echo server¥r¥n");
socket.on("data", function (data) {
socket.write(data);
});
}).listen(8124, "127.0.0.1");

22. CommonJSSpecification of standard API for
non-web application:
CLI, Server, GUI
APIs:
Module
Package
System
Console
Filesystem
HTTP Client
Encodings .. etc.

23. MongoDB
NoSQL database with native Javascript query
SQL: WHERE x = y
> db.foo.find({
$where : function() {
return this.x == this.y;
}
})
OUTPUT: “Hello, Joe”
> db.eval(function(name) {
return "Hello, “ + name;
}, ["Joe"])

24. Why now?

25. It’s
everywhere
Web
HTML5+CSS+Javascript, RIA
Platform
Desktop, Mobile, Server, blah, blah, …
Device
PC, Netbook, Garakei, Smartphone, Tablet, Embedded

26. They’re
everywhere
Web Developers
Web Designers
Easy to learn, transfer skills,
and move to new platform

27. Cloud
Smartphone RIA Desktop
WebApp
Developers Designers

28. Thank you