Node.js
     &
Mobile Apps

        Richard Rodger
        @rjrodger
        nearform.com
•Why should you use Node.js?
•Node.js basics
•Lessons from a real world project
nodejs.org




• Code in JavaScript on the server
• Built using Chrome V8 Engine - so it's really fast!
• Everything is event-based; there are no threads
Node.js Web Server
var http = require('http');

var server = http.createServer( function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end('Hello Worldn')
});

server.listen(80, '127.0.0.1');

console.log('Web server running at http://127.0.0.1:80');
why?
there are
three
eras...

            1990's
               2000's
                   2010's
"keep your job"    Node.js is
   languages      the platform




                           * yes I know about tiobe.com
how many
concurrent
  clients?

     90's: 10
       00's: 100
           10's: 1000
                 C10K Problem
How do
you scale?


      processes
        threads
           events
JavaScript: the world's ugliest language


      avoid slow, validate forms
        date ECMA, jQuery
           marry Node.js, Crockford
Where
will your
app live?

     co-lo buy, build, and rack
       IaaS Amazon EC2
          PaaS Heroku
Don't
Forget the
  Web

browser wars
  web 2.0
    standardise!
Mobile
            Hybrid      Native
  Web
           HTML5/JS   Gotta learn 'em all*
HTML5/JS
Mobile Web Apps

•   Web Pages built using HTML5 features:
    •   Canvas for drawing
    •   In-built Video and Audio
    •   Geolocation
    •   Web Sockets
    •   Local Storage, Local Caching
    •   CSS3 transitions (not really HTML5)
•   Use JavaScript as main programming language
                                                        ft.com        business
•   Designed for Touch Interfaces
                                                                       post.ie
    •   Smart phone or Tablet form factors
    •   Don’t use Hover effects, instead convey touch affordance using 3D styling
•   Dynamic single page apps. Changes are made to the HTML rather than loading
    new pages.
Mobile Web Standards Compliance

Latest Versions      Storage               CSS3               Mobile              Multimedia
                     local, cache, sql    effects, 2D, 3D   touch, geo & motion     video & audio




      iOS          ★★★ ★★★ ★★★                                                     ★★

   Android         ★★★ ★★★ ★★★                                                         ★
  Win Ph. 7              ★               ★★                       ★                    ★
BlackBerry 6+        ★★                  ★★                   ★★                       ★
   Legacy
   recent Nokias         ★                    ★                   ★

                                     mobilehtml5.org
Node.js and Mobile
                           nginx                 Node.js


• nginx
 • high performance web server
    • serves static resources: test files, images
    • proxies requests through to Node.js app server
• Node.js
 • high performance server-side JavaScript
 • Executes business logic and database queries
• Runs high-performance server-side JavaScript
 • open source, sponsored by joyent.com
• Uses the Google Chrome V8 engine
 • just-in-time compilation to machine code
 • generation garbage collection (like the Java JVM)
 • creates virtual “classes” to optimise property lookups
• Has a well-designed module system for third party code - very
   effective and simple to use
• Your code runs in a single non-blocking JavaScript thread
• That’s OK, most of the time you’re waiting for database or
   network events
being event-driven is like
having a butler run your
server
Your code runs in one thread only!
Working with Events
  var http = require('http');
  var server = http.createServer();

  server.on( 'request', function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'})

       var echo = ''
       req.on('data',function(chunk){
          echo += chunk
       })

       req.on('end', function(){
          res.end( echo+'n' )
       })

       req.on('error', function(err){
          res.end( "error: "+err )
       })
  })

  server.listen(80, '127.0.0.1');
  console.log('try: curl http://127.0.0.1 -d hello');
What does the core API give you?




   Q
   basics:
   file system, ...
                        9
                       control:
                       events, streams, buffers...



   g
   networking:
   sockets, DNS, ...
                        „
                       web server:
                       HTTP handling, ...
Node.js modules are so cool

• Easy syntax
 • var moduleAPI = require("modulename");
• Central repository
 • npmjs.org
• Easy command line install
 • npm install modulename
• No version conflicts!
 • intelligent dependency management
• Declarative project description
 •   package.json file goes into project root folder
Some important modules
(find them on npmjs.org or github.com)
• connect
 • HTTP middleware infrastructure - requests pass through layers
• express
 • JSP/ASP style dynamic server-side pages
• underscore
 • same as client-side library! provides functional utilities: map, reduce, ...
• socket.io
 • HTML5 real-time web sockets that "just work" - includes client-side API
• request
 • easy outbound calls to web services
Node.js is                         It doesn't
overhyped                          matter
 • Not a clear winner against       •   Chrome V8 Engine means
                                        Node.js is "Good Enough"
    other event servers on speed

 • Asynchronous code is harder      •   JavaScript means almost all
                                        libraries are asynchronous, unlike
    than synchronous code               other event servers
 • No, you wont re-use much         •   JavaScript is a local maximum and
    code between client and             you're stuck with it
    server
                                    •   Same language on client and
                                        server makes your brain happy
 • Memory can still leak
                                    •   Compile to JavaScript if you really
 • It's not a mature platform           hate the language
businesspost.ie
Web
 Mobile                     Cloud
              Services
Web Apps                   Services
                API


 Mobile &       REST &
                            Database
Tablet Web       JSON

 Mobile &     Horizontal   Third Party
Tablet Apps     Scale       Services

 Desktop       Cloud
                           Monitoring
  Web          Hosted
Client-side
 Router    #! URLs
                             • Common code-base
                              • even for hybrid apps!
 Models    Data, biz logic
                             • backbone.js
                             • shims for weak browsers
  Views    DOM Layout
                             • browser-targeting: user-
                               agent & capabilities

                             • responsive layout
                               (mostly)
 Helpers   Shared code
Server-side
             map /api/ URLs       • nginx & Node.js
  Router
             to functions         • Small code volume
    API      function( req,       • Third party modules:
 functions   res ) { ... }         • connect
             Shared code
                                   • express
 Helpers     (some with client)    • seneca (my db layer)
             Open source
                                  • Deploy with:
 Modules     heavy-lifting         • sudo killall node
Cloud Services
Database    Hosting    Monitors



MongoDB     Amazon      Amazon

             Load
  Redis                cloudkick
            Balancer

            Instance
memcached              Continuous
             Scaling
Third Party Integration
JSON, XML, simple form data, text files, ...
  ... all easy using JavaScript and Node.js Modules


    Analytics          Twitter        E-Commerce

                                         In-App
     Logging          Facebook
                                       Purchasing

      Email           LinkedIn         Stock Feed
Native Apps
Same code as mobile web versions, ...
 ... wrapped using PhoneGap to run natively
 ... plus some native plugins
Lesson:
Lesson:
               code volume
4

3

2

1

0
    Client JavaScript   Server JavaScript
Lesson:
multi-platform client-side JavaScript is really hard

 • a framework is a must           • code against ECMA, use shims
                                      to support older browsers
  • backbone.js                    • Code/Test/Debug inside Safari
 • business logic must be in       • phonegap.github.com/weinre
    common code                       for hard to reach places
 • browser-specific code        • use error capture in production
  • virtual .js files           • Finally, use a simple static site as
                                 a fallback (also for Googlebot)
 • use jshint to keep IE happy
Lesson:
multi-platform HTML/CSS is really hard

 • "structured" CSS is a must   • Clean, semantic HTML is not
                                   optional
  • sass or less                 • graceful degradation may
 • Be happy with                     require radically different CSS

  • media queries               • 100% "Responsive" design is
                                   tough
  • CSS3 transforms              • Responsive within browser
                                     subsets has higher reward/
 • browser-specific code              effort

  • virtual .css files
Lesson:
the app stores are not web sites

 • that bug in version 1... • you can't deploy hot fixes
  • will take two weeks to • make everything
     fix via an update          configurable!

   • some users will never    • All prices, text, host
     update                      names, urls, ...

   • appears after an OS     • On launch, app "checks-in"
     update                    for new configuration

                              • this will save your life
Lesson:
Node.js does what it says on the tin

 • High performance             • callback spaghetti is not a
                                   problem in practice
 • High throughput
 • Low CPU usage                  • use functional style
 • Constant memory usage          • client-side code is far
                                      more difficult
  • leaks will kill, but then   • Don't do CPU intensive stuff
 • < 100ms startup time          • ... there's a warning on
  • means you may not                 the tin!
       notice!
Lesson:
Outsource your database

 • Remote MongoDB              • Big productivity gain
   hosting
                                • no production tuning
  • mongohq.com                 • no configuration
 • No downtime                  • no cluster set up
 • Backups
 • Low latency (in Amazon)
 • Web-based admin (if lazy)
Node.js means Rapid Development




                                    * Bruno Fernandez-Ruiz
                          http://www.olympum.com/architecture/the-
                                  nodejs-innovation-advantage/
My Company
Mobile Apps + Node.js



My Book
richardrodger.com



Richard Rodger
@rjrodger
nearform.com

20120802 timisoara

  • 1.
    Node.js & Mobile Apps Richard Rodger @rjrodger nearform.com
  • 2.
    •Why should youuse Node.js? •Node.js basics •Lessons from a real world project
  • 3.
    nodejs.org • Code inJavaScript on the server • Built using Chrome V8 Engine - so it's really fast! • Everything is event-based; there are no threads
  • 4.
    Node.js Web Server varhttp = require('http'); var server = http.createServer( function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}) res.end('Hello Worldn') }); server.listen(80, '127.0.0.1'); console.log('Web server running at http://127.0.0.1:80');
  • 5.
  • 6.
    there are three eras... 1990's 2000's 2010's
  • 7.
    "keep your job" Node.js is languages the platform * yes I know about tiobe.com
  • 8.
    how many concurrent clients? 90's: 10 00's: 100 10's: 1000 C10K Problem
  • 9.
    How do you scale? processes threads events
  • 10.
    JavaScript: the world'sugliest language avoid slow, validate forms date ECMA, jQuery marry Node.js, Crockford
  • 11.
    Where will your app live? co-lo buy, build, and rack IaaS Amazon EC2 PaaS Heroku
  • 12.
    Don't Forget the Web browser wars web 2.0 standardise!
  • 14.
    Mobile Hybrid Native Web HTML5/JS Gotta learn 'em all* HTML5/JS
  • 15.
    Mobile Web Apps • Web Pages built using HTML5 features: • Canvas for drawing • In-built Video and Audio • Geolocation • Web Sockets • Local Storage, Local Caching • CSS3 transitions (not really HTML5) • Use JavaScript as main programming language ft.com business • Designed for Touch Interfaces post.ie • Smart phone or Tablet form factors • Don’t use Hover effects, instead convey touch affordance using 3D styling • Dynamic single page apps. Changes are made to the HTML rather than loading new pages.
  • 16.
    Mobile Web StandardsCompliance Latest Versions Storage CSS3 Mobile Multimedia local, cache, sql effects, 2D, 3D touch, geo & motion video & audio iOS ★★★ ★★★ ★★★ ★★ Android ★★★ ★★★ ★★★ ★ Win Ph. 7 ★ ★★ ★ ★ BlackBerry 6+ ★★ ★★ ★★ ★ Legacy recent Nokias ★ ★ ★ mobilehtml5.org
  • 18.
    Node.js and Mobile nginx Node.js • nginx • high performance web server • serves static resources: test files, images • proxies requests through to Node.js app server • Node.js • high performance server-side JavaScript • Executes business logic and database queries
  • 19.
    • Runs high-performanceserver-side JavaScript • open source, sponsored by joyent.com • Uses the Google Chrome V8 engine • just-in-time compilation to machine code • generation garbage collection (like the Java JVM) • creates virtual “classes” to optimise property lookups • Has a well-designed module system for third party code - very effective and simple to use • Your code runs in a single non-blocking JavaScript thread • That’s OK, most of the time you’re waiting for database or network events
  • 20.
    being event-driven islike having a butler run your server
  • 21.
    Your code runsin one thread only!
  • 22.
    Working with Events var http = require('http'); var server = http.createServer(); server.on( 'request', function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}) var echo = '' req.on('data',function(chunk){ echo += chunk }) req.on('end', function(){ res.end( echo+'n' ) }) req.on('error', function(err){ res.end( "error: "+err ) }) }) server.listen(80, '127.0.0.1'); console.log('try: curl http://127.0.0.1 -d hello');
  • 23.
    What does thecore API give you? Q basics: file system, ... 9 control: events, streams, buffers... g networking: sockets, DNS, ... „ web server: HTTP handling, ...
  • 24.
    Node.js modules areso cool • Easy syntax • var moduleAPI = require("modulename"); • Central repository • npmjs.org • Easy command line install • npm install modulename • No version conflicts! • intelligent dependency management • Declarative project description • package.json file goes into project root folder
  • 25.
    Some important modules (findthem on npmjs.org or github.com) • connect • HTTP middleware infrastructure - requests pass through layers • express • JSP/ASP style dynamic server-side pages • underscore • same as client-side library! provides functional utilities: map, reduce, ... • socket.io • HTML5 real-time web sockets that "just work" - includes client-side API • request • easy outbound calls to web services
  • 26.
    Node.js is It doesn't overhyped matter • Not a clear winner against • Chrome V8 Engine means Node.js is "Good Enough" other event servers on speed • Asynchronous code is harder • JavaScript means almost all libraries are asynchronous, unlike than synchronous code other event servers • No, you wont re-use much • JavaScript is a local maximum and code between client and you're stuck with it server • Same language on client and server makes your brain happy • Memory can still leak • Compile to JavaScript if you really • It's not a mature platform hate the language
  • 27.
  • 28.
    Web Mobile Cloud Services Web Apps Services API Mobile & REST & Database Tablet Web JSON Mobile & Horizontal Third Party Tablet Apps Scale Services Desktop Cloud Monitoring Web Hosted
  • 29.
    Client-side Router #! URLs • Common code-base • even for hybrid apps! Models Data, biz logic • backbone.js • shims for weak browsers Views DOM Layout • browser-targeting: user- agent & capabilities • responsive layout (mostly) Helpers Shared code
  • 30.
    Server-side map /api/ URLs • nginx & Node.js Router to functions • Small code volume API function( req, • Third party modules: functions res ) { ... } • connect Shared code • express Helpers (some with client) • seneca (my db layer) Open source • Deploy with: Modules heavy-lifting • sudo killall node
  • 31.
    Cloud Services Database Hosting Monitors MongoDB Amazon Amazon Load Redis cloudkick Balancer Instance memcached Continuous Scaling
  • 32.
    Third Party Integration JSON,XML, simple form data, text files, ... ... all easy using JavaScript and Node.js Modules Analytics Twitter E-Commerce In-App Logging Facebook Purchasing Email LinkedIn Stock Feed
  • 33.
    Native Apps Same codeas mobile web versions, ... ... wrapped using PhoneGap to run natively ... plus some native plugins
  • 34.
  • 35.
    Lesson: code volume 4 3 2 1 0 Client JavaScript Server JavaScript
  • 36.
    Lesson: multi-platform client-side JavaScriptis really hard • a framework is a must • code against ECMA, use shims to support older browsers • backbone.js • Code/Test/Debug inside Safari • business logic must be in • phonegap.github.com/weinre common code for hard to reach places • browser-specific code • use error capture in production • virtual .js files • Finally, use a simple static site as a fallback (also for Googlebot) • use jshint to keep IE happy
  • 37.
    Lesson: multi-platform HTML/CSS isreally hard • "structured" CSS is a must • Clean, semantic HTML is not optional • sass or less • graceful degradation may • Be happy with require radically different CSS • media queries • 100% "Responsive" design is tough • CSS3 transforms • Responsive within browser subsets has higher reward/ • browser-specific code effort • virtual .css files
  • 38.
    Lesson: the app storesare not web sites • that bug in version 1... • you can't deploy hot fixes • will take two weeks to • make everything fix via an update configurable! • some users will never • All prices, text, host update names, urls, ... • appears after an OS • On launch, app "checks-in" update for new configuration • this will save your life
  • 39.
    Lesson: Node.js does whatit says on the tin • High performance • callback spaghetti is not a problem in practice • High throughput • Low CPU usage • use functional style • Constant memory usage • client-side code is far more difficult • leaks will kill, but then • Don't do CPU intensive stuff • < 100ms startup time • ... there's a warning on • means you may not the tin! notice!
  • 40.
    Lesson: Outsource your database • Remote MongoDB • Big productivity gain hosting • no production tuning • mongohq.com • no configuration • No downtime • no cluster set up • Backups • Low latency (in Amazon) • Web-based admin (if lazy)
  • 41.
    Node.js means RapidDevelopment * Bruno Fernandez-Ruiz http://www.olympum.com/architecture/the- nodejs-innovation-advantage/
  • 42.
    My Company Mobile Apps+ Node.js My Book richardrodger.com Richard Rodger @rjrodger nearform.com