SlideShare a Scribd company logo

Why You Need a Front End Developer

Mike Wilcox
Mike Wilcox

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.

TechnologyBusiness
1 of 167
Downloaded 80 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
WHY YOU NEED A FRONT END Mike Wilcox - May 2011 Tweets: @clubajax Blogs: clubajax.org
Mike W ilcox
Mike W ilcox
Mike W ilcox AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video
Mike W ilcox Co m mitter! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video
Mike W ilcox Co m mitter! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video Works there as Director of Technology.
Mike W ilcox Co m mitter! Natch! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video Works there as Director of Technology.
What is a Front End Developer?
What is a Front End Developer? FED
What is a Front End Developer? Markup Developer Client-Side Developer FED Frontender Web Designer Coder Htmler
What is a Front End Developer? Markup Developer Client-Side Developer FED Frontender Web Designer Coder Htmler A Relatively new term:
Front End Duties
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
Back End Duties
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
End to End Developer Duties
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
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
Discrete Developer Tasks
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
The Problem
The Problem It’s human nature to get something “good enough to work”
The Problem It’s human nature to get something “good enough to work” Server guy should be hired first after the founders.
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.
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
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
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
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
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.
Success Story
Why You Need a Front End Developer
THE ENVIRONMENT
Browsers
Browsers The world’s most hostile development environment
Browsers The world’s most hostile development environment http://gs.statcounter.com/#browser_version-US-monthly-201005-201105
Browsers The world’s most hostile development environment http://gs.statcounter.com/#browser_version-US-monthly-201005-201105 R.I.P IE6.0!!
Mobile
Mobile
Mobile The Easy Part:
Mobile The Easy Part: It's all about WebKit!
Mobile The Easy Part: It's all about WebKit! And Windows CE
Mobile The Easy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! -
Mobile The Easy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! - The Hard Part:
Mobile The Easy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! - The Hard Part: Multi Touch Input
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:
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
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
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
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
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
Flash
Flash
Flash or Flex?
Flash or Flex? HTML5?
Flash or Flex? HTML5? JavaFX?
Flash or Flex? HTML5? JavaFX? Silverlight?
Flash or Flex? HTML5? JavaFX? Silverlight? HA HA !
Flash or Flex? HTML5? JavaFX? Silverlight? HA HA ! Obviously JavaFX and Silverlight dictate their own uses.
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 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
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
Why You Need a Front End Developer
DISCIPLINES
User Interface
User Interface
User Interface Usability
User Interface Usability Usability Tests have been replaced by repeatable patterns and best practices.
User Interface Usability Usability Tests have been replaced by repeatable patterns and best practices. UX (*not* usability)
User Interface Usability Usability Tests have been replaced by repeatable patterns and best practices. UX (*not* usability) Heuristics
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.
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
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
Accessibility
Accessibility
Accessibility HTML takes care of 80% of this automatically
Accessibility HTML takes care of 80% of this automatically WAI-ARIA for Ajax
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
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
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
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
Front End QA
Front End QA
Front End QA Testing Ajax-heavy front ends is a relatively new task
Front End QA Testing Ajax-heavy front ends is a relatively new task Automation is difficult at best
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
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:
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
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.
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
Multimedia
Multimedia
Multimedia Video (sometimes just audio)
Multimedia Video (sometimes just audio) Encoding
Multimedia Video (sometimes just audio) Encoding Flash and HTML5 Players
Multimedia Video (sometimes just audio) Encoding Flash and HTML5 Players VSEO
Multimedia Video (sometimes just audio) Encoding Flash and HTML5 Players VSEO Push SEO
Design
Design http://blog.mycolorscreen.com/post/4576460465/why-gorgeous- user-interface-design-is-important
Design A poorly designed site may literally repel viewers http://blog.mycolorscreen.com/post/4576460465/why-gorgeous- user-interface-design-is-important
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
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
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
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
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
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
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
Optimization and Performance
Optimization and Performance Small code is good code.
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.
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.
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.
Why You Need a Front End Developer
FRONT END DEVELOPMENT + BACK END DEVELOPMENT
Single-page Web Apps
Single-page Web Apps ?? ?? ? ?
Single-page Web Apps Questions Server Devs often ask ?? ?? ? ?
Single-page Web Apps Questions Server Devs often ask What about my sessions? ?? ?? ? ?
Single-page Web Apps Questions Server Devs often ask What about my sessions? What about my MVC? ?? ?? ? ?
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! ?? ?? ? ?
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? ?? ?? ? ?
Web App Web Services
Web App Web Services Use REST or RPC (no XML!)
Web App Web Services Use REST or RPC (no XML!) Design the app to use an API from the start
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
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
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?
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!
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
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
Webpages
Webpages You can use that templating language now
Webpages You can use that templating language now FED is more important than ever:
Webpages You can use that templating language now FED is more important than ever: SEO
Webpages You can use that templating language now FED is more important than ever: SEO Ads
Webpages You can use that templating language now FED is more important than ever: SEO Ads Load optimization
Webpages You can use that templating language now FED is more important than ever: SEO Ads Load optimization Performance (load and execution)
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
Why You Need a Front End Developer
CODE
CSS
CSS Image-less design is the goal
CSS Image-less design is the goal No GIFs, JPGs
CSS Image-less design is the goal No GIFs, JPGs Easy maintenance / changes
CSS Image-less design is the goal No GIFs, JPGs Easy maintenance / changes Easier theming
CSS Image-less design is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org
CSS Image-less design is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org Feature Detection
CSS Image-less design is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org Feature Detection Modernizr
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
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
CSS3
CSS3 A “simple” example of a cross-browser gradient.
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; }
JavaScript
JavaScript The follow “works good enough” code has at least 7 bad practices. Can you spot them?
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 }
Why You Need a Front End Developer
GOOD EXAMPLES OF BAD WEBSITES
Solutions
Solutions Development Time
Solutions Development Time FED that knows some JSP will be much faster than a Java dev who knows some JavaScript and CSS
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
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:
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
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
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
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
Why You Need a Front End Developer

More Related Content

What's hot (20)

PPTX
Java script introduction
Jesus Obenita Jr.
 
PPTX
Untangling - fall2017 - week5
Derek Jacoby
 
PDF
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
PPTX
Untangling - fall2017 - week6
Derek Jacoby
 
KEY
HTML5shim
Michael MacDonald
 
PPTX
Doing More with LESS for CSS
Todd Anglin
 
PDF
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
PDF
Test-proof CSS
Vittorio Vittori
 
PPTX
jQuery Conference 2012 keynote
dmethvin
 
PDF
Component Driven Design and Development
Cristina Chumillas
 
PDF
Teams, styles and scalable applications
Vittorio Vittori
 
PDF
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
PDF
Real World Web components
Jarrod Overson
 
PPTX
Learning to be IDE Free (PrDC 2015)
David Wesst
 
PDF
Webpack: What it is, What it does, Whether you need it
Mike Wilcox
 
PPTX
1-01: Introduction To Web Development
apnwebdev
 
PPTX
React Native A guide for front end developers
Arnold Camas
 
PDF
Style Guides, Pattern Libraries, Design Systems and other amenities.
Cristiano Rastelli
 
KEY
HTML CSS & Javascript
David Lindkvist
 
PDF
DrupalCamp NYC Panels Presentation - April 2014
Suzanne Dergacheva
 
Java script introduction
Jesus Obenita Jr.
 
Untangling - fall2017 - week5
Derek Jacoby
 
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
Untangling - fall2017 - week6
Derek Jacoby
 
HTML5shim
Michael MacDonald
 
Doing More with LESS for CSS
Todd Anglin
 
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Test-proof CSS
Vittorio Vittori
 
jQuery Conference 2012 keynote
dmethvin
 
Component Driven Design and Development
Cristina Chumillas
 
Teams, styles and scalable applications
Vittorio Vittori
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
Real World Web components
Jarrod Overson
 
Learning to be IDE Free (PrDC 2015)
David Wesst
 
Webpack: What it is, What it does, Whether you need it
Mike Wilcox
 
1-01: Introduction To Web Development
apnwebdev
 
React Native A guide for front end developers
Arnold Camas
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
Cristiano Rastelli
 
HTML CSS & Javascript
David Lindkvist
 
DrupalCamp NYC Panels Presentation - April 2014
Suzanne Dergacheva
 

Viewers also liked (12)

PPTX
Etical hacking
talhaabid
 
PDF
Get MORE Cosmetic and Implant New Dental Patients by Adding These 21 Actionab...
Ken Newhouse & Co.
 
PDF
Smart DoorLock Keynote
Seungmin Chun
 
PPTX
History of hacking
Willem Kuypers
 
PDF
Iconic Village_Sustainable Remodel Process
Taralb14
 
PDF
SustainableVillageModel
Deborah Dee Vicino
 
PDF
The History of Hacking in 5minutes (for dummie)
Stu Sjouwerman
 
PDF
Omega design proposal
Gloob Decor
 
PDF
Design Proposal HDB Apartment
phoebekudesign
 
PPT
Starting with Reactjs
Thinh VoXuan
 
PPTX
003. ReactJS basic
Binh Quan Duc
 
PPSX
Interior Design proposal
Joby joseph interior designer
 
Etical hacking
talhaabid
 
Get MORE Cosmetic and Implant New Dental Patients by Adding These 21 Actionab...
Ken Newhouse & Co.
 
Smart DoorLock Keynote
Seungmin Chun
 
History of hacking
Willem Kuypers
 
Iconic Village_Sustainable Remodel Process
Taralb14
 
SustainableVillageModel
Deborah Dee Vicino
 
The History of Hacking in 5minutes (for dummie)
Stu Sjouwerman
 
Omega design proposal
Gloob Decor
 
Design Proposal HDB Apartment
phoebekudesign
 
Starting with Reactjs
Thinh VoXuan
 
003. ReactJS basic
Binh Quan Duc
 
Interior Design proposal
Joby joseph interior designer
 
Ad

Similar to Why You Need a Front End Developer (20)

PPTX
Feature driven agile oriented web applications
Ram G Athreya
 
KEY
Intro
tsans
 
PDF
IT Project NE - Services Offer 2013
Startupreneurs AB / Startup Entrepreneurs
 
PDF
Class 6: Introduction to web technology entrepreneurship
allanchao
 
PDF
Optimizing HTML5 Sites with CQ5/WEM
Gabriel Walt
 
PDF
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
Appnovation Technologies
 
PDF
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
DrupalcampAtlanta2012
 
PDF
Web tech weblamp_infosession_2012-13
Konrad Roeder
 
PPTX
Web development tips and tricks
maxo_64
 
PPTX
Global Vision of Inet eSystems And Software Pvt Ltd Pune India
pkumarpkumar
 
PDF
The Modern Web, Part 1: Mobility
David Pallmann
 
PDF
About 4Ward
Andrija Gramatikovski
 
PPTX
Women Who Code, Ground Floor
Katie Weiss
 
DOC
Click here to download my CV in Word format.doc
butest
 
PDF
UX Roles and Job Titles
Ryan Winzenburg
 
PDF
resume
Brent Ransom
 
PDF
Poly Source It Profile
moseskhedi
 
PDF
Polysource It Profile
elenarys
 
PDF
Who feeds an experience?
Jeremy Johnson
 
PDF
Ammar Janjua - Resume
Ammar Ahmed Janjua
 
Feature driven agile oriented web applications
Ram G Athreya
 
Intro
tsans
 
