Clean separation

1,247 views
1,170 views

Published on

Points.com webdev lunch and learn #1: Clean separation. Separation of concerns isn't just for application development. It can also be applied to front end development to improve dev efficiency, maintainability, reusability, performance, SEO and cross browser compatibility.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,247
On SlideShare
0
From Embeds
0
Number of Embeds
557
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Audience - knows HTML, but not really\n\n\n
  • \n\n
  • \n\n
  • separate lunch and learn beginner series\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Add example of bad code\n
  • Probably need 3 slides, show each layer\n
  • \n\n
  • \n\n
  • Presentation in the content layer\nWhat if presentation needs to change?\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Fast dev, not maintainable\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Clean separation

    1. 1. Webdev Best Practices Al Torreno
    2. 2. Who is this for?
    3. 3. • Application developers
    4. 4. • Application developers• Anyone writing front end code on a regular basis
    5. 5. • Application developers• Anyone writing front end code on a regular basis• Product Managers
    6. 6. Not you? Dont worry
    7. 7. Als FundamentalPrinciple of Webdev
    8. 8. Als FundamentalPrinciple of Webdev All other best practices stem from here
    9. 9. Separation of concerns (its not just for application development)
    10. 10. Back End Example
    11. 11. modelBack End Example
    12. 12. controller modelBack End Example
    13. 13. view controller modelBack End Example
    14. 14. Front End
    15. 15. contentFront End
    16. 16. presentation contentFront End
    17. 17. behaviour presentation contentFront End
    18. 18. JS CSS HTMLFront End
    19. 19. Why
    20. 20. Why• Reusability
    21. 21. Why• Reusability• Performance
    22. 22. Why• Reusability• Performance• SEO
    23. 23. Why• Reusability• Performance• SEO• Cross-browser compatibility
    24. 24. Why• Reusability• Performance• SEO• Cross-browser compatibility• Maintainability
    25. 25. Why• Reusability• Performance• SEO• Cross-browser compatibility• Maintainability• "Responsive design"
    26. 26. Website Design
    27. 27. Before<table border="0" cellspacing="0" cellpadding="0" width="100%"height="100%">  <tr>    <td valign="top" width="75%" bgcolor="red"><font color="#ffffff"size="2">Hello world</font></td>        <td valign="top" width="25%" bgcolor="blue"><aonmouseover="foo()"onmouseout="bar()"        href="http://www.google.com" style="color:#fff">Cool</a></td>  </tr></table>
    28. 28. After - HTML<div class="main"> <div class="content">Hello world</ div> <div class="callout"><a href="http:// www.google.com">Cool</a></div></div>
    29. 29. After - CSSbody{font:12px arial;}.main{background:#f00;}.content{float:left; width:75%}.callout{float:left; width:25%;}
    30. 30. After - JS//using jquery$( $("a").mouseover(foo).mouseout(bar))
    31. 31. Maintainability<div style="position:absolute; top:0; left:256px"><span style="font-size:12px">Hello</span> <spanstyle="color:red">World</span></div>
    32. 32. Maintainabilityfunction show(num){  if(num==1)document.getElementById("content").innerHTML="Hello World"}
    33. 33. Missing the point<div class"redbox200">.redbox200{background:red; width:200px}
    34. 34. Performance
    35. 35. PerformanceFrom Steve Souders:
    36. 36. PerformanceFrom Steve Souders:optimize front-end performance first, thatswhere 80% or more of the end-user responsetime is spent.
    37. 37. Print stylesheets<div class="navigation"> <a href="#">Home</a> | <a href="#">ContactUs</a></div><div class="content"> <h1>Hello world</h1> <p>Lorem ipsum</p></div>
    38. 38. Print stylesheetsbody{font:12px arial;}h1{color:#f00; font-size:25px;}.navigation{background:red; color:#fff;font-size:12px; padding:10px 5px; width:500px;}.content{border:1px solid blue; padding:0 3px; width:500px;}
    39. 39. Print stylesheetsbody{font:10pt times new roman;}h1{border-bottom:1pt solid black;color:#000; font-size:12pt; text-transform: uppercase; padding:0 0 3pt0;}.navigation{display:none}.content{width:7.5in}
    40. 40. Print stylesheets
    41. 41. Responsive design@media screen and (max-device-width: 480px) { .column {float: none;}}
    42. 42. Tempting<divstyle="background:blue">points.comheader</div>
    43. 43. Instead<div class="header">points.comheader</div>.header{background:blue}
    44. 44. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden
    45. 45. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden
    46. 46. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden

    ×