JavaScript
                            IN THE CLOUD




                                           Mostafa Eweda
                                      eSpace Technologies
                                          10 January, 2013
Saturday, February 2, 13
Program


                     •     Javascript, 1995 to 2013
                     •     Building Cloud9
                     •     Demo




Saturday, February 2, 13
Javascript

                     •     Livescript
                     •     Netscape 2.0
                     •     Not like Java
                     •     More like Scheme




Saturday, February 2, 13
JS had to "look like Java" only
                   less so, [it had to] be
                 Java's dumb kid brother.



Saturday, February 2, 13
XMLHttpRequest


Saturday, February 2, 13
Saturday, February 2, 13
Saturday, February 2, 13
DOM


                     •     Never meant to be scripted
                     •     Direct mapping of C structures
                     •     Incovenient API




Saturday, February 2, 13
Saturday, February 2, 13
Saturday, February 2, 13
Saturday, February 2, 13
Saturday, February 2, 13
Java vs. Javascript




     Let’s confess:
     JavaScript is already the language of the Web
Saturday, February 2, 13
People started to care

                     •     VMs got faster
                           •   And embeddable!
                     •     EcmaScript 5
                     •     JSConf

                  So, JavaScript is a very simple, but often
                  misunderstood language.
Saturday, February 2, 13
Node.js is a NOT another web
          framework. I promise !
Saturday, February 2, 13
Google’s V8 engine
                           as an executable!




Saturday, February 2, 13
LibUV

Saturday, February 2, 13
Asynchronous is cool!




Saturday, February 2, 13
I hate
                           asynchronous!




Saturday, February 2, 13
Normal C++ IO




Saturday, February 2, 13
LibUV C++ IO




Saturday, February 2, 13
Saturday, February 2, 13
Javascript                 LibUV




          Node.js is a platform for building fast,
          scalable network applications.
Saturday, February 2, 13
Javascript bindings to LibUV

                           Standard libraries in JS

                             JS executed in V8


Saturday, February 2, 13
LibUV
                           Not exclusive



Saturday, February 2, 13
Read File in Ruby
       file = File.new("readfile.rb", "r")
       while (line = file.gets)
         # Do something with line
       end
       file.close


                           Read File in Node
  fs.readFile('readfile.js', function (err, buffer){
    if (err) throw err;
    // File is read and we're done.
  });

Saturday, February 2, 13
browser.js


                             db.js


                            server.js

Saturday, February 2, 13
Normal C++ IO
    • Node.js is fast by design.
    • Never blocking on I/O means less
             threads.




Saturday, February 2, 13
Program

 Async.parallel([
   function loadData(next) {
      db.loadData(next);
   },
   function readFile(next) {
     fs.readFile(fName, next);
   ], function done(err, items) {
      if (err) throw err;
      // Do something with items
 });




                           https://github.com/caolan/async
Saturday, February 2, 13
Program
 var user;
 Async.series([
   function loadUser(next) {
      db.getUser(user_id, function(err, u){
          user = u;
          next(err);
      });
   },
   function findItems(next) {
     var sql = "SELECT * FROM store WHERE
 type=?";
      db.query(sql, user.type, next);
   ], function done(err, items) {
      if (err) throw err;
      // Do something with items
 });




Saturday, February 2, 13
Program
               Mix to do complex stuff like:




                           https://github.com/caolan/async
Saturday, February 2, 13
Program


                     •     Javascript, 1995 to 2013
                     •     Building Cloud9
                     •     Demo




Saturday, February 2, 13
Normal developers




Saturday, February 2, 13
JavaScript Developer




Saturday, February 2, 13
is to



           as              is to



Saturday, February 2, 13
You really need HELP



                                    Text




Saturday, February 2, 13
You really need HELP



                                    Text




Saturday, February 2, 13
You really need HELP



                                    Text

           undeclared variable




Saturday, February 2, 13
You really need HELP



                                      Text

           undeclared variable

                                  Iterating using undeclared variable
                                                                        Did you mean “length”?




Saturday, February 2, 13
You really need HELP



                                      Text

           undeclared variable

                                  Iterating using undeclared variable
                                                                        Did you mean “length”?




Saturday, February 2, 13
You really need HELP



                                                            Text

           undeclared variable

                                                        Iterating using undeclared variable
                                                                                                Did you mean “length”?
                                                                                              function created in loop
                            Warning: you are in an anonymous inner function with its own “this” pointer




Saturday, February 2, 13
Saturday, February 2, 13
Debugging




Saturday, February 2, 13
(Smart!) Code completion




Saturday, February 2, 13
Free Linux VM!
Saturday, February 2, 13
Real terminal
Saturday, February 2, 13
Collaboration




Saturday, February 2, 13
Create

                           Deploy
                                                  Run/Debug



                              Share            Test




Saturday, February 2, 13
Program


                     •     Javascript, 1995 to 2012
                     •     Building Cloud9
                     •     Demo




Saturday, February 2, 13
Node.js simple server

            var http = require('http');

      http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end('Hello world');
      }).listen(3000);




