Using Node.js to make HTML5 work for everyone
Download as KEY, PDF27 likes16,462 views
The document discusses using Node.js to build scalable server-side code with JavaScript in a way that works for all users regardless of device or browser capabilities. It covers topics like balancing goals of speed, maintainability and cost when building applications that need to work across computers, mobile phones and other devices with varying processing power and bandwidth. It provides examples of using JSON instead of HTML for lightweight data transfer and techniques like client-side MVC patterns and templates. It also emphasizes the importance of server-side fallbacks for HTML5 features not supported on all browsers to ensure a good experience for all users.
![{"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},](https://image.slidesharecdn.com/html5devconf-120521193427-phpapp02/85/Using-Node-js-to-make-HTML5-work-for-everyone-37-320.jpg)
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
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n