Best Practices Every HTML5 Developer Should Know

11,910 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
4 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total views
11,910
On SlideShare
0
From Embeds
0
Number of Embeds
2,820
Actions
Shares
0
Downloads
208
Comments
4
Likes
13
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×