Using Node.js to improve the performance of Mobile apps and Mobile - - PowerPoint PPT Presentation

▶
using node js to improve the performance of mobile apps
SMART_READER_LITE
LIVE PREVIEW

Using Node.js to improve the performance of Mobile apps and Mobile - - PowerPoint PPT Presentation

Aug 25, 2022 120 likes •707 views

Using Node.js to improve the performance of Mobile apps and Mobile web Tom Hughes-Croucher @sh 1 mmer Scalable Server-Side Code with JavaScript Who is Tom? Wrote W3C Standards 10+ years in the web industry Node Worked on projects

slide-1
SLIDE 1

Using Node.js to improve the performance of Mobile apps and Mobile web

Tom Hughes-Croucher @sh1mmer

slide-2
SLIDE 2

@sh1mmer

Who is Tom?

  • Wrote W3C Standards
  • 10+ years in the web industry
  • Worked on projects for: Tesco,

NASA, Walmart, MySpace, etc

  • ~5 years at

Yahoo! including .com

  • Node team at Joyent
Scalable Server-Side Code with JavaScript

Tom Hughes-Croucher

Node

Up and Running

slide-3
SLIDE 3

@sh1mmer

This is a talk about why cell phones suck.

slide-4
SLIDE 4

@sh1mmer

slide-5
SLIDE 5

@sh1mmer

Radio waves suck

(at least compared to fibre or copper)

slide-6
SLIDE 6

@sh1mmer

http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/

slide-7
SLIDE 7

@sh1mmer

Radio vs. buildings

slide-8
SLIDE 8

@sh1mmer

slide-9
SLIDE 9

@sh1mmer

slide-10
SLIDE 10

@sh1mmer

slide-11
SLIDE 11

@sh1mmer

slide-12
SLIDE 12

@sh1mmer

slide-13
SLIDE 13

@sh1mmer

http://www.webperformancetoday.com/2012/04/02/mobile-versus-desktop-latency/

Desktop Mobile

slide-14
SLIDE 14

@sh1mmer

Ookla/speedtest.net via http://www.slideshare.net/patrickmeenan/velocity-2012-taming-the-mobile-beast/22

slide-15
SLIDE 15

@sh1mmer

Effect of latency on servers

slide-16
SLIDE 16

@sh1mmer

Shielding Frontends

slide-17
SLIDE 17

@sh1mmer

nginx haproxy ATS varnish frontends web services / data

slide-18
SLIDE 18

@sh1mmer var client = net.connect(80, domain, function() { client.write("GET / HTTP/1.1\r\n"); t1 = (new Date()).getTime(); }); client.on('end', function() { t2 = (new Date()).getTime();

  • utput.write(domain + ' ' + ((t2-t1)/1000) + 's\n');

});

slide-19
SLIDE 19

@sh1mmer

macupdate.com 442.3 uzai.com 403.658 wired.jp 238.848 facilisimo.com 205.159 mycokerewards.com 202.757 rbc.cn 192.354 moviesmobile.net 183.157 stop55.com 145.927 dir.bg 137.982 carrefour.fr 112.789 sifyitest.com 111.171

Sample of Alexa 5000

slide-20
SLIDE 20

@sh1mmer

Event-driven Frontends

slide-21
SLIDE 21

@sh1mmer

Client → Server Server → DB Computation Computation

slide-22
SLIDE 22

@sh1mmer

Not an event frontend

slide-23
SLIDE 23

@sh1mmer

slide-24
SLIDE 24

@sh1mmer

Server

slide-25
SLIDE 25

@sh1mmer

Request

slide-26
SLIDE 26

@sh1mmer

slide-27
SLIDE 27

@sh1mmer

Event-driven frontend

slide-28
SLIDE 28

@sh1mmer

Place-holder

slide-29
SLIDE 29

@sh1mmer

slide-30
SLIDE 30

@sh1mmer

Shared Work Resources

slide-31
SLIDE 31

@sh1mmer

Memory operations

slide-32
SLIDE 32

@sh1mmer

var x = "I am a string" ~1ns Running 1 instruction 2ns Data from l1 cpu cache 5ns Data from l2 cpu cache 80ns Data from ram

slide-33
SLIDE 33

@sh1mmer

slide-34
SLIDE 34

@sh1mmer

Mobile latency

slide-35
SLIDE 35

@sh1mmer

slide-36
SLIDE 36

@sh1mmer

Cat 100 Blue Whales

slide-37
SLIDE 37

@sh1mmer

"They went from running 15 servers with 15 instances (virtual servers) on each physical machine, to just four instances that can handle double the traffic."

http://venturebeat.com/2011/08/16/linkedin-node/

slide-38
SLIDE 38

@sh1mmer

Not just simple applications

slide-39
SLIDE 39

@sh1mmer

slide-40
SLIDE 40

@sh1mmer

slide-41
SLIDE 41

@sh1mmer

First page load vs. Client MVC

slide-42
SLIDE 42
slide-43
SLIDE 43

@sh1mmer

slide-44
SLIDE 44

@sh1mmer

http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

slide-45
SLIDE 45

@sh1mmer

Bandwidth Latency Device capability

slide-46
SLIDE 46

@sh1mmer

Barfing data at 3G

slide-47
SLIDE 47

@sh1mmer

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
slide-48
SLIDE 48

@sh1mmer

slide-49
SLIDE 49

@sh1mmer

Clientside templating

slide-50
SLIDE 50

@sh1mmer

slide-51
SLIDE 51

@sh1mmer

Node.js allows you to tune rendering between client and server based on the network.

slide-52
SLIDE 52

@sh1mmer

HTML JSON More bandwidth Less client processing Less bandwidth More client processing Battery friendly Cheaper for you bandwidth/server Cheaper for them bandwidth

slide-53
SLIDE 53

http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

slide-54
SLIDE 54

@sh1mmer

Challenges

  • JSON - fast object / slow render
  • HTML - fast render / slow objects
  • If we use HTML where do we manage our model?
  • If we use JSON does rendering matter?
slide-55
SLIDE 55

@sh1mmer

Identifying use cases

  • "Client-side apps" - read/write data on client
  • "Render-only apps" - mostly read data on client
slide-56
SLIDE 56

@sh1mmer

Summary

  • Node.js allows you to:
  • Manage resources with unreliable mobile data connections
  • Choose where to apply rendering
  • Pick the right rendering solution for the right scenario
slide-57
SLIDE 57

@sh1mmer

Demo time.

slide-58
SLIDE 58

Questions

@sh1mmer