Using Node.js to make HTML5 work for everyone
•Download as KEY, PDF•
27 likes•16,445 views
Recommended
More Related Content
What's hot
What's hot (19)
Similar to Using Node.js to make HTML5 work for everyone
Similar to Using Node.js to make HTML5 work for everyone (20)
More from Tom Croucher
More from Tom Croucher (20)
Recently uploaded
Recently uploaded (20)
Using Node.js to make HTML5 work for everyone
- 1. Using Node.js to make HTML5 work for everyone
- 4. 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
- 8. AJAX
- 10. Mobile phones + computer + desktop
- 11. How do we measure capabilities?
- 12. Browser Features HTML5 / CSS3 / etc
- 14. Processing Power CPU / Browser JS Engine / Battery Life
- 16. arewefastyet.com Tests on a 32-bit Mac Mini
- 17. A Mac Mini is 6x faster than the fastest phone
- 18. Bandwidth/Latency Mobile (3G vs. 4GLTE) vs. Broadband vs. Dial-up
- 19. 10ms-3000ms / 0.2mbps-25mbps Mobile (3G vs. 4GLTE) vs. Broadband vs. Dial-up 150ms / 0.1mbps 60ms-120ms / 2mbps - 100mbps
- 20. Goals • FAST - Fastest page load / data refresh • MAINTAINABLE - DRYest code • CHEAP - Use fewest servers
- 21. Client MVC • Backbone.js • Sammy.js • Spine.js • JavaScriptMVC • KnockoutJS
- 22. Server Model Bob George Browser Database Bob Bob George George ... ... ... Client Code AJAX JQuery
- 23. Server Model Bob George Browser Database Bob Bob George George ... ... ... Client MVC Model Bob George
- 24. Server Model Bob George Browser Database Bob SYNC Bob George George ... ... ... Client MVC SYNC Model Bob George
- 25. ClientMVC makes code more DRY
- 26. Repeated models because no sharing between client/backend
- 28. How do we balance between 3 goals?
- 29. Rule #1 Don’t use JS for first page load
- 31. Rule #2 Use models for modular pages
- 32. Derby.js Mojito
- 36. <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" - doesn't 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>
- 37. {"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 have thoughts on this?","source":"u003ca href="http://itunes.apple.com/us/app/twitter/id409789998?mt=12" rel="nofollow"u003eTwitter for Macu003c/a u003e","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 things include 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":tru e,"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},
- 38. 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
- 39. 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
- 40. Derby
- 41. Mojito
- 42. Rule #3 Have Server-side fallbacks for HTML5
- 44. node-canvas
- 45. <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();
- 46. 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());
- 47. Processor Speed vs. Bandwidth
- 49. 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();
- 53. 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+
- 54. SERVER var 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>
- 55. Conclusion
- 56. #1 1st load on server #2 Modules with JS-MVC #3 Server-side fallbacks Questions? Follow me at @sh1mmer
Editor's Notes
- \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