Front End Development - Beyond Javascript (Robin Cannon)

FRONT END DEVELOPMENT -FRONT END DEVELOPMENT -BEYOND JAVASCRIPT!BEYOND JAVASCRIPT!

...though I'm not sure about exclamation points in the title...

“ Front end developersshall not live on

Javascript alone.Source: Jesus (...paraphrased)

ROBIN CANNONROBIN CANNON(Self) Exiled Brit in Austin, TX

Front End Dev Manager, IBM

@shinytoyrobots

HTMLHTMLCSSCSSJAVASCRIPTJAVASCRIPT

LONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPERLONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPER

Must enjoy fussball, have GSOH, own laptop and...

JAVASCRIPTJAVASCRIPTHONEST STARTUP SEEKS NEEDY FRONT END DEVELOPERHONEST STARTUP SEEKS NEEDY FRONT END DEVELOPER

Must enjoy long hours, have stock option optimism, own laptop and...

AND MAYBE HTML AND CSS...KINDA...AND MAYBE HTML AND CSS...KINDA...

ANGULAR, EMBER, OR BACKBONEANGULAR, EMBER, OR BACKBONE

BUTBUTWHY?WHY?

console.log('because javascript is awesome');

Display content

Interact with content

Enhance your HTML

Run a server

Give a presentation

Play Command & Conquer

Fight crime

GENERICGENERIC

http://www.playbuzz.com/natthomasbosley10/which-badass-orphan-black-clone-are-you

https://www.haikudeck.com/the-tube-uncategorized-presentation-GmUyZRCKJa

EXCESSIVEEXCESSIVE

http://www.huffingtonpost.com/2014/04/01/kitt-knight-rider_n_5069998.html

DATEDDATED

GOODGOODISIS

EASYEASY

GREAT ISGREAT ISDIFFICULTDIFFICULT

I "DO" MY BANKING WITH CHASEI "DO" MY BANKING WITH CHASE

I "PLAY" ON BETTERMENTI "PLAY" ON BETTERMENT

http://www.consumeraffairs.com/finance/chase-online-banking.html | https://www.betterment.com/retirement/

FRAMEWORKS ARE TOOLSFRAMEWORKS ARE TOOLS(...NOT SKILLS)(...NOT SKILLS)

BUT THEY CAN MAKE US LAZYBUT THEY CAN MAKE US LAZYTHEY'RE SUPPOSED TO MAKE LIFE EASYTHEY'RE SUPPOSED TO MAKE LIFE EASY

FRONT END == EXPERIENCES FOR PEOPLEFRONT END == EXPERIENCES FOR PEOPLE

JAVASCRIPT MVCS ARE MATURINGJAVASCRIPT MVCS ARE MATURINGAND CONSOLIDATINGAND CONSOLIDATING

Google Trends

0.2% OF WEBSITES0.2% OF WEBSITES

0.1% OF WEBSITES0.1% OF WEBSITES

<0.1% OF WEBSITES<0.1% OF WEBSITES

http://w3techs.com/technologies/overview/javascript_library/all

89.5% OF WEBSITES89.5% OF WEBSITES

91.3% OF WEBSITES91.3% OF WEBSITES

~100% OF WEBSITES~100% OF WEBSITES

http://w3techs.com/technologies/overview

http://w3techs.com/technologies/overview

FRONT END

DEVELOPMENT

BUT IF EVERYONEBUT IF EVERYONEIS TRYING TOIS TRYING TOBECOME ONE OFBECOME ONE OFTHESE...?THESE...?

GENERICGENERIC

http://www.playbuzz.com/natthomasbosley10/which-badass-orphan-black-clone-are-you

https://www.haikudeck.com/the-tube-uncategorized-presentation-GmUyZRCKJa

EXCESSIVEEXCESSIVE

http://www.huffingtonpost.com/2014/04/01/kitt-knight-rider_n_5069998.html

DATEDDATED

KNOWING AN MVCKNOWING AN MVCWON'T MAKE YOUWON'T MAKE YOUSPECIAL ANY MORE.SPECIAL ANY MORE.

HAVING AN MVC WON'THAVING AN MVC WON'TMAKE THAT PRODUCTMAKE THAT PRODUCT

SPECIAL ANY MORE.SPECIAL ANY MORE.

BEBESPECIALSPECIAL

MOORE'S LAW:MOORE'S LAW:

OVERALL PROCESSING POWEROVERALL PROCESSING POWERFOR COMPUTERS WILL DOUBLEFOR COMPUTERS WILL DOUBLE

