The State of Front End Web Development 2011

32
Pascal Rettig On twitter @cykod http://www.meetup.com/Boston-Frontend-Developers/ Saturday, May 28, 2011

description

The state of Front End Web Development presented at the first monthly Boston Front End Web Development meetup.

Transcript of The State of Front End Web Development 2011

Page 1: The State of Front End Web Development 2011

Pascal RettigOn twitter @cykodhttp://www.meetup.com/Boston-Frontend-Developers/

Saturday, May 28, 2011

Page 2: The State of Front End Web Development 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

Page 3: The State of Front End Web Development 2011

THE STATE OF FRONT END WEB DEVELOPMENT 2011

Saturday, May 28, 2011

Page 4: The State of Front End Web Development 2011

Both a Gift and CurseIN THE WORDS OF MONK:

Saturday, May 28, 2011

Page 5: The State of Front End Web Development 2011

WE HAVE LOTS OF NEW TOYS TO PLAY WITH

Saturday, May 28, 2011

Page 6: The State of Front End Web Development 2011

BUT THE LEARNING CURVE IS STEEP AND CONTINUOUS

Saturday, May 28, 2011

Page 7: The State of Front End Web Development 2011

THAT’S (HOPEFULLY) WHY YOU’RE HERE.

Saturday, May 28, 2011

Page 8: The State of Front End Web Development 2011

BEST PRACTICES

...those keep changing too

LIKE SEO RULE #1 Only 1 <h1> tag per page.

Saturday, May 28, 2011

Page 9: The State of Front End Web Development 2011

WHAT IS FRONT END DEVELOPMENT?

Saturday, May 28, 2011

Page 10: The State of Front End Web Development 2011

MY DEFINITION:Technical implementation and best practices for user facing page elements.

Saturday, May 28, 2011

Page 11: The State of Front End Web Development 2011

WHAT IS IT NOT?

• Server side development

• SEO from a content strategy standpoint

• Marketing, SEM

• Social-media douchbaggery

Saturday, May 28, 2011

Page 12: The State of Front End Web Development 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

Page 13: The State of Front End Web Development 2011

Backend

Content Design

Front-end

PLAYERS IN WEBSITE DEVELOPMENT

Saturday, May 28, 2011

Page 14: The State of Front End Web Development 2011

IS FRONT-END DEVELOPMENT

A CAREER PATH?Saturday, May 28, 2011

Page 15: The State of Front End Web Development 2011

YES!

Not quite Java, Ruby or Python - but comparable to PHP, but...

Saturday, May 28, 2011

Page 16: The State of Front End Web Development 2011

“JAVASCRIPT” JOBS HAVE OVERTAKEN PHP

Saturday, May 28, 2011

Page 18: The State of Front End Web Development 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

Page 19: The State of Front End Web Development 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

Page 20: The State of Front End Web Development 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

Page 21: The State of Front End Web Development 2011

THE BASIC TOOLBOX HASN’T CHANGED• HTML

• CSS

• Javascript

• (Flash, if you swing that way)

Saturday, May 28, 2011

Page 22: The State of Front End Web Development 2011

BUT IT’S GOTTEN A LOT MORE POWERFUL(And complicated)

Saturday, May 28, 2011

Page 23: The State of Front End Web Development 2011

• Semantic Chop, Sectioning

• RDFa, open-graph

• Microdata

• Native Audio, Video

• New Form elements

• New attributes (autofocus, placeholder, aria)

HTML5HTML5

Saturday, May 28, 2011

Page 24: The State of Front End Web Development 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

Page 25: The State of Front End Web Development 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

Page 26: The State of Front End Web Development 2011

5 TENETS OF MODERN FRONT END DEVELOPMENT

Saturday, May 28, 2011

Page 27: The State of Front End Web Development 2011

#1SEMANTICSGive your code meaning and the Google will reward you.

Saturday, May 28, 2011

Page 28: The State of Front End Web Development 2011

#2PROGRESSIVE ENHANCEMENTStart with a workable baseline, add features as supported.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Saturday, May 28, 2011

Page 29: The State of Front End Web Development 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

Page 30: The State of Front End Web Development 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

Page 31: The State of Front End Web Development 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

Page 32: The State of Front End Web Development 2011

THANKS! QUESTIONS?

Pascal Rettigcykod.comTwitter @cykod

Saturday, May 28, 2011