KEMBAR78
Why You Need a Front End Developer | KEY
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
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
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.
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
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
 }
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

Why You Need a Front End Developer

  • 1.
    WHY YOU NEEDA FRONT END Mike Wilcox - May 2011 Tweets: @clubajax Blogs: clubajax.org
  • 2.
  • 3.
  • 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 aFront End Developer?
  • 9.
    What is aFront End Developer? FED
  • 10.
    What is aFront End Developer? Markup Developer Client-Side Developer FED Frontender Web Designer Coder Htmler
  • 11.
    What is aFront End Developer? Markup Developer Client-Side Developer FED Frontender Web Designer Coder Htmler A Relatively new term:
  • 12.
  • 13.
    Front End Duties BrowserCompatibility 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.
  • 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 EndDeveloper Duties
  • 17.
    End to EndDeveloper 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 EndDeveloper 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.
  • 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.
  • 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.
  • 32.
  • 33.
  • 34.
    Browsers The world’smost 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.
  • 38.
  • 39.
    Mobile TheEasy Part:
  • 40.
    Mobile TheEasy Part: It's all about WebKit!
  • 41.
    Mobile TheEasy Part: It's all about WebKit! And Windows CE
  • 42.
    Mobile TheEasy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! -
  • 43.
    Mobile TheEasy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! - The Hard Part:
  • 44.
    Mobile TheEasy Part: It's all about WebKit! And Windows CE ha ha! Just kidding! - The Hard Part: Multi Touch Input
  • 45.
    Mobile TheEasy 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 TheEasy 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 TheEasy 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 TheEasy 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 TheEasy 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 TheEasy 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.
  • 52.
  • 53.
  • 54.
  • 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.
  • 64.
  • 65.
  • 66.
  • 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.
  • 74.
  • 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.
  • 82.
  • 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.
  • 91.
  • 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.
  • 98.
    Design http://blog.mycolorscreen.com/post/4576460465/why-gorgeous- user-interface-design-is-important
  • 99.
    Design Apoorly designed site may literally repel viewers http://blog.mycolorscreen.com/post/4576460465/why-gorgeous- user-interface-design-is-important
  • 100.
    Design Apoorly 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 Apoorly 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 Apoorly 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 Apoorly 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 Apoorly 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 Apoorly 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 Apoorly 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.
  • 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.
  • 115.
  • 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 WebServices
  • 122.
    Web App WebServices Use REST or RPC (no XML!)
  • 123.
    Web App WebServices Use REST or RPC (no XML!) Design the app to use an API from the start
  • 124.
    Web App WebServices 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 WebServices 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 WebServices 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 WebServices 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 WebServices 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 WebServices 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.
  • 131.
    Webpages Youcan use that templating language now
  • 132.
    Webpages Youcan use that templating language now FED is more important than ever:
  • 133.
    Webpages Youcan use that templating language now FED is more important than ever: SEO
  • 134.
    Webpages Youcan use that templating language now FED is more important than ever: SEO Ads
  • 135.
    Webpages Youcan use that templating language now FED is more important than ever: SEO Ads Load optimization
  • 136.
    Webpages Youcan use that templating language now FED is more important than ever: SEO Ads Load optimization Performance (load and execution)
  • 137.
    Webpages Youcan use that templating language now FED is more important than ever: SEO Ads Load optimization Performance (load and execution) Resources, Resources, Resources
  • 139.
  • 140.
  • 141.
    CSS Image-lessdesign is the goal
  • 142.
    CSS Image-lessdesign is the goal No GIFs, JPGs
  • 143.
    CSS Image-lessdesign is the goal No GIFs, JPGs Easy maintenance / changes
  • 144.
    CSS Image-lessdesign is the goal No GIFs, JPGs Easy maintenance / changes Easier theming
  • 145.
    CSS Image-lessdesign is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org
  • 146.
    CSS Image-lessdesign is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org Feature Detection
  • 147.
    CSS Image-lessdesign is the goal No GIFs, JPGs Easy maintenance / changes Easier theming ClubAJAX.org Feature Detection Modernizr
  • 148.
    CSS Image-lessdesign 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-lessdesign 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.
  • 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.
  • 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.
  • 159.
  • 160.
    Solutions DevelopmentTime FED that knows some JSP will be much faster than a Java dev who knows some JavaScript and CSS
  • 161.
    Solutions DevelopmentTime 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 DevelopmentTime 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 DevelopmentTime 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 DevelopmentTime 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 DevelopmentTime 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 DevelopmentTime 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