node.js mobile appsfiles.meetup.com/1751984/richardrodger-nodejs.pdf · •why should you use...

Node.js&

Mobile Apps

Richard [email protected]

Friday 3 August 2012

•Why should you use Node.js?

•Node.js basics

•Lessons from a real world project


•Code in JavaScript on the server

•Built using Chrome V8 Engine - so it's really fast!

•Everything is event-based; there are no threads

nodejs.org


var http = require('http');

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

server.listen(80, '127.0.0.1');

console.log('Web server running at http://127.0.0.1:80');

Node.js Web Server


why?


there are three eras...

1990's2000's

2010's


Node.js is the platform

* yes I know about tiobe.com

"keep your job" languages


how many concurrent

clients?

90's: 1000's: 100

10's: 1000C10K Problem


How do you scale?

processesthreads

events


JavaScript: the world's ugliest language

avoiddate

marry

slow, validate forms

ECMA, jQuery

Node.js, Crockford


Where will your app live?

co-loIaaS

PaaS

buy, build, and rack

Amazon EC2

Heroku


Don't Forget the

Web

browser warsweb 2.0

standardise!


Mobile Web

HTML5/JS

HybridHTML5/JS

NativeGotta learn 'em all*


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

• Designed for Touch Interfaces

• 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.

ft.com businesspost.ie


Latest Versions Storagelocal, cache, sql

CSS3effects, 2D, 3D

Mobiletouch, geo & motion

Multimediavideo & audio

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

Android ★ ★ ★ ★ ★ ★ ★ ★ ★ ★Win Ph. 7 ★ ★ ★ ★ ★

BlackBerry 6+ ★ ★ ★ ★ ★ ★ ★Legacy recent Nokias ★ ★ ★

mobilehtml5.org

Mobile Web Standards Compliance


• 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

nginx Node.js

Node.js and Mobile


• 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');


http://127.0.0.1

http://127.0.0.1

What does the core API give you?

networking:sockets, DNS, ...

web server:HTTP handling, ...

basics:file system, ...

control:events, streams, buffers...

Q 9

„g


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 overhyped

• Not a clear winner against other event servers on speed

• Asynchronous code is harder than synchronous code

• No, you wont re-use much code between client and server

• Memory can still leak

• It's not a mature platform

• Chrome V8 Engine means Node.js is "Good Enough"

• JavaScript means almost all libraries are asynchronous, unlike other event servers

• JavaScript is a local maximum and you're stuck with it

• Same language on client and server makes your brain happy

• Compile to JavaScript if you really hate the language

It doesn't matter


businesspost.ie


Mobile Web Apps

Web Services

API

Cloud Services

Mobile & Tablet Web

Mobile & Tablet Apps

Desktop Web

REST & JSON

Horizontal Scale

Cloud Hosted

Database

Third Party Services

Monitoring


Client-side•Common code-base

• even for hybrid apps!

•backbone.js

• shims for weak browsers

•browser-targeting: user-agent & capabilities

• responsive layout (mostly)

Models

Views

Router

Helpers

#! URLs

Data, biz logic

DOM Layout

Shared code


Server-side• nginx & Node.js

• Small code volume

• Third party modules:

• connect

• express

• seneca (my db layer)

• Deploy with:

• sudo killall node

API functions

Helpers

Router

Modules

map /api/ URLs

to functions

Shared code

(some with client)

Open source

heavy-lifting

function( req, res ) { ... }


Database Hosting Monitors

MongoDB

Redis

memcached

Amazon

Load Balancer

Instance Scaling

Amazon

cloudkick

Continuous

Cloud Services


Analytics

Logging

Email

Third Party Integration

Twitter

Facebook

LinkedIn

E-Commerce

In-App Purchasing

Stock Feed

JSON, XML, simple form data, text files, ... ... all easy using JavaScript and Node.js Modules


Native AppsSame code as mobile web versions, ...

... wrapped using PhoneGap to run natively

... plus some native plugins


Lesson:


Lesson:

0

1

2

3

4

Client JavaScript Server JavaScript

code volume


Lesson:multi-platform client-side JavaScript is really hard

• a framework is a must

• backbone.js

• business logic must be in common code

• browser-specific code

• virtual .js files

• use jshint to keep IE happy

• code against ECMA, use shims to support older browsers

• Code/Test/Debug inside Safari

• phonegap.github.com/weinre for hard to reach places

• use error capture in production

• Finally, use a simple static site as a fallback (also for Googlebot)


http://phonegap.github.com/weinre

http://phonegap.github.com/weinre

Lesson:multi-platform HTML/CSS is really hard

• "structured" CSS is a must

• sass or less

• Be happy with

•media queries

•CSS3 transforms

• browser-specific code

• virtual .css files

• Clean, semantic HTML is not optional

• graceful degradation may require radically different CSS

• 100% "Responsive" design is tough

• Responsive within browser subsets has higher reward/effort


Lesson:the app stores are not web sites

• that bug in version 1...

•will take two weeks to fix via an update

• some users will never update

• appears after an OS update

• you can't deploy hot fixes

•make everything configurable!

•All prices, text, host names, urls, ...

•On launch, app "checks-in" for new configuration

• this will save your lifeFriday 3 August 2012

Lesson:Node.js does what it says on the tin

• High performance

• High throughput

• Low CPU usage

• Constant memory usage

• leaks will kill, but then

• < 100ms startup time

• means you may not notice!

• callback spaghetti is not a problem in practice

• use functional style

• client-side code is far more difficult

• Don't do CPU intensive stuff

• ... there's a warning on the tin!


Lesson:Outsource your database

•Remote MongoDB hosting

•mongohq.com

•No downtime

•Backups

• Low latency (in Amazon)

•Web-based admin (if lazy)

•Big productivity gain

•no production tuning

•no configuration

•no cluster set up


* Bruno Fernandez-Ruizhttp://www.olympum.com/architecture/the-

nodejs-innovation-advantage/

Node.js means Rapid Development


http://www.olympum.com/author/admin/

http://www.olympum.com/author/admin/

http://www.olympum.com/architecture/the-nodejs-innovation-advantage/




My Company

My Book

Richard [email protected]

Mobile Apps + Node.js

richardrodger.com


node.js mobile appsfiles.meetup.com/1751984/richardrodger-nodejs.pdf · •why should you use...

Documents