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.

1. Webdev Best Practices
Al Torreno

2. Who is this for?

4. • Application developers

5. • Application developers
• Anyone writing front end code on a regular
basis

6. • Application developers
• Anyone writing front end code on a regular
basis
• Product Managers

7. Not you?
Don't worry

8. Al's Fundamental
Principle of Webdev

9. Al's Fundamental
Principle of Webdev
All other best practices stem from here

10. Separation of concerns
(it's not just for application development)

11. Back End Example

12. model
Back End Example

13. controller
model
Back End Example

14. view
controller
model
Back End Example

15. Front End

16. content
Front End

17. presentation
content
Front End

18. behaviour
presentation
content
Front End

19. JS
CSS
HTML
Front End

20. Why

21. Why
• Reusability

22. Why
• Reusability
• Performance

23. Why
• Reusability
• Performance
• SEO

24. Why
• Reusability
• Performance
• SEO
• Cross-browser compatibility

25. Why
• Reusability
• Performance
• SEO
• Cross-browser compatibility
• Maintainability

26. Why
• Reusability
• Performance
• SEO
• Cross-browser compatibility
• Maintainability
• "Responsive design"

27. Website Design

28. 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"><a
onmouseover="foo()"
onmouseout="bar()"
href="http://www.google.com" style="color:#fff">Cool</a></td>
</tr>
</table>

29. After - HTML
<div class="main">
<div class="content">Hello world</
div>
<div class="callout"><a
href="http://
www.google.com">Cool</a></div>
</div>

30. After - CSS
body{font:12px arial;}
.main{background:#f00;}
.content{float:left; width:75%}
.callout{float:left; width:25%;}

31. After - JS
//using jquery
$(
$("a").mouseover(foo).mouseout(bar)
)

32. Maintainability
<div style="position:absolute; top:
0; left:256px">
<span style="font-size:
12px">Hello</span> <span
style="color:red">World</span>
</div>

33. Maintainability
function show(num){
if(num==1)
document.getElementById("content").
innerHTML="Hello World"
}

34. Missing the point
<div class"redbox200">
.redbox200{background:red; width:
200px}

35. Performance

36. Performance
From Steve Souders:

37. Performance
From Steve Souders:
optimize front-end performance first, that's
where 80% or more of the end-user response
time is spent.

38. Print stylesheets
<div class="navigation">
<a href="#">Home</a> | <a href="#">Contact
Us</a>
</div>
<div class="content">
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</div>

39. Print stylesheets
body{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;}

41. Print stylesheets
body{font:10pt times new roman;}
h1{border-bottom:1pt solid black;
color:#000; font-size:12pt; text-
transform: uppercase; padding:0 0 3pt
0;}
.navigation{display:none}
.content{width:7.5in}

42. Print stylesheets

43. Responsive design
@media screen and (max-device-
width: 480px) {
.column {float: none;}
}

44. Tempting
<div
style="background:blue">points.com
header</div>

45. Instead
<div class="header">points.com
header</div>
.header{background:blue}

46. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden

47. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden

48. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden