Your SlideShare is downloading. ×
Clean separation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Clean separation

1,092
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, …

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,092
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Webdev Best Practices Al Torreno
    • 2. Who is this for?
    • 3. • Application developers
    • 4. • Application developers• Anyone writing front end code on a regular basis
    • 5. • Application developers• Anyone writing front end code on a regular basis• Product Managers
    • 6. Not you? Dont worry
    • 7. Als FundamentalPrinciple of Webdev
    • 8. Als FundamentalPrinciple of Webdev All other best practices stem from here
    • 9. Separation of concerns (its not just for application development)
    • 10. Back End Example
    • 11. modelBack End Example
    • 12. controller modelBack End Example
    • 13. view controller modelBack End Example
    • 14. Front End
    • 15. contentFront End
    • 16. presentation contentFront End
    • 17. behaviour presentation contentFront End
    • 18. JS CSS HTMLFront End
    • 19. Why
    • 20. Why• Reusability
    • 21. Why• Reusability• Performance
    • 22. Why• Reusability• Performance• SEO
    • 23. Why• Reusability• Performance• SEO• Cross-browser compatibility
    • 24. Why• Reusability• Performance• SEO• Cross-browser compatibility• Maintainability
    • 25. Why• Reusability• Performance• SEO• Cross-browser compatibility• Maintainability• "Responsive design"
    • 26. Website Design
    • 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. 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. After - CSSbody{font:12px arial;}.main{background:#f00;}.content{float:left; width:75%}.callout{float:left; width:25%;}
    • 30. After - JS//using jquery$( $("a").mouseover(foo).mouseout(bar))
    • 31. Maintainability<div style="position:absolute; top:0; left:256px"><span style="font-size:12px">Hello</span> <spanstyle="color:red">World</span></div>
    • 32. Maintainabilityfunction show(num){  if(num==1)document.getElementById("content").innerHTML="Hello World"}
    • 33. Missing the point<div class"redbox200">.redbox200{background:red; width:200px}
    • 34. Performance
    • 35. PerformanceFrom Steve Souders:
    • 36. PerformanceFrom Steve Souders:optimize front-end performance first, thatswhere 80% or more of the end-user responsetime is spent.
    • 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. 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. 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. Print stylesheets
    • 41. Responsive design@media screen and (max-device-width: 480px) { .column {float: none;}}
    • 42. Tempting<divstyle="background:blue">points.comheader</div>
    • 43. Instead<div class="header">points.comheader</div>.header{background:blue}
    • 44. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden
    • 45. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden
    • 46. Examples in the wild• jQuery + jQuery UI• Sencha Ext-js/GXT• CSS Zen Garden