IT Project NE - Services Offer 2013
Startupreneurs AB / Startup Entrepreneurs
 
Class 6: Introduction to web technology entrepreneurship
allanchao
 
Optimizing HTML5 Sites with CQ5/WEM
Gabriel Walt
 
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
Appnovation Technologies
 
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
DrupalcampAtlanta2012
 
Web tech weblamp_infosession_2012-13
Konrad Roeder
 
Web development tips and tricks
maxo_64
 
Global Vision of Inet eSystems And Software Pvt Ltd Pune India
pkumarpkumar
 
The Modern Web, Part 1: Mobility
David Pallmann
 
About 4Ward
Andrija Gramatikovski
 
Women Who Code, Ground Floor
Katie Weiss
 
Click here to download my CV in Word format.doc
butest
 
UX Roles and Job Titles
Ryan Winzenburg
 
resume
Brent Ransom
 
Poly Source It Profile
moseskhedi
 
Polysource It Profile
elenarys
 
Who feeds an experience?
Jeremy Johnson
 
Ammar Janjua - Resume
Ammar Ahmed Janjua
 
Ad

More from Mike Wilcox (20)

PDF
Accessibility for Fun and Profit
Mike Wilcox
 
PDF
WTF R PWAs?
Mike Wilcox
 
PDF
Advanced React
Mike Wilcox
 
PDF
Dangerous CSS
Mike Wilcox
 
PDF
Web Components v1
Mike Wilcox
 
PDF
Great Responsive-ability Web Design
Mike Wilcox
 
PDF
Professional JavaScript: AntiPatterns
Mike Wilcox
 
PDF
Model View Madness
Mike Wilcox
 
PDF
Hardcore JavaScript – Write it Right
Mike Wilcox
 
KEY
The Great Semicolon Debate
Mike Wilcox
 
KEY
AMD - Why, What and How
Mike Wilcox
 
KEY
Dojo & HTML5
Mike Wilcox
 
KEY
Webpage Design Basics for Non-Designers
Mike Wilcox
 
KEY
A Conversation About REST
Mike Wilcox
 
KEY
The Fight Over HTML5
Mike Wilcox
 
KEY
The Fight Over HTML5
Mike Wilcox
 
PPT
How to get a Job as a Front End Developer
Mike Wilcox
 
KEY
The History of HTML5
Mike Wilcox
 
KEY
Thats Not Flash?
Mike Wilcox
 
KEY
Flash And Dom
Mike Wilcox
 
Accessibility for Fun and Profit
Mike Wilcox
 
WTF R PWAs?
Mike Wilcox
 
Advanced React
Mike Wilcox
 
Dangerous CSS
Mike Wilcox
 
Web Components v1
Mike Wilcox
 
Great Responsive-ability Web Design
Mike Wilcox
 
Professional JavaScript: AntiPatterns
Mike Wilcox
 
Model View Madness
Mike Wilcox
 
Hardcore JavaScript – Write it Right
Mike Wilcox
 
The Great Semicolon Debate
Mike Wilcox
 
AMD - Why, What and How
Mike Wilcox
 
Dojo & HTML5
Mike Wilcox
 
Webpage Design Basics for Non-Designers
Mike Wilcox
 
A Conversation About REST
Mike Wilcox
 
The Fight Over HTML5
Mike Wilcox
 
The Fight Over HTML5
Mike Wilcox
 
How to get a Job as a Front End Developer
Mike Wilcox
 
The History of HTML5
Mike Wilcox
 
Thats Not Flash?
Mike Wilcox
 
Flash And Dom
Mike Wilcox
 

Recently uploaded (20)

PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 

Why You Need a Front End Developer

  • 1. WHY YOU NEED A FRONT END Mike Wilcox - May 2011 Tweets: @clubajax Blogs: clubajax.org
  • 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:
  • 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
  • 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
  • 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.
  • 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!!
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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; }
  • 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
  • 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

Editor's Notes