• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
15,867
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
205
Comments
1
Likes
25

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Using Node.js to makeHTML5 work for everyone
  • 2. Scalable Server-Side Code with JavaScript Node Up and Running Tom Hughes-Croucher http://ofps.oreilly.com/titles/9781449398583/http://shop.oreilly.com/product/0636920015956.do
  • 3. Yahoo started in1994
  • 4. AJAX
  • 5. Mobile phones + computer + desktop
  • 6. How do we measure capabilities?
  • 7. Browser Features HTML5 / CSS3 / etc
  • 8. Processing PowerCPU / Browser JS Engine / Battery Life
  • 9. arewefastyet.comTests on a 32-bit Mac Mini
  • 10. A Mac Mini is 6x fasterthan the fastest phone
  • 11. Bandwidth/LatencyMobile (3G vs. 4GLTE) vs. Broadband vs. Dial-up
  • 12. 10ms-3000ms / 0.2mbps-25mbps Mobile (3G vs. 4GLTE) vs. Broadband vs. Dial-up 150ms / 0.1mbps60ms-120ms / 2mbps - 100mbps
  • 13. Goals• FAST - Fastest page load / data refresh• MAINTAINABLE - DRYest code• CHEAP - Use fewest servers
  • 14. Client MVC• Backbone.js• Sammy.js• Spine.js• JavaScriptMVC• KnockoutJS
  • 15. Server Model Bob GeorgeBrowser Database Bob Bob George George ... ... ... Client Code AJAX JQuery
  • 16. Server Model Bob GeorgeBrowser Database Bob Bob George George ... ... ... Client MVC Model Bob George
  • 17. Server Model Bob GeorgeBrowser Database Bob SYNC Bob George George ... ... ... Client MVC SYNC Model Bob George
  • 18. ClientMVC makes code more DRY
  • 19. Repeated models because no sharingbetween client/backend
  • 20. JavaScript everywhere
  • 21. How do we balance between 3 goals?
  • 22. Rule #1Don’t use JS for first page load
  • 23. Rule #2Use models formodular pages
  • 24. Derby.jsMojito
  • 25. http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templateshttp://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
  • 26. <div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-hover js-profile-popup-actionable js-original-tweet" data-tweet-id="204647858497003520" data-item-id="204647858497003520" data-screen-name="kevinmarks" data-user-id="57203" data-is-reply-to=""> <i class="dogear"></i> <div class="content"> <div class="stream-item-header"> <small class="time"> <a href="/#!/kevinmarks/status/204647858497003520" class="tweet-timestamp js-permalink" title="12:00 PM - 21 May 12"><span class="_timestamp js-short-timestamp " data-time="1337626826000" data-long-form="true">2m</span></a></small> <a class="account-group js-account-group js-action-profile js-user-profile-link" href="/#!/kevinmarks" data-user-id="57203"> <img class="avatar js-action-profile-avatar" src="https://si0.twimg.com/profile_images/1746342600/image1326223584_normal.png" alt="Kevin Marks"> <strong class="fullname js-action-profile-name show-popup-with-id">Kevin Marks</strong> <span>‫/<‏‬span><span class="username js-action-profile-name"><s>@</s><b>kevinmarks</b></span> </a> </div> <p class="js-tweet-text"><a href="/#!/search/%23tcdisrupt" title="#tcdisrupt" class=" twitter-hashtag pretty-link" data-query-source="hashtag_click"><s>#</s><b>tcdisrupt</b></a> <a class=" twitter-atreply pretty-link" data-screen-name="ark" href="/#!/ark" rel="nofollow"><s>@</s><b>ark</b></a>: "I even included Brooklyn" - doesnt half the NY tech crowd live in Brooklyn?</p> <div class="stream-item-footer"> <div class="context"></div> <a class="details with-icn js-details" href="/#!/kevinmarks/status/204647858497003520"> <span class="details-icon js-icon-container"> </span> <b> <span class="expand-stream-item js-view-details"> <span class="expand-action-wrapper"> Expand </span> </span> <span class="collapse-stream-item js-hide-details"> <span class="collapse-action-wrapper"> Collapse </span> </span> </b> </a> <ul class="tweet-actions js-actions"> <li class="action-reply-container"> <a class="with-icn js-action-reply" data-modal="tweet-reply" href="#" title="Reply"> <i class="sm-reply"></i> <b>Reply</b> </a> </li> <li class="action-rt-container"> <a class="with-icn js-toggle-rt" data-modal="tweet-retweet" href="#"> <i class="sm-rt"></i> <b><span class="undo-retweet" title="Undo retweet">Retweeted</span><span class="retweet" title="Retweet">Retweet</span></b> </a> </li> <li class="action-del-container"> <a class="with-icn js-action-del" href="#" title="Delete"> <i class="sm-trash"></i> <b>Delete</b> </a> </li> <li class="action-fav-container"> <a class="with-icn js-toggle-fav" href="#"> <i class="sm-fav"></i> <b><span class="unfavorite" title="Undo favorite">Favorited</span><span class="favorite" title="Favorite">Favorite</span></b> </a> </li></ul> </div>
  • 27. {"created_at":"Mon May 21 19:06:18 +0000 2012","id":204649335533735936,"id_str":"204649335533735936","text":"discussing the viability of a hosted IRC logging service with @mwbrooks. anyone havethoughts on this?","source":"u003ca href="http://itunes.apple.com/us/app/twitter/id409789998?mt=12" rel="nofollow"u003eTwitter for Macu003c/au003e","truncated":false,"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id":5447362,"id_str":"5447362","name":"Brock Whitten","screen_name":"sintaxi","location":"iPhone: 49.281845,-123.108002","description":"Co-creator of phonegap. Engineer at Joyent. Favorite thingsinclude cinema, beer, beach, board games, javascript, ruby, and programs that are fast.","url":"http://sintaxi.com","protected":false,"followers_count":775,"friends_count":139,"listed_count":86,"created_at":"Mon Apr 23 23:30:49 +0000 2007","favourites_count":44,"utc_offset":-28800,"time_zone":"Pacific Time (US & Canada)","geo_enabled":true,"verified":false,"statuses_count":2736,"lang":"en","contributors_enabled":false,"is_translator":false,"profile_background_color":"1A1B1F","profile_background_image_url":"http://a0.twimg.com/images/themes/theme9/bg.gif","profile_background_image_url_https":"https://si0.twimg.com/images/themes/theme9/bg.gif","profile_background_tile":false,"profile_image_url":"http://a0.twimg.com/profile_images/2036233722/Photo_19_normal.jpeg","profile_image_url_https":"https://si0.twimg.com/profile_images/2036233722/Photo_19_normal.jpeg","profile_link_color":"09BBF6","profile_sidebar_border_color":"BDBDBD","profile_sidebar_fill_color":"E0E0E0","profile_text_color":"333333","profile_use_background_image":true,"show_all_inline_media":false,"default_profile":false,"default_profile_image":false,"following":true,"follow_request_sent":null,"notifications":null},"geo":null,"coordinates":null,"place":null,"contributors":null,"retweet_count":0,"entities":{"hashtags":[],"urls":[],"user_mentions":[{"screen_name":"mwbrooks","name":"Michael Brooks","id":14280268,"id_str":"14280268","indices":[62,71]}]},"favorited":false,"retweeted":false},
  • 28. HTML vs. JSON• Larger size (KB) • Small size• Less browser processing • More browser intensive • e.g. innerHTML insert • e.g. templating• Requires more server • Requires less server work work
  • 29. Computer vs. Mobile• More processing power • Less processing power• Probably more/faster • Probably less/slower bandwidth bandwidth JSON Probably HTML Maybe JSON iPad wifi vs. iPhone 3 on 3G
  • 30. Derby
  • 31. Mojito
  • 32. Rule #3 Have Server-sidefallbacks for HTML5
  • 33. http://caniuse.com
  • 34. node-canvas
  • 35. <canvas id=”simple”><img src=”/nodefallback.png”></canvas>var canvas = document.getElementById(‘simple’) ,ctx = canvas.getContext(2d);ctx.font = 30px Impact;ctx.rotate(.1);ctx.fillText("Awesome!", 50, 100);var te = ctx.measureText(Awesome!);ctx.strokeStyle = rgba(0,0,0,0.5);ctx.beginPath();ctx.lineTo(50, 102);ctx.lineTo(50 + te.width, 102);ctx.stroke();
  • 36. var Canvas = require(canvas) , canvas = new Canvas(200,200) , ctx = canvas.getContext(2d);ctx.font = 30px Impact;ctx.rotate(.1);ctx.fillText("Awesome!", 50, 100);var te = ctx.measureText(Awesome!);ctx.strokeStyle = rgba(0,0,0,0.5);ctx.beginPath();ctx.lineTo(50, 102);ctx.lineTo(50 + te.width, 102);ctx.stroke();res.write(canvas.toData());
  • 37. Processor Speed vs. Bandwidth
  • 38. var canvas = document.getElementById(‘simple’) ,ctx = canvas.getContext(2d);ctx.font = 30px Impact;ctx.rotate(.1);ctx.fillText("Awesome!", 50, 100);var te = ctx.measureText(Awesome!);ctx.strokeStyle = rgba(0,0,0,0.5);ctx.beginPath();ctx.lineTo(50, 102);ctx.lineTo(50 + te.width, 102);ctx.stroke();
  • 39. 846d26317a9b8fd22ab9916693ea85c2ba89bd3a40a95736025ea43b10960237d00c90e93d3a46ad41465b136b1f606cb6ee1ae0d1c2b61b0247018b81ff009700a767dbac4704d2daabf528b5c6186d0152ea7f5c013c5958bf01111c1b013b020701c766db7c1858003c4f04d91c60cf6c9bb7037b013331905e71c6f5fa008669bfc2ba2b81ed0aebeb00496d4cbce717abe57d92b24daa5bda345b0fb81898502daf003e02fc3ad9661cb02b91185804dc913cbf3462a6d3ec673c4464ab4e2f947d80a839f2f5d392e7bcbf50fe89a4fc9d59d90a3a01341e3883e803a5db2c037e056cb97adeb67a6934d520a5e6d595c449b9a45056aa4100a61081b54575cba5d9af776765b711a3f563810b807715f65f1f380c3818d81fb8beb0cddac0c7881a715b22f0ee2146ffcf23824e7d60b407c815d57d5b1fe4f1c2fa29d5fd3e2daf3329799c07c8e5d5fd113483e361ba6b9809c0ef81ade93ee12755c7bd5bb6ff5b802381af56f77f6a393e885a700f2250970237534e54f4bbfd8103887ee07ce2c2358ff82c6da60ed35c9acda1d754654714cabe54953d9dad3fb25aff93c23e2b81d3aaf21d0a650754655714cade0c6c5558ffe9ec7d9cdcf2bae9ed19a25f93db14b88c08c474fbe5c09fab6328790ff03e2201b105d13cec075fa0fcfe97039feae1718d3adbd2fc10ef4cca0f2a949f5995cdcfd69f58ad7fa0b0cf4ae0db55f949d9fa6544a77d2d9afd8e1789936e46e1f9cecddecb5d856dbe4134c9ce4fd69d9fed3709b8b7e598ebdbb3c02185cf6f4e61db9d806d805380b381a389e6e1483aad705cf5ede0113e9651ed93343fc0b393f2bd0ae5dfafca6ecdd69f41f94a5fdf7e58ed774db6fed26afde6857deeabca4acf7b55729ceb1357c7b4fc693ae9f659c9fadbb3cfa09488f81b71a148d72da5d38cac2d2eecfb799a933eef229a6f6b03c711b3a6ff4bd44e27111788d5e95b85e3aa6fdbace6d77a49464b1fa494debd2279dcd60781663f640acdfec74a3a73b72611e9e07c3ca4ee7f6c5e78ade5447fe5d585b2e793c733688e3d2d4f1ea765cf66db1d9e2d3f43f4cb76a57b6aff446280f48c6a793c3116943b8de67cb5ed881a6f1c31fe53db8ae82fbcbf7acda70bcf3799b8eaef593defedc0b5c0bf0bdbd626b4ac7f96c8306a08c6101dd0fc0a733ff105fc1cf841a1fc8fd5febfcbd65f02fc34595e02fc2bdbafd4a799553ddfe185b2816ebf4ddecbac966dea01ccb726ebae4df6dbacb0cfad55d99e85b2df24fb966ab5e5c009c0dbaaf75b6aaa3dd572ac27d0742c71212a6dff579a0989da792dfbdcdab2fd881b0d35c81b8801bcdc1694d3b4b5ba06c953bd53881f5bd5aea2bbd33a9166f66a1e9d26cf70e778fd2f793c97e860e7b5c8f7889aeb62e06b444d735f52fedac2f3ceafee372894a53f07985628bf8d68de004ca53b23b782f8ccef01be43b3b39c9fec8702b3699f3dbd2751dbef0bdc9495b5f579ee68593fe24643800c657a7b495b80ec48775bfa32e24a5a9b4ca7b6a8a529d75280dc023c469c8c53e90ee805c9e36544f6eca86cff3144477d5b22eb95a738b72ebce643d57d2900d271a1d2f13e90bd76ea16e0eeeaf13f0afbe619b093e90e8e1788203f8448044004ff6c9a99b9b626d69d2deb47dc68988b55ea7f0c455b80e41dcdcbb26d76005e956d7379f2b874427e934801ef479ccceb1229e8dd811f65db7e8e68d2951c075c44f3c2553ac9170e50968e89948e777ef2387faf77278f4be9e034f8b6a7bb3686c8987d19f871b67e1760e76c5d5b80f44d0dd2ef01b236d12e4fcd274ec09944f57d2871d5cdb33e6d9df4d49dc4d5340d905227faca6439cf1041e76afe332261f004d187388be609ba9808a49b5b8ee920e08bd9bad2495ebfe640c13394f23cb190768e4b9dfbf4f3dca9505ef71f4ae7563e67aeef6b907e6f62ed46f3874f0f1299a179d5ad7658b6dd0644d55f9a6e52ab6b868182e8c6ec394a274ddedc194fccc5da92ee2cd5fe4413e451629ed77974061f53c7104d97da4027792978d2001828b84ae569d9a683ecfbba42f903d57de9076b796d550a901544bab92ff47b80949a570fb66c3b355b1e4b7c01030548ddb718ca36b595856d1655f79b15b64dbfecd944560922cf7f30d104fb68b6df0ca2035ba7535fce1a242f1f6cdf3440f2f70b316a3f89f2a87e9e1e2e75d2e71229ecbed0ef013287c8b64c23be8ce974b79153798040fb8445885aa84ea50ea596a9cd03de94ad5b4e5c6df3dae57e225d5a4be7793d521dc3f1340304e24a5a2b8daf8c440d32d873970268679a7d8dda53d972a906e99bfe07f47f805c50dd0633861801af03a9be1f2840fe4ee70b6bdbe6099a999c8b887e4fea58ca23bf5767cbe90faeeaab64e93b788cee81c28db3f215c484beb568368356d05dcbaeee1a64b0e01bc8a26cb914207dd3ff80fe0f90dd8911dd25c4c9bc844895a6cb4f11d32b4e6c798e7588a6cc14a2e93285089e8b936dda02e44a9a29d7f3886cd3eec9baaf17f67d8cee7e0444f36172f5f84062902e1f738118a748e5630c8b89becc549a7f81b480984202e551f4e7e98ccd8ca53be9b09208bcda60b54f29808eab5e7766b5ff8c6abbe97407d77a347f3e0dd620c3723dd1495e9fe8f44d4a6e9b64cbeb1157dda5c9ad0e9e7b807f56cbf50871ea6e62ec6353e28b9c4a7cb197d2f4027152cf063ed872dc8b80f7d29d4400b8904ee6e79201def785d9f262ba3bbd75ed536acaa4d9b1d209fe309df73f85ee9374319de09a4cb38ff00c9d84c6389a4dbfe57466357c86f8338d7a2afb42baa7ddf47d060bfa3f40203ef4fa847f6880edc6520ea469447a712881b480f882da02a9b618f81031e8782831d2bd0e113c7380ef12cdb3dc99c41fdf0d34b67337cd3184ab818f27cb9b11630d7b14f64f836bb835c060cda7b47c239aa9dc47e8f4c7cecaca9ea4537bc228184587d111204335928154dfe602a7d21e48b965c438c7d144e77c169d93ec39e2e4fe2ccdc997671201599f546380af149eff06e097c9f270fb1083359fd2f2d2bf570e34ba9f671f4b35c82344d3b46fac49013254430da471445b7a750452bd0cd1cc38a7ba4da0937d5b4873066f6d0ef00e62ced60e2ddb5c47ccb64d9b312f67 0df25ca1bceecbcd2c94e5fdaac5441f6d6a751c536836497bee95182043f522231b481bd11d48b9eb8826dd1b899fe76e5fbdeea34432e12f346bb25549f10e56fb2c249a9169b3a94e26ec52d8370f9019c4c5ea66225951ff2b7f5f314056dd4807d22286fec70e37119de64d892bf
  • 40. http://caniuse.com
  • 41. Socket.io Support• Desktop • Mobile • Internet Explorer • iPhone Safari 5.5+ • iPad Safari • Safari 3+ • Android WebKit • Google Chrome 4+ • WebOs WebKit • Firefox 3+ • Opera 10.61+
  • 42. SERVERvar io = require(socket.io).listen(80);io.sockets.on(connection, function (socket) { socket.emit(news, { hello: world }); socket.on(my other event, function (data) { console.log(data); });});CLIENT<script src="/socket.io/socket.io.js"></script><script> var socket = io.connect(http://localhost); socket.on(news, function (data) { console.log(data); socket.emit(my other event, { my: data }); });</script>
  • 43. Conclusion
  • 44. #1 1st load on server#2 Modules with JS-MVC#3 Server-side fallbacks Questions? Follow me at @sh1mmer