Using Node.js to make HTML5 work for everyone

21,069 views

Published on

Published in: Technology, Design
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total views
21,069
On SlideShare
0
From Embeds
0
Number of Embeds
638
Actions
Shares
0
Downloads
236
Comments
1
Likes
26
Embeds 0
No embeds

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
  • Using Node.js to make HTML5 work for everyone

    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

    ×