the state of front end web development 2011
DESCRIPTION
The state of Front End Web Development presented at the first monthly Boston Front End Web Development meetup.TRANSCRIPT
Pascal RettigOn twitter @cykodhttp://www.meetup.com/Boston-Frontend-Developers/
Saturday, May 28, 2011
AGENDA• Pizza & Beer
• The State of Front-End Web Development 2011 ~20 min
• Break ~10 min
• A Semantic Chop 101 ~30 min
• Announcements ~10 min
Saturday, May 28, 2011
THE STATE OF FRONT END WEB DEVELOPMENT 2011
Saturday, May 28, 2011
Both a Gift and CurseIN THE WORDS OF MONK:
Saturday, May 28, 2011
WE HAVE LOTS OF NEW TOYS TO PLAY WITH
Saturday, May 28, 2011
BUT THE LEARNING CURVE IS STEEP AND CONTINUOUS
Saturday, May 28, 2011
THAT’S (HOPEFULLY) WHY YOU’RE HERE.
Saturday, May 28, 2011
BEST PRACTICES
...those keep changing too
LIKE SEO RULE #1 Only 1 <h1> tag per page.
Saturday, May 28, 2011
WHAT IS FRONT END DEVELOPMENT?
Saturday, May 28, 2011
MY DEFINITION:Technical implementation and best practices for user facing page elements.
Saturday, May 28, 2011
WHAT IS IT NOT?
• Server side development
• SEO from a content strategy standpoint
• Marketing, SEM
• Social-media douchbaggery
Saturday, May 28, 2011
BUT IT IS....
• Interacting with server side code and writing server side views.
• SEO from a technical practices standpoint
• Landing page best practices.
• Implementing social widgets and required meta-data
Saturday, May 28, 2011
Backend
Content Design
Front-end
PLAYERS IN WEBSITE DEVELOPMENT
Saturday, May 28, 2011
IS FRONT-END DEVELOPMENT
A CAREER PATH?Saturday, May 28, 2011
YES!
Not quite Java, Ruby or Python - but comparable to PHP, but...
Saturday, May 28, 2011
“JAVASCRIPT” JOBS HAVE OVERTAKEN PHP
Saturday, May 28, 2011
TOP TEN JOB TRENDS
1. HTML5
2. Mobile app
3. Android
4. Twitter
5. jQuery
6. Facebook
7. Social Media
8. iPhone
9. Cloud Computing
10.Virtualization
source: http://www.indeed.com/jobtrendsSaturday, May 28, 2011
• I. 1991-1999: The HTML Age.
• II. 2000-2009: The LAMP Age.
• III. 2010-??: The Javascript Age.
• The Javascript age is about event streams. Modern web pages are not pages, they are event-driven applications through which information moves.
• “The Javascript age brings us closer to a web that is not a global digital library, but a global digital nervous system, whose implications we are only beginning to apprehend.”
• http://metamarketsgroup.com/blog/node-js-and-the-javascript-age/
WE ARE ENTERING THE
“JAVASCRIPT AGE”
Saturday, May 28, 2011
AS A FRONT-END DEVELOPER...• It’s no longer static
• It’s not just writing views and CSS
• More is being pushed onto your plate.
• It’s pulling data dynamically, and redrawing the pieces of the page as necessary.
• E.g.: New twitter, Gizmodo
Saturday, May 28, 2011
(WE’RE NOT DONE)• It’s not longer a single format
• It’s not longer limited to the desktop browser.
• Mobile (Almost tripled for 3 years running)
• Tablets
• Other Internet-connected-devices
Saturday, May 28, 2011
THE BASIC TOOLBOX HASN’T CHANGED• HTML
• CSS
• Javascript
• (Flash, if you swing that way)
Saturday, May 28, 2011
BUT IT’S GOTTEN A LOT MORE POWERFUL(And complicated)
Saturday, May 28, 2011
• Semantic Chop, Sectioning
• RDFa, open-graph
• Microdata
• Native Audio, Video
• New Form elements
• New attributes (autofocus, placeholder, aria)
HTML5HTML5
Saturday, May 28, 2011
• Media-queries
• Web typography via @font-face
• Rounded corners, Shadows, Transforms, multiple backgrounds
• Animation
• New selectors
• New layout options (columns, tables)
CSS3CSS3
Saturday, May 28, 2011
• jQuery has become the defacto-standard
• 1001 jQuery plugins
• Canvas 2D + WebGL
• WebSockets
• Local Storage
• Offline Storage
• SVG
• New Events (touch, orientation, accel)
• Geolocation
JAVASCRIPTJAVASCRIPT
Saturday, May 28, 2011
5 TENETS OF MODERN FRONT END DEVELOPMENT
Saturday, May 28, 2011
#1SEMANTICSGive your code meaning and the Google will reward you.
Saturday, May 28, 2011
#2PROGRESSIVE ENHANCEMENTStart with a workable baseline, add features as supported.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Saturday, May 28, 2011
#3IN JQUERY WE TRUST(This kills me, but...) Learn jQuery first, then Javascript. Understand your selectors and how to use plugins and you can fake it for a long time.
Saturday, May 28, 2011
#4CAPABILITIES, NOT BROWSERSDon’t look at the user agent, this stuff changes way too quickly. Use modernizr or the like and make decisions base on capabilities.
Saturday, May 28, 2011
#5 IT’S NO LONGER JUST THE DESKTOPMobile and Tablet browsers are taking over. This year double digits, in a couple years 50% (Made up number)
Saturday, May 28, 2011
THANKS! QUESTIONS?
Pascal Rettigcykod.comTwitter @cykod
Saturday, May 28, 2011