Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Best Practices Every HTML5 Developer Should Know

12,057 views

Published on

Design patterns and best practices for HTML5 developers. Getting up and running, moving fast, and building to scale.

Published in: Technology, Design

Best Practices Every HTML5 Developer Should Know

  1. 1. Best Practices every HTML5 developer should know Michael Mahemoff, Nuvomondo Ltd At Intel AppLab, Mobile World Congress t: @mahemoff g: +mahemoff
  2. 2. Will be online at Intel AppUp blog http://intel.ly/appupblogPlease use #html5best hashtag #html5best - @mahemoff - Intel AppUp - MWC
  3. 3. ABOUT YOUR SPEAKER UX http://www.flickr.com/photos/ideapaint/4821634406/sizes/l/in/photostream/ #html5best - @mahemoff - Intel AppUp - MWC
  4. 4. ABOUT YOUR SPEAKER UX 2005 http://www.flickr.com/photos/ideapaint/4821634406/sizes/l/in/photostream/ #html5best - @mahemoff - Intel AppUp - MWC
  5. 5. ABOUT YOUR SPEAKER UX 2005 http://www.flickr.com/photos/ideapaint/4821634406/sizes/l/in/photostream/ #html5best - @mahemoff - Intel AppUp - MWC
  6. 6. 1. Up and Running 2. Move Fast 3. Grow #html5best - @mahemoff - Intel AppUp - MWC
  7. 7. Up andRunningfirst steps to glory
  8. 8. EARLY FEEDBACK:FAIL EARLY, FAIL FAST #html5best - @mahemoff - Intel AppUp - MWC
  9. 9. @mahemoff - Intel AppUp - MWC
  10. 10. REUSE #html5best - @mahemoff - Intel AppUp - MWC
  11. 11. Libraries: Syntactic SugarGeneric Libraries DOM Manipulation $(‘.food’).delete(); Networking $.put(‘/orders’, { foods: [‘sushi’, ‘yakitori’] }); Data Wrangling _(foods).select(function(food) { return food.isCold(); }); #html5best - @mahemoff - Intel AppUp - MWC
  12. 12. ReuseSpecialised libraries and frameworks Graphics Parsing Verticals (e.g. gaming) etc etc #html5best - @mahemoff - Intel AppUp - MWC
  13. 13. A Layout Example: Pinterest in 4 Lines ;)$(‘.container’).masonry({ itemSelector: ‘.item’, columnWidth: 240}); #html5best - @mahemoff - Intel AppUp - MWC
  14. 14. Web Components: Roll-Your-Own?<element extends="button" name="x-spreadsheet"> … Very</element> Expe!<x-spreadsheet> mental 10,5,1,8, ...</x-spreadsheet> http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html #html5best - @mahemoff - Intel AppUp - MWC
  15. 15. FRAMEWORKS #html5best - @mahemoff - Intel AppUp - MWC
  16. 16. #html5best - @mahemoff - Intel AppUp - MWC
  17. 17. Twitter Bootstrap #html5best - @mahemoff - Intel AppUp - MWC
  18. 18. Responsive Web Design #html5best - @mahemoff - Intel AppUp - MWC
  19. 19. Responsive Web Design #html5best - @mahemoff - Intel AppUp - MWC
  20. 20. Responsive Web Design.column { width: 240px; } #html5best - @mahemoff - Intel AppUp - MWC
  21. 21. Responsive Web Design.column { width: 240px; }@media (max-width: 480px) { .column { width: 100%; }} #html5best - @mahemoff - Intel AppUp - MWC
  22. 22. #html5best - @mahemoff - Intel AppUp - MWC
  23. 23. http://musicmak.es #html5best - @mahemoff - Intel AppUp - MWC
  24. 24. Move Fastoptimising for productivity
  25. 25. Single Page App is Here #html5best - @mahemoff - Intel AppUp - MWC
  26. 26. RESTful ServicesSingle Page App @mahemoff - Intel AppUp - MWC
  27. 27. RESTful ServicesSingle Page App @mahemoff - Intel AppUp - MWC
  28. 28. RESTful ServicesSingle Page App @mahemoff - Intel AppUp - MWC
  29. 29. RESTful ServicesSingle Page App @mahemoff - Intel AppUp - MWC
  30. 30. MODERN SPA:BETTER SYNTAX CSS++ JS++ HTML++ #html5best - @mahemoff - Intel AppUp - MWC
  31. 31. CSS: Don’t Repeat Yourselfdiv { background: rgb(136, 33, 149); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#882195,endColorstr=#A43CB3,GradientType=0); background-image: linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149) 73%,rgb(164,60,179) 87%); background-image: -o-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -moz-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -webkit-linear-gradient(bottom, rgb(104,7,114) 46%,rgb(136,33,149) 73%, rgb(164,60,179) 87%); background-image: -ms-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -webkit-gradient(! linear, left bottom, left top, color-stop(0.46, rgb(104,7,114)), color-stop(0.73,rgb(136,33,149)), color-stop(0.87, rgb(164,60,179)) ); } #html5best - @mahemoff - Intel AppUp - MWC
  32. 32. CSS: Don’t Repeat Yourselfdiv { background: rgb(136, 33, 149); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#882195,endColorstr=#A43CB3,GradientType=0); background-image: linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149) 73%,rgb(164,60,179) 87%); background-image: -o-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -moz-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -webkit-linear-gradient(bottom, rgb(104,7,114) 46%,rgb(136,33,149) 73%, rgb(164,60,179) 87%); background-image: -ms-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)73%, rgb(164,60,179) 87%); background-image: -webkit-gradient(! linear, left bottom, left top, color-stop(0.46, rgb(104,7,114)), color-stop(0.73,rgb(136,33,149)), color-stop(0.87, rgb(164,60,179)) ); } #html5best - @mahemoff - Intel AppUp - MWC
  33. 33. STYLUS: A “CSS++” COMPILER Stylusdiv { background-image: linear-gradient (bottom, rgb(104,7,114) 46%, rgb(136,33,149) 73%, rgb(164,60,179) 87%);} #html5best - @mahemoff - Intel AppUp - MWC
  34. 34. STYLUS Stylusdiv background-image linear-gradient (bottom, rgb(104,7,114) 46%, rgb(136,33,149) 73%, rgb(164,60,179) 87%) #html5best - @mahemoff - Intel AppUp - MWC
  35. 35. STYLUS Stylusdiv background triple-gradient (rgb(104,7,114), rgb(136,33,149), rgb(164,60,179)) #html5best - @mahemoff - Intel AppUp - MWC
  36. 36. STYLUS StylusthemeBG = rgb(78,155,100)div background triple-gradient (themeBG, themeBG*1.2, themeBG*1.2 + #003) #html5best - @mahemoff - Intel AppUp - MWC
  37. 37. COFFEESCRIPTeat = -> f.delete()function eat() { f.delete();}eat sushieat(sushi);$(‘.meal’).whenServed -> eat food$(‘.meal’).whenServed(function() { eat(food);}); #html5best - @mahemoff - Intel AppUp - MWC
  38. 38. COFFEESCRIPTfoods = miso: 4 teriyaki: 6 sushi: 12condiments = (food.sauce for food of foods)price = (if sushi then 12 else 4)fetch chopsticks if food isnt misofetch chopsticks unless food is miso #html5best - @mahemoff - Intel AppUp - MWC
  39. 39. JADE!!! 5html(lang="en") head title= pageTitle script(type=text/javascript) if (foo) { bar() } body h1 Jade - node template engine #container - if (youAreUsingJade) p You are amazing - else p Get on it! #html5best - @mahemoff - Intel AppUp - MWC
  40. 40. Growmore features, less headaches
  41. 41. Modules @mahemoff - Intel AppUp - MWC
  42. 42. Tight Coupling is Your Enemy
  43. 43. Tight Coupling is Your Enemy
  44. 44. @mahemoff - Intel AppUp - MWC
  45. 45. #HighCohesion #LowCoupling #Modularity #Isolation #SeparationOfConcerns @mahemoff - Intel AppUp - MWC
  46. 46. #Widget #WebComponent #DomainObject #Module @mahemoff - Intel AppUp - MWC
  47. 47. A runtime configuration @mahemoff - Intel AppUp - MWC
  48. 48. Mediator @mahemoff - Intel AppUp - MWC
  49. 49. Good: No more coupling @mahemoff - Intel AppUp - MWC
  50. 50. Good: No more coupling @mahemoff - Intel AppUp - MWC
  51. 51. Good: Reuse elsewhere @mahemoff - Intel AppUp - MWC
  52. 52. Test DriverGood: We can test! @mahemoff - Intel AppUp - MWC
  53. 53. Model-ViewSeparation @mahemoff - Intel AppUp - MWC
  54. 54. Manage Your Architecture #html5best - @mahemoff - Intel AppUp - MWC
  55. 55. Manage Your Architecture #html5best - @mahemoff - Intel AppUp - MWC
  56. 56. var Book = <article class=”bookThumbnail”>Backbone.Model.extend({ ... function countWords() {...} </article>});var BookThumbnail =Backbone.View.extend({...} @mahemoff - Intel AppUp - MWC
  57. 57. Templating<article class=‘bookThumbnail’> <header> <h1 class=’title’>{{title}}</h1> <img class=’hero’>{{hero}}</img> </header> <div class=‘author’>{{author}}</div></article> @mahemoff - Intel AppUp - MWC
  58. 58. Templating<article class=‘bookThumbnail’> <header> <article class=‘bookThumbnail’> <h1 class=’title’>{{title}}</h1> Model C <header> <h1 class=’title’>Barcelona at Noon</h1> <img class=’hero’>{{hero}}</img> <img class=’hero’>bnoon.png</img> </header> </header> <div class=‘author’>A. Medio</div> <div class=‘author’>{{author}}</div> </article></article> Model B Model A <article class=‘bookThumbnail’><article class=‘bookThumbnail’> <header> <header> <h1 class=’title’>Barcelona Nights</h1> <h1 class=’title’>Barcelona Days</h1> <img class=’hero’>bnights.png</img> <img class=’hero’>bdays.png</img> </header> </header> <div class=‘author’>A. Nochez</div> <div class=‘author’>A. Diaz</div> </article></article> @mahemoff - Intel AppUp - MWC
  59. 59. OOCSSCredit: Nicole Sullivan @mahemoff - Intel AppUp - MWC
  60. 60. h1 #account{ background: blue; font-family: arial;}#app h1 #account { background: red;}#footer #account { border-color: black;} The Problem: CSS Jungle #html5best - @mahemoff - Intel AppUp - MWC
  61. 61. .account { background: #f9a;}.heading { color: #882;} Solution: Use classes, not IDs or Tags #html5best - @mahemoff - Intel AppUp - MWC
  62. 62. .account { background: #f9a;}.heading { color: #882;} Solution: Avoid hierarchies #html5best - @mahemoff - Intel AppUp - MWC
  63. 63. ClassyHTML @mahemoff - Intel AppUp - MWC
  64. 64. Logged in? Show name Allowed to Managing your rate? page?Show thumbs Show edit controls Leaving a comment? Show textarea The Problem: Display Logic #html5best - @mahemoff - Intel AppUp - MWC
  65. 65. function startEditing() { $(‘.titleInput’).show(); $(‘.mixPanel’).slideDown(); $(‘.comments’).fadeOut();}function stopEditing() { $(‘.titleInput’).hide(); $(‘.mixPanel’).slideUp(); $(‘.comments’).fadeIn();}The Problem: Display Logic #html5best - @mahemoff - Intel AppUp - MWC
  66. 66. $(html’).addClass(‘editing’);$(html’).removeClass(‘editing’);.mixPanel { display: none;}.editing .mixPanel { display: block;} Solution: Root-level class #html5best - @mahemoff - Intel AppUp - MWC
  67. 67. <div class=‘mixPanel forEditing’> ...</div>.forEditing { display: none;}.editing .forEditing { display: block;} Generalising It #html5best - @mahemoff - Intel AppUp - MWC
  68. 68. Want toLearnMore?
  69. 69. ONLINE RESOURCEShttp://diveintohtml5.info http://developer.mozilla.org http://html5rocks.com http://is.gd/frontendfeeds #html5best - @mahemoff - Intel AppUp - MWC
  70. 70. #html5best - @mahemoff - Intel AppUp - MWC
  71. 71. Resourceshttp://addyosmani.com/blog/patterns-for-large-scale-javascript-application-architecture/ #html5best - @mahemoff - Intel AppUp - MWC
  72. 72. Resourceshttp://www.slideshare.net/nzakas/scalable-javascript-application-architecture #html5best - @mahemoff - Intel AppUp - MWC
  73. 73. ThankyouOnline at http://intel.ly/appupblog soon ... Michael Mahemoff @mahemoff +mahemoff

×