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.
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
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
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
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.
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
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
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
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
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
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
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.
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?
?? ?? ? ?
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
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
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
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
}
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