UI, API & BACKEND SUCCESS SECRETS

Transcription

1 UI, API & BACKEND SUCCESS SECRETS Chander Dhall

2 Challenge 2-day Training => 1- hour Presentation

3 About Me Microsoft MVP Azure Advisor Asp.NET Insider Web API Advisor Pluralsight/Linkedin Learning Author Dev Chair - Dev Connections

4 About Me Leader Angularjs Meetup Austin Leader Rockstar Meetup Austin Leader Software Developers Meetup Conference Organizer MVPMIX.com Cazton Podcast

5 BACKEND

6 Why? Amazon claim Just an extra 1/10 th of a second on their response times will cost them 1% in sales. Google ½ a second increase in latency caused traffic to drop by a fifth.

7 Step 1 Appserver & DBServer App Server Database Server

8 Awesome Solution? Global Redirector Global Look up Hash Map Load Balancer Load Balancer Has h Ma p Load Balancer Load Balancer Has h Ma p DB Cluster DB Cluster DB Cluster DB Cluster D B D B D B D B D B D B D B D B D B D B D B D B Set 1-10 Million Users Set Million Users

9 May be close to an awesome solution? Caching Load Balancer Load Balancer Hash Map Offline Processing DB Cluster Master DB Cluster D B D B D B D B D B D B Master Slave Slave Slave Slave No Sql SAN Search Db

10 Agenda Why is it important to scale? Creating a scalable solution (in incremental steps) Propose an Architecture Identify Failures and Bottlenecks Identify Downtime Apply a better solution Repeat until we solve (in 10 steps) Then some bonus stuff (a better solution)

11 Unfortunate Solution Load Balancer S S S S S Services

12 Gilbert and Lynch white paper Network 1 Network 2 A Write Algorithm { name : Chander, gender : m } B Read Algorithm { name : Chander, gender : m }

13 Update Message CAZTON Happy path scenario Network 1 Network 2 A Write Algorithm { name : Dhall, gender : m } B Read Algorithm { name : Chander, gender : m }

14 Happy path scenario Network 1 Network 2 A Write Algorithm { name : Dhall, gender : m } B Read Algorithm { name : Dhall, gender : m }

15 Update Message CAZTON Network partitions Network 1 Network 2 A Write Algorithm { name : Dhall, gender : m } B Read Algorithm { name : Chander, gender : m }

16 CAP Theorem Consistency Availability Partitioning

17 Fallacies of Distributed Computing Network is reliable. Latency is zero. Bandwidth is infinite. Network is secure. Topology doesn t change. There is one administrator. Transport cost is zero. Network is homogenous.

18 Step 1 Appserver & DBServer App Server Database Server

19 Step 2 Vertical Scaling Appserver & DBServer App Server Database Server Throw more RAM and CPU

20 Step 3 Vertical Partitioning (Services) Introduction Deploying each service on a separate node Advantages Increases Availability (per app) Easy to tune and optimize Reduces context switching Simple to implement App Server Db Server

21 Step 4 Horizontal Scaling Load Balancer DB Server

22 Step 5 Vertical Partitioning (Hardware) Load Balancer Load Balancer DB Server SAN

23 Step 6 Horizontal Scaling (DB) Load Balancer Load Balancer DB Server SAN

24 Step 6 Horizontal Scaling (DB) Load Balancer Load Balancer DB Replica DB Server DB Server DB Server SAN

25 Step 7 Vertical / Horizontal Partitioning (DB) Load Balancer Load Balancer DB Cluster DB Server DB Server DB Server SAN

26 Step 7 Vertical / Horizontal Partitioning (DB) App Cluster Vertical Partitioning Db Cluster 1 Db Cluster 2 Twitter Table Facebook Table Users Table Products Table

27 Step 7 Vertical / Horizontal Partitioning (DB) App Cluster Horizontal Partitioning 1st Million Users 2nd Million Users Db Cluster 1 Db Cluster 2 Twitter Table Facebook Table Twitter Table Facebook Table

28 Step 7 Vertical / Horizontal Partitioning (DB) Load Balancer Load Balancer Hash Map SAN DB Cluster DB Cluster DB DB DB DB DB DB