Saturday, February 2, 13
Node.js real web app
                            express / connect
          $ npm install -g express
    $     express --sessions --css stylus --ejs jade
    $     cd myapp
    $     npm install
    $     node app.js

    app.get('/hello.txt', function(req, res){
      res.send('Hello World');
    });
    app.listen(3000);
    console.log('Listening on port 3000');


    $ node app

                           http://expressjs.com/
Saturday, February 2, 13
Node.js real web app
                                    Socket.IO 100% JS
          Realtime apps made possible blurring the
          differences between browser transport mechanisms.

    $ npm install socket.io

                           Server                                    Client
   var io = require('socket.io');                    <script src="/socket.io/socket.io.js"></script>
   // attached to the express app                    <script>
   // or runs standalone on port 80                    var socket = io.connect('http://localhost');
   io = io.listen(app || 80);
                                                       socket.on('message', function (msg) {
   io.sockets.on('connection', function (socket) {       console.log(msg);
     socket.on('message', function (msg) {               socket.send({ info: 'trash' });
       console.log(msg);                               });
     });                                             </script>
   });


                                      http://socket.io
Saturday, February 2, 13
Future (Architect)
          • A simple yet powerful plugin system for
                  large-scale Node.js applications
            •       Dependency Injection for JavaScript
                    Managing > ~100K LOC of JS
                    JS: Dynamically typed - Singly threaded



                                http://github.com/c9/architect
Saturday, February 2, 13
Wrap-Up

               • Node.js is brilliant for modern web apps
               • If you do realtime app that is meant to be scalable,
                      you should probably consider Node.js & Socket.io

               • Scale your code base: http://github.com/c9/architect
                      for your application.

               • Check out c9.io for a serious online IDE.

Saturday, February 2, 13
Text

                           http://c9.io


                                                Mostafa Eweda
                                      github.com/mostafaeweda
                                               @mostafaeweda

Saturday, February 2, 13