EVERY TWO YEARS.EVERY TWO YEARS.

“ Moore’s Law is nolonger enough to make

customers happy.John Maeda, Wall Street Journal, 5/22/2015

http://blogs.wsj.com/accelerators/2015/05/22/weekend-read-why-design-matters-more-than-moore/

DON'T BE A NINJADON'T BE A NINJA

BE THREE NINJASBE THREE NINJAS

http://www.viki.com/tv/1863c-ninja-segging-subbing-academy | http://www.woothemes.com/2010/07/training-ninjas-with-jon-hicks/

JAVASCRIPTJAVASCRIPT(...AND I DON'T MEAN(...AND I DON'T MEAN

FRAMEWORKS AND LIBRARIES)FRAMEWORKS AND LIBRARIES)

“ the latest and greatestJavaScript frameworkcomes around every

sixteen minutesAllen Pike, Steamwork Software (@apike)

http://www.allenpike.com/2015/javascript-framework-fatigue/

6464

EVEN IF MVCS AREEVEN IF MVCS ARECONSOLIDATINGCONSOLIDATING

LIBRARIES ARELIBRARIES AREFRACTURINGFRACTURING

AND MIGHT OUTWEIGHAND MIGHT OUTWEIGHMVCS ANWAYMVCS ANWAY

http://www.jacquewatkins.com/wp-content/uploads/2011/08/Broken_glass.jpg

LEARN JAVASCRIPT!LEARN JAVASCRIPT!

HTMLHTML

<!DOCTYPE html><html> <head> <title>Legit</title> </head> <body> <p>This is a legit webpage. By itself.</p> </body></html>

PRESENTATION OF CONTENTPRESENTATION OF CONTENTCOMES DOWN TO THE DOM.COMES DOWN TO THE DOM.

THE "DEFAULT" OF THE DOM ISTHE "DEFAULT" OF THE DOM ISHTMLHTML

JAVASCRIPT MANIPULATES THEJAVASCRIPT MANIPULATES THEDOM.DOM.

<vampire>Sucks</vampire>

CUSTOM ELEMENTSCUSTOM ELEMENTS

<nav is="vampire-nav"></nav>

EXTENDING EXISTING ELEMENTSEXTENDING EXISTING ELEMENTS

TEMPLATESTEMPLATES

<template> <p>I'm a vampire!</p></template>

THE SHADOW DOMTHE SHADOW DOM

http://www.fangoria.com/new/what-we-do-in-the-shadows-sundance-movie-review/

WEB COMPONENTSWEB COMPONENTS

http://www.twinfinite.net/2015/03/17/rumor-warner-bros-set-to-release-their-own-lego-toys-to-life-game/

LEARN HTML!LEARN HTML!

CSSCSS

FLEXBOXFLEXBOX

YOU DON'T EVEN NEED TO KNOWYOU DON'T EVEN NEED TO KNOWANNOYING STUFF LIKE VENDOR PREFIXESANNOYING STUFF LIKE VENDOR PREFIXES

HTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXERHTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXER

(Probably my favorite gulp recipe)

ANIMATIONANIMATION

http://codepen.io/team/css-tricks/pen/EjaJNd

http://codepen.io/thejamespower/pen/OVNYLL

WEB COMPONENTSWEB COMPONENTS

http://www.twinfinite.net/2015/03/17/rumor-warner-bros-set-to-release-their-own-lego-toys-to-life-game/

(AGAIN...)(AGAIN...)

LEARN CSS!LEARN CSS!

BUT THAT'S JUSTBUT THAT'S JUSTONE BIG NINJAONE BIG NINJA

I SAID BECOMEI SAID BECOMETHREE NINJASTHREE NINJAS

http://www.viki.com/tv/1863c-ninja-segging-subbing-academy | http://www.woothemes.com/2010/07/training-ninjas-with-jon-hicks/

THANK YOUTHANK YOU

ROBIN CANNON, @SHINYTOYROBOTSROBIN CANNON, @SHINYTOYROBOTS

JS/HTML Command & Conquer - http://www.adityaravishankar.com/projects/games/command-and-conquer/

UK Crime Map - http://www.police.uk/metropolitan/00BK17N/crime/

Custom Elements (Eric Bidelman @ebidel) - http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

About Shadow DOM - https://www.polymer-project.org/0.5/platform/shadow-dom.html

Web Components - http://webcomponents.org/

Web Components and the future of CSS - http://philipwalton.github.io/talks/2014-11-24

Flexbox Support - http://caniuse.com/#feat=flexbox