This document discusses why front end developers are needed. It begins by defining what a front end developer is and outlines some of their typical duties, which include working on the user interface, accessibility, testing, multimedia, design, and optimization of the front end. It notes that while back end developers focus more on the server side, front end developers ensure the client-side code and experience are effective. The document also discusses some of the challenges of front end development like different browsers, mobile environments, and JavaScript frameworks. It emphasizes that user interface and design are important aspects that should not be an afterthought.

1. WHY YOU NEED A
FRONT END
Mike Wilcox - May 2011
Tweets: @clubajax
Blogs: clubajax.org

2. Mike W ilcox

3. Mike W ilcox

4. Mike W ilcox
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video

5. Mike W ilcox Co m mitter!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video

6. Mike W ilcox Co m mitter!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video
Works there as
Director of
Technology.

7. Mike W ilcox Co m mitter!
Natch!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video
Works there as
Director of
Technology.

8. What is a Front End Developer?

9. What is a Front End Developer?
FED

10. What is a Front End Developer?
Markup Developer
Client-Side Developer
FED
Frontender Web Designer
Coder
Htmler

11. What is a Front End Developer?
Markup Developer
Client-Side Developer
FED
Frontender Web Designer
Coder Htmler
A Relatively new term:

12. Front End Duties

13. Front End Duties
Browser Compatibility
Heuristics Programming DesignData Hierarchy
Emerging TechnologiesMashups
Accessibility
APIs VSEO
Proof Reader UI Design Copy Writer
Graphical Design MultimediaSOA
SEO
Usability Performance
Mobile Compatibility
Web Standards Web 2.0 UX
ProgrammingOptimization

14. Back End Duties

15. Back End Duties
Optimizatio
Backups Web Services n
Replication DNS Load Balancing
DB Design
Business
IndexinUnit
g
Testing
Security Logic
Version Control
Data Transfers Automate Tasks
QA Process Files Server Admin

16. End to End Developer Duties

17. End to End Developer Duties
Optimizatio
Backups Web Services n
Replication DNS Load Balancing
DB Design
Business
IndexinUnit
g
Testing
Security Logic
Version Control
Data Transfers Automate Tasks
QA Process Files Server Admin

18. End to End Developer Duties
Optimizatio
Backups
Browser Compatibility
WebData Hierarchy
Services
n
Replication
Heuristics Programming Design
DNS Load Balancing
Emerging TechnologiesMashups
DB Design
Accessibility
IndexinUnit Testing
UIBusiness
Proof Reader Design
APIs VSEO
g
Copy Writer
Graphical Design Multimedia
Security Logic Version Control
Usability Performance
SEO
SOA
Automate Tasks
UX
Data Transfers
Mobile Compatibility
QA
Process Files
Web Standards Web 2.0 Server Admin
Programming Optimization

19. Discrete Developer Tasks

20. Discrete Developer Tasks
UI Design Front End
Information Developer
architecture Implementation of
Mock-ups/Wireframes wireframes
Creative style guides Technical style guide (ex:
User sign-off CSS)
Logos/Icons Communication to middle
Image licensing tier
Middle Tier Back End Developer
Developer Translation of middle tier
objects to DB objects (think
Translation of front end
View like business objects vs
to DB structures
raw tables)
Workflow
CRUD operations against the
User level object security DB
Business logic validation Implementation of data
Passing data to the back integrity business rules
end tier DB minded security (SQL
“Front end” automation
tasks

21. The Problem

22. The Problem
It’s human nature to get something “good enough
to work”

23. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.

24. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.

25. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.
Navy Seals / Cavalry

26. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.
Navy Seals / Cavalry
JavaScript is not easy

27. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.
Navy Seals / Cavalry
JavaScript is not easy
CSS is not easy

28. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.
Navy Seals / Cavalry
JavaScript is not easy
CSS is not easy
HTML is not easy

29. The Problem
It’s human nature to get something “good enough
to work”
Server guy should be hired first after the founders.
Then get a FED - not a second server guy.
Navy Seals / Cavalry
JavaScript is not easy
CSS is not easy
HTML is not easy
Okay, HTML is pretty easy, but there are some
tricky things to know.

30. Success Story

32. THE ENVIRONMENT

33. Browsers

34. Browsers
The world’s most hostile development environment

35. Browsers
The world’s most hostile development environment
http://gs.statcounter.com/#browser_version-US-monthly-201005-201105

36. Browsers
The world’s most hostile development environment
http://gs.statcounter.com/#browser_version-US-monthly-201005-201105
R.I.P IE6.0!!

37. Mobile

38. Mobile

39. Mobile
The Easy Part:

40. Mobile
The Easy Part:
It's all about WebKit!

41. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE

42. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-

43. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:

44. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input

45. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:

46. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:
Layout

47. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:
Layout
Caching

48. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:
Layout
Caching
Bandwidth

49. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:
Layout
Caching
Bandwidth
CPU

50. Mobile
The Easy Part:
It's all about WebKit!
And Windows CE ha ha! Just kidding!
-
The Hard Part:
Multi Touch Input
Changes the rules for:
Layout
Caching
Bandwidth
CPU
Memory

51. Flash

52. Flash

53. Flash or Flex?

54. Flash or Flex? HTML5?

55. Flash or Flex? HTML5? JavaFX?

56. Flash or Flex? HTML5? JavaFX?
Silverlight?

57. Flash or Flex? HTML5? JavaFX?
Silverlight? HA HA
!

58. Flash or Flex? HTML5? JavaFX?
Silverlight? HA HA !
Obviously JavaFX and Silverlight dictate their own
uses.

59. Flash or Flex? HTML5? JavaFX?
Silverlight? HA HA !
Obviously JavaFX and Silverlight dictate their own
uses.
Is Flash one size fits all? Is HTML5?

60. Flash or Flex? HTML5? JavaFX?
Silverlight? HA HA !
Obviously JavaFX and Silverlight dictate their own
uses.
Is Flash one size fits all? Is HTML5?
Flash != Flex and does not assume AS3 prowess

61. Flash or Flex? HTML5? JavaFX?
Silverlight? HA HA !
Obviously JavaFX and Silverlight dictate their own
uses.
Is Flash one size fits all? Is HTML5?
Flash != Flex and does not assume AS3 prowess
HTML5 still lacks drawing tools for Canvas

63. DISCIPLINES

64. User Interface

65. User Interface

66. User Interface
Usability

67. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.

68. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.
UX (*not* usability)

69. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.
UX (*not* usability)
Heuristics

70. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.
UX (*not* usability)
Heuristics
The user should determine the
UI, not the data.

71. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.
UX (*not* usability)
Heuristics
The user should determine the
UI, not the data.
The interface may be difficult
to use

72. User Interface
Usability
Usability Tests have been
replaced by repeatable
patterns and best practices.
UX (*not* usability)
Heuristics
The user should determine the
UI, not the data.
The interface may be difficult
to use
The UI may be impossible to

73. Accessibility

74. Accessibility

75. Accessibility
HTML takes care of 80% of this automatically

76. Accessibility
HTML takes care of 80% of this automatically
WAI-ARIA for Ajax

77. Accessibility
HTML takes care of 80% of this automatically
WAI-ARIA for Ajax
Web Accessibility Initiative for Accessible Rich Internet
Applications http://en.wikipedia.org/wiki/WAI-ARIA

78. Accessibility
HTML takes care of 80% of this automatically
WAI-ARIA for Ajax
Web Accessibility Initiative for Accessible Rich Internet
Applications http://en.wikipedia.org/wiki/WAI-ARIA
Flash a11y takes extra effort

79. Accessibility
HTML takes care of 80% of this automatically
WAI-ARIA for Ajax
Web Accessibility Initiative for Accessible Rich Internet
Applications http://en.wikipedia.org/wiki/WAI-ARIA
Flash a11y takes extra effort
Simple tests: Text Zoom & Contrast

80. Accessibility
HTML takes care of 80% of this automatically
WAI-ARIA for Ajax
Web Accessibility Initiative for Accessible Rich Internet
Applications http://en.wikipedia.org/wiki/WAI-ARIA
Flash a11y takes extra effort
Simple tests: Text Zoom & Contrast
Better test: an actual screen reader

81. Front End QA

82. Front End QA

83. Front End QA
Testing Ajax-heavy front ends is a relatively new
task

84. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best

85. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best
Tests need to happen in all browsers, and all
supported versions

86. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best
Tests need to happen in all browsers, and all
supported versions
Some software solutions include:

87. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best
Tests need to happen in all browsers, and all
supported versions
Some software solutions include:
Selenium

88. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best
Tests need to happen in all browsers, and all
supported versions
Some software solutions include:
Selenium
Dojo D.O.H.

89. Front End QA
Testing Ajax-heavy front ends is a relatively new
task
Automation is difficult at best
Tests need to happen in all browsers, and all
supported versions
Some software solutions include:
Selenium
Dojo D.O.H.
Dojo Robot

90. Multimedia

91. Multimedia

92. Multimedia
Video (sometimes just
audio)

93. Multimedia
Video (sometimes just
audio)
Encoding

94. Multimedia
Video (sometimes just
audio)
Encoding
Flash and HTML5 Players

95. Multimedia
Video (sometimes just
audio)
Encoding
Flash and HTML5 Players
VSEO

96. Multimedia
Video (sometimes just
audio)
Encoding
Flash and HTML5 Players
VSEO
Push SEO

97. Design

98. Design
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

99. Design
A poorly designed site may literally repel
viewers
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

100. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

101. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

102. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
Mock-ups / Wireframes
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

103. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
Mock-ups / Wireframes
Style guides / Pantone colors
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

104. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
Mock-ups / Wireframes
Style guides / Pantone colors
Image licensing
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

105. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
Mock-ups / Wireframes
Style guides / Pantone colors
Image licensing
UI Design should not be an
after-thought
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

106. Design
A poorly designed site may literally repel
viewers
A polished website exudes professionalism
Professionalism == $$$
Mock-ups / Wireframes
Style guides / Pantone colors
Image licensing
UI Design should not be an
after-thought
Users decide UI, not the data!
http://blog.mycolorscreen.com/post/4576460465/why-gorgeous-
user-interface-design-is-important

107. Optimization and Performance

108. Optimization and Performance
Small code is good code.

109. Optimization and Performance
Small code is good code.
The fewer lines in your source, the fewer bugs you’ll have,
plus it will download and execute faster.

110. Optimization and Performance
Small code is good code.
The fewer lines in your source, the fewer bugs you’ll have,
plus it will download and execute faster.
Likewise, fewer files is good.

111. Optimization and Performance
Small code is good code.
The fewer lines in your source, the fewer bugs you’ll have,
plus it will download and execute faster.
Likewise, fewer files is good.

113. FRONT END DEVELOPMENT
+
BACK END DEVELOPMENT

114. Single-page Web Apps

115. Single-page Web Apps
?? ?? ? ?

116. Single-page Web Apps
Questions Server Devs often ask
?? ?? ? ?

117. Single-page Web Apps
Questions Server Devs often ask
What about my sessions?
?? ?? ? ?

118. Single-page Web Apps
Questions Server Devs often ask
What about my sessions?
What about my MVC?
?? ?? ? ?

119. Single-page Web Apps
Questions Server Devs often ask
What about my sessions?
What about my MVC?
But the business logic needs to be on the back end!
?? ?? ? ?

120. Single-page Web Apps
Questions Server Devs often ask
What about my sessions?
What about my MVC?
But the business logic needs to be on the back end!
Can I return a 500 for all server errors?
?? ?? ? ?

121. Web App Web Services

122. Web App Web Services
Use REST or RPC (no XML!)

123. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start

124. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns

125. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns
Ideally, this API can then be made public with
minimal fuss

126. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns
Ideally, this API can then be made public with
minimal fuss
Isn’t this the goal? Usually?

127. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns
Ideally, this API can then be made public with
minimal fuss
Isn’t this the goal? Usually?
Hot swappable front ends!

128. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns
Ideally, this API can then be made public with
minimal fuss
Isn’t this the goal? Usually?
Hot swappable front ends!
HTML, Flash, AIR, Applet, phone/tablet app, API

129. Web App Web Services
Use REST or RPC (no XML!)
Design the app to use an API from the start
This allows complete separation of concerns
Ideally, this API can then be made public with
minimal fuss
Isn’t this the goal? Usually?
Hot swappable front ends!
HTML, Flash, AIR, Applet, ..."ish"
phone/tablet app, API

130. Webpages

131. Webpages
You can use that templating language now

132. Webpages
You can use that templating language now
FED is more important than ever:

133. Webpages
You can use that templating language now
FED is more important than ever:
SEO

134. Webpages
You can use that templating language now
FED is more important than ever:
SEO
Ads

135. Webpages
You can use that templating language now
FED is more important than ever:
SEO
Ads
Load optimization

136. Webpages
You can use that templating language now
FED is more important than ever:
SEO
Ads
Load optimization
Performance (load and execution)

137. Webpages
You can use that templating language now
FED is more important than ever:
SEO
Ads
Load optimization
Performance (load and execution)
Resources, Resources, Resources

139. CODE

140. CSS

141. CSS
Image-less design is the goal

142. CSS
Image-less design is the goal
No GIFs, JPGs

143. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes

144. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming

145. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming
ClubAJAX.org

146. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming
ClubAJAX.org
Feature Detection

147. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming
ClubAJAX.org
Feature Detection
Modernizr

148. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming
ClubAJAX.org
Feature Detection
Modernizr
CSS is notorious for being a horrible
mess

149. CSS
Image-less design is the goal
No GIFs, JPGs
Easy maintenance / changes
Easier theming
ClubAJAX.org
Feature Detection
Modernizr
CSS is notorious for being a horrible
mess
OO-CSS

150. CSS3

151. CSS3
A “simple” example of a cross-browser gradient.

152. CSS3
A “simple” example of a cross-browser gradient.
.is_firefox .grad{
background: -moz-linear-gradient(left, #FF0000 0%, #0000FF 100%);
}
.is_webkit .grad{
background-image: -webkit-gradient(linear, left #FF0000, #0000FF);
}
.is_ielt9 .grad{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
startColorstr=#FF0000, endColorstr=#0000FF, GradientType=1);
}
.is_iegt9 .grad{
background-image: -ms-radial-gradient(top center, #FF0000, #0000FF);
}
.is_ie9 .grad, .is_fflt36{
background-color:#FF0000;
box-shadow: inset -10px 0px 10px #0000FF;
}

153. JavaScript

154. JavaScript
The follow “works good enough” code has at least
7 bad practices. Can you spot them?

155. JavaScript
The follow “works good enough” code has at least
7 bad practices. Can you spot them?
if(document.getElementById("bannerSearchInput").value.length <= 0)
{
document.getElementById("bannerSearchInput").value = defaulttext;
document.getElementById("bannerSearchInput").style.color = "#666666";
// Default text is gray
}

157. GOOD EXAMPLES OF
BAD WEBSITES

158. Solutions

159. Solutions
Development Time

160. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS

161. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point

162. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point
In MVC, the “View” could mean:

163. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point
In MVC, the “View” could mean:
HTML, XML, JSON

164. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point
In MVC, the “View” could mean:
HTML, XML, JSON
We need to encourage the growth of FEDs

165. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point
In MVC, the “View” could mean:
HTML, XML, JSON
We need to encourage the growth of FEDs
There are very few FEDs in DFW

166. Solutions
Development Time
FED that knows some JSP will be much faster than a Java dev
who knows some JavaScript and CSS
Design the code so that an FED can step in at some
point
In MVC, the “View” could mean:
HTML, XML, JSON
We need to encourage the growth of FEDs
There are very few FEDs in DFW
There are few (if any) colleges teaching front end dev