29 Step 8 Separating Sets Global Redirector Global Look up Hash Map Load Balancer Load Balancer Load Balancer Load Balancer Hash Map Hash Map DB Cluster DB Cluster DB Cluster DB Cluster DB DB DB DB DB DB DB DB DB DB DB DB Set 1-10 Million Users Set Million Users

30 Step 9 Caching Add caches within App Server Object Cache Session Cache API cache Page cache Software Memcached Redis Azure Cache (App Fabric)

31 Step 10 HTTP Accelerator A good HTTP Accelerator / Reverse proxy performs the following Redirect static content requests to a lighter HTTP server (lighttpd) Cache content based on rules Use Async Non blocking IO Maintain a limited pool of Keep-alive connections to the App Server Intelligent load balancing Solutions Nginx (HTTP / IMAP) Perlbal Hardware accelerators plus LBs

32 More Important Stuff CDNs IP Anycasting Async Nonblocking IO (for all Network Servers) If possible - Async Nonblocking IO for disk Incorporate multi-layer caching strategy where required L1 cache in-process with App Server L2 cache across network boundary L3 cache on disk Grid computing

33 Scalability and Performance CAZTON NoSql Vs Relational Depth of Functionality

34 Relational -> NoSql

35 Step 12- Finalizing Caching Load Balancer Load Balancer Hash Map Offline Processing DB Cluster DB Cluster Master DB DB DB DB DB DB Master Slave Slave Slave Slave No Sql SAN Search Db

36 WEB API

37 Nouns, No Verbs in the URL GET Principle: Use HTTP verbs 37

38 What about? Responses that don t involve resources Use verbs Example: te?from=en&to=gn

39 KISS (Keep it simple, stupid!) Principle: 2 base URLs/resource 39

40 POST HTTP Verbs POST Creates a new training(strange?) POST Error Why, so? 40

41 PUT HTTP Verbs PUT Bulk update trainings PUT If exists, update 23 Else ERROR 41

42 DELETE HTTP Verbs DELETE Delete all trainings DELETE If exists, Delete 23 Else Resource Not found Error 42

43 Associations GET /trainers/12/trainings/

44 COMPLEXITY GET /trainers/12/trainings? zip=92618&tech=api 44

45 Error Format Error format 1 { code" : "401", "message : "Authenticate", } 45

46 Error Format Error format 2 { type" : OAuthException", "message : (#401: Request not authorized", } 46

47 Error Format Error format 3 (Recommended!) { "status" : "401", "message : "Authenticate", "code : 1234, details": " } 47

48 Error Format Google GData Netflix Digg

49 Errors Only 3 cases Everything worked Client did something wrong API did something wrong 49

50 Error Codes (Required) So minimum response codes OK Bad Request Internal Server Error 50

51 Error Codes (Extended) Created Not Modified 404 Not Found Unauthorized Forbidden 51

52 Versioning /bankname/v2.0/accounts/checking / /bankName/accounts/checkingThis /bankname/accounts/checking?v=1 52

53 Pagination

54 Multiple Formats Or Or 54

55 Multiple Formats accept: application/json 55

56 UI

57 Our Top clients strive to achieve Response Time - 250ms

58 Intentional Speed Delay Source: FT.com

59 Impact Mean Percentage Drop in Article Views Source: FT.com

60 Impact Source: FT.com Mean Percentage Drop in Article Views

61 Performance vs Perception CAZTON 1 second 2 second 3 second 4 second

62 Performance vs Perception CAZTON 1 second 2 second 3 second 4 second

63 Performance vs Perception CAZTON 1 second 2 second 3 second

64 Performance vs Perception CAZTON 1 second 2 second 3 second 3.2 second

65 Time to reach Receive Windows Limit Time to reach the cwnd size of size N Rwnd = 128KB RTT = 42ms (San Francisco to New York) 128KB/1460B = 90 segments log 2 (90/10) = So Time = 42ms * = 160ms

66 SYN 21ms SYN ACK ACK 42 ms Request Processing 10x ACK 20x ACK 40x ACK 20x ACK 113 ms 155 ms 197 ms 239 ms 92 ms 134 ms bytes bytes 176 ms58400 bytes 218 ms bytes Cnwd: bytes

67 Optimizing TCP Upgrade server kernel to latest version Increase Initial cwnd size Enable window scaling (Increases Rwnd size. Previous Limit 65,535 bytes. Current limit -1 gigabyte) Disable slow-start after idle Investigate enabling TCP Fast Open Eliminate redundant data transfers Compress transferred data Reduce roundtrip times Reuse TCP connections whenever possible

68 Fetching using 3G/4G Control Plane (3G) up to 2.5 seconds

69 Tips Reduce DNS lookups Avoid Redirects (Bad: example.com to m.example.com) Make Fewer HTTP Requests Gzip your text Use a CDN Optimize images per device

70 Tips Add ETags to avoid fetching duplicate content Test on actual mobile devices Add an Expires Header Use Local Storage for js and css

71 Battery Most energy intensive components 1. Screen 2. Radio

72 Prefetch Data How to Save Battery Minimize periodic data requests

73 HTTP 2 New Binary Framing Interleaving requests and response messages Parallel Requests Header Compression Server Push Stream Prioritization (Weight and dependency)

74 Critical Rendering Path Time taken to get to the first render of the page

75 Critical Rendering Path Network HTML CSS DOM Javascript Render Tree Layout Paint CSSOM

76 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ndc Web Performance</title> HTML DOM <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> Network <div>hello World</div> <p style="display:none"> Hidden </p> </body> </html>

77 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ndc Web Performance</title> HTML DOM <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> Network <div>hello World</div> <p style="display:none"> Hidden </p> </body> </html>

78 body div p Hello World Hidden

79 Network HTML CSS DOM CSSOM Render Tree #

80 DOM Tree + CSSOM body = Render Tree body display: none div font-size:medium p div Hello World Hello World Hidden Hello World

81 Critical Rendering Path Network HTML CSS DOM Javascript CSS Object Model Render Tree Layout Paint

82 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ndc Web Performance</title> <script src="analytics.js" async></script> <script src="sayhi.js" ></script> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> Execute when ready <div>hello World</div> <p style="display:none"> Lorem ipsum dolor sit amet </p> Block parse and execute </body> # </html>

83 Older Browsers External Scripts (Blocks Download plus rendering) Download -> Parse -> Execute External Script 1 External Script 2 CSS Image

84 Improvements External Scripts (Blocks Download plus rendering) Parallel Download Parse Execute External Script 1 External Script 2 External Script 2 CSS Image

85 Gmail Mobile <script type= text/javascript > /* js code */ </script> get script DOM element s text remove comments eval() when invoked Source: Steve Souders

86 Javascript Tips JS can block CSS JS can block DOM Use async Avoid document.write() Defer all, but critical, scripts towards the end of the body tag

87 Critical Rendering Path Network HTML CSS DOM Javascript CSS Object Model Render Tree Layout Paint

88 Performance (60fps) 60 frames = 1000ms 1 frame = 1000/60 = 16.67ms (If it exceeds 16ms, frame is dropped) Frame Code GC Layout Paint

89 Resizing Adding Nodes Removing Nodes Changing Styles Layout Update

90 Lazy vs Synchronous Update Frame Frame Code GC Layout Paint Paint Lazy Recalculated once before paint Synchronous Forced multiple times before paint for(e in elements){ e.style.left = e.offsetleft px ; }

91 Layout To Paint Apply visual styles Create the bitmap Pixelate the screen Things to note Update the minimum area needed Note: Some styles are more expensive

