Upload
future-insights
View
2.074
Download
3
Embed Size (px)
Citation preview
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