Javascript in the cloud

  • 1.
    JavaScript IN THE CLOUD Mostafa Eweda eSpace Technologies 10 January, 2013 Saturday, February 2, 13
  • 2.
    Program • Javascript, 1995 to 2013 • Building Cloud9 • Demo Saturday, February 2, 13
  • 3.
    Javascript • Livescript • Netscape 2.0 • Not like Java • More like Scheme Saturday, February 2, 13
  • 4.
    JS had to"look like Java" only less so, [it had to] be Java's dumb kid brother. Saturday, February 2, 13
  • 5.
  • 6.
  • 7.
  • 8.
    DOM • Never meant to be scripted • Direct mapping of C structures • Incovenient API Saturday, February 2, 13
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
    Java vs. Javascript Let’s confess: JavaScript is already the language of the Web Saturday, February 2, 13
  • 14.
    People started tocare • VMs got faster • And embeddable! • EcmaScript 5 • JSConf So, JavaScript is a very simple, but often misunderstood language. Saturday, February 2, 13
  • 15.
    Node.js is aNOT another web framework. I promise ! Saturday, February 2, 13
  • 16.
    Google’s V8 engine as an executable! Saturday, February 2, 13
  • 17.
  • 18.
  • 19.
    I hate asynchronous! Saturday, February 2, 13
  • 20.
  • 21.
    LibUV C++ IO Saturday,February 2, 13
  • 22.
  • 23.
    Javascript LibUV Node.js is a platform for building fast, scalable network applications. Saturday, February 2, 13
  • 24.
    Javascript bindings toLibUV Standard libraries in JS JS executed in V8 Saturday, February 2, 13
  • 25.
    LibUV Not exclusive Saturday, February 2, 13
  • 26.
    Read File inRuby file = File.new("readfile.rb", "r") while (line = file.gets) # Do something with line end file.close Read File in Node fs.readFile('readfile.js', function (err, buffer){ if (err) throw err; // File is read and we're done. }); Saturday, February 2, 13
  • 27.
    browser.js db.js server.js Saturday, February 2, 13
  • 28.
    Normal C++ IO • Node.js is fast by design. • Never blocking on I/O means less threads. Saturday, February 2, 13
  • 29.
    Program Async.parallel([ function loadData(next) { db.loadData(next); }, function readFile(next) { fs.readFile(fName, next); ], function done(err, items) { if (err) throw err; // Do something with items }); https://github.com/caolan/async Saturday, February 2, 13
  • 30.
    Program var user; Async.series([ function loadUser(next) { db.getUser(user_id, function(err, u){ user = u; next(err); }); }, function findItems(next) { var sql = "SELECT * FROM store WHERE type=?"; db.query(sql, user.type, next); ], function done(err, items) { if (err) throw err; // Do something with items }); Saturday, February 2, 13
  • 31.
    Program Mix to do complex stuff like: https://github.com/caolan/async Saturday, February 2, 13
  • 32.
    Program • Javascript, 1995 to 2013 • Building Cloud9 • Demo Saturday, February 2, 13
  • 33.
  • 34.
  • 35.
    is to as is to Saturday, February 2, 13
  • 36.
    You really needHELP Text Saturday, February 2, 13
  • 37.
    You really needHELP Text Saturday, February 2, 13
  • 38.
    You really needHELP Text undeclared variable Saturday, February 2, 13
  • 39.
    You really needHELP Text undeclared variable Iterating using undeclared variable Did you mean “length”? Saturday, February 2, 13
  • 40.
    You really needHELP Text undeclared variable Iterating using undeclared variable Did you mean “length”? Saturday, February 2, 13
  • 41.
    You really needHELP Text undeclared variable Iterating using undeclared variable Did you mean “length”? function created in loop Warning: you are in an anonymous inner function with its own “this” pointer Saturday, February 2, 13
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
    Create Deploy Run/Debug Share Test Saturday, February 2, 13
  • 49.
    Program • Javascript, 1995 to 2012 • Building Cloud9 • Demo Saturday, February 2, 13
  • 50.
    Node.js simple server var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello world'); }).listen(3000); Saturday, February 2, 13
  • 51.
    Node.js real webapp express / connect $ npm install -g express $ express --sessions --css stylus --ejs jade $ cd myapp $ npm install $ node app.js app.get('/hello.txt', function(req, res){ res.send('Hello World'); }); app.listen(3000); console.log('Listening on port 3000'); $ node app http://expressjs.com/ Saturday, February 2, 13
  • 52.
    Node.js real webapp Socket.IO 100% JS Realtime apps made possible blurring the differences between browser transport mechanisms. $ npm install socket.io Server Client var io = require('socket.io'); <script src="/socket.io/socket.io.js"></script> // attached to the express app <script> // or runs standalone on port 80 var socket = io.connect('http://localhost'); io = io.listen(app || 80); socket.on('message', function (msg) { io.sockets.on('connection', function (socket) { console.log(msg); socket.on('message', function (msg) { socket.send({ info: 'trash' }); console.log(msg); }); }); </script> }); http://socket.io Saturday, February 2, 13
  • 53.
    Future (Architect) • A simple yet powerful plugin system for large-scale Node.js applications • Dependency Injection for JavaScript Managing > ~100K LOC of JS JS: Dynamically typed - Singly threaded http://github.com/c9/architect Saturday, February 2, 13
  • 54.
    Wrap-Up • Node.js is brilliant for modern web apps • If you do realtime app that is meant to be scalable, you should probably consider Node.js & Socket.io • Scale your code base: http://github.com/c9/architect for your application. • Check out c9.io for a serious online IDE. Saturday, February 2, 13
  • 55.
    Text http://c9.io Mostafa Eweda github.com/mostafaeweda @mostafaeweda Saturday, February 2, 13