92 Layout var element = document.getelementbyid( book'); element.style.borderleft = '1px'; //Reflow element.style.borderright = 1px'; //Reflow element.style.padding = '5px'; //Reflow

93 Layout var element = document.getelementbyid( book'); element.style.csstext += 'border-left: 1px; border-right: 1px; padding: 5px;';

94 Inefficient myelement.style.left = 1 + myelement.offsetleft + 'px'; myelement.style.top = 1 + myelement.offsettop + 'px'; if (myelement.offsetleft >= 500) { } dosomething();

95 Efficient var offsetleft = myelement.offsetleft ; myelement.style.left = 1 + offsetleft + 'px'; myelement.style.top = 1 + myelement.offsettop + 'px'; if (offsetleft >= 500) { dosomething(); }

96 Paint Most expensive part of the pixel pipeline Changing any property (except transforms or opacity) always triggers paint. Triggering layout automatically triggers paint. Can trigger paint without layout (change backgrounds, text colors, shadows) Tip: Reduce paint areas through layer promotion and orchestration of animations.

97 Repaint/Reflow Repaint Or Redraw Invisible Element made visible (or Vice Versa) Without altering the layout of the document Reflow (More Expensive) When DOM tree is manipulated

98 What causes a Reflow? Resizing the window Changing a font CSS pseudo classes like :hover Changing the class attribute Calculating offsetwidth and offsetheight Modifying the style attribute of an element

99 Why is Reflow Expensive? All child nodes Element ancestors Elements following the element have their details recalculated. Effectively the entire page is re-rendered.

100 Reflows var fragment = document.createdocumentfragment(); var elem, contents; for(var i = 0; i < textlist.length; i++) { } elem = document.createelement('p'); contents = document.createtextnode(textlist[i]); elem.appendchild(contents); fragment.appendchild(elem); document.body.appendchild(fragment); # Document Tree Modification

101 Reducing Reflow Impact var original = document.getelementbyid('container'); var cloned = original.clonenode(true); //EFFICIENT cloned.setattribute('width', '50%'); var elem, contents; for(var i = 0; i < textlist.length; i++) { } elem = document.createelement('p'); contents = document.createtextnode(textlist[i]); elem.appendchild(contents); cloned.appendchild(elem); original.parentnode.replacechild(cloned, # original); Cloning The Original tree

102 Reducing Reflow Impact var element= document.getelementbyid(id'); element.style.display = 'none'; element.appendchild(newnodes); element.style.classname = newclass'; element.style.display = 'block'; Hide Change Unhide #

103 Thought Leaders to Follow Steve Souders Ilya Grigorik Paul Irish Douglas Crockford (Ajax) Ben Gailbraith (Responsive) Tony Gentilcore (Gzip and beyond) Stoyan Stefanov (Image Optimization) Paul Lewis Chander Dhall

104 # CAZTON Books

105 Cache locally Inefficient Efficient <script type="text/javascript"> for (var i=0;i<car.images.length;i++) car.images[i].src= image.gif" </script> <script type="text/javascript"> var images=car.images for (var i=0;i<theimages.length;i++) images[i].src= image.gif" </script> #

106 Loops Inefficient Efficient for (var i=0, len<x.length;; i++) { } dosomething() for (var i=0, len=x.length; i<len; i++) { } dosomething() #

107 Reduce Inspection Time Inefficient var all= document.getelementsbytagname('*'); for(var i = 0; i < all.length; i++) { } if(all[i].hasattribute( x')) { } # dosomething(); Efficient var all= document.getelementbyid( myid').getelementsbytagname('*'); for(var i = 0; i < all.length; i++) { } if(all[i].hasattribute(x')) { } dosomething(); break;

108 Use XPath Inefficient Efficient var allelements = document.getelementsbytagname('*'); for(var i = 0; i < allelements.length; i++) { if(allelements[i].tagname.match(/^ h[2-4]$/i)) { } } // var headings = document.evaluate('//h2 //h3 //h4', document, null, XPathResult.ORDERED_NODE_ITERATOR _TYPE, null); var oneheading; while(oneheading = headings.iteratenext()) { // } #devconnectionsource:

109 Avoid keeping alive references var remotedoc = parent.frames['sideframe'].document; var remotecontainer = remotedoc.getelementbyid('content'); var newpara = remotedoc.createelement('p'); newpara.appendchild(remotedoc.createtextnode('new content')); remotecontainer.appendchild(newpara); // Remove references remotedoc = null; remotecontainer = null; newpara = null; #dsource: