Front End Development - Beyond Javascript (Robin Cannon)
30 likes12,661 views
Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Front End Development - Beyond Javascript (Robin Cannon) (20)
Ad
More from Future Insights (20)
Recently uploaded (20)
Front End Development - Beyond Javascript (Robin Cannon)
- 1. FRONT END DEVELOPMENT -FRONT END DEVELOPMENT - BEYOND JAVASCRIPT!BEYOND JAVASCRIPT! ...though I'm not sure about exclamation points in the title...
- 2. “Front end developers shall not live on Javascript alone. Source: Jesus (...paraphrased)
- 3. ROBIN CANNONROBIN CANNON (Self) Exiled Brit in Austin, TX Front End Dev Manager, IBM @shinytoyrobots
- 4. HTMLHTML CSSCSS JAVASCRIPTJAVASCRIPT LONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPERLONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPER Must enjoy fussball, have GSOH, own laptop and...
- 5. JAVASCRIPTJAVASCRIPT HONEST 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
- 7. 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
- 14. 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/
- 15. FRAMEWORKS ARE TOOLSFRAMEWORKS ARE TOOLS (...NOT SKILLS)(...NOT SKILLS) BUT THEY CAN MAKE US LAZYBUT THEY CAN MAKE US LAZY THEY'RE SUPPOSED TO MAKE LIFE EASYTHEY'RE SUPPOSED TO MAKE LIFE EASY
- 16. FRONT END == EXPERIENCES FOR PEOPLEFRONT END == EXPERIENCES FOR PEOPLE
- 26. JAVASCRIPT MVCS ARE MATURINGJAVASCRIPT MVCS ARE MATURING AND CONSOLIDATINGAND CONSOLIDATING Google Trends
- 27. 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
- 28. 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
- 30. BUT IF EVERYONEBUT IF EVERYONE IS TRYING TOIS TRYING TO BECOME ONE OFBECOME ONE OF THESE...?THESE...?
- 34. KNOWING AN MVCKNOWING AN MVC WON'T MAKE YOUWON'T MAKE YOU SPECIAL ANY MORE.SPECIAL ANY MORE. HAVING AN MVC WON'THAVING AN MVC WON'T MAKE THAT PRODUCTMAKE THAT PRODUCT SPECIAL ANY MORE.SPECIAL ANY MORE.
- 36. MOORE'S LAW:MOORE'S LAW: OVERALL PROCESSING POWEROVERALL PROCESSING POWER FOR COMPUTERS WILL DOUBLEFOR COMPUTERS WILL DOUBLE EVERY TWO YEARS.EVERY TWO YEARS.
- 37. “ Moore’s Law is no longer 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/
- 38. 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/
- 39. JAVASCRIPTJAVASCRIPT (...AND I DON'T MEAN(...AND I DON'T MEAN FRAMEWORKS AND LIBRARIES)FRAMEWORKS AND LIBRARIES)
- 40. “ the latest and greatest JavaScript framework comes around every sixteen minutes Allen Pike, Steamwork Software (@apike) http://www.allenpike.com/2015/javascript-framework-fatigue/
- 41. 6464
- 42. EVEN IF MVCS AREEVEN IF MVCS ARE CONSOLIDATINGCONSOLIDATING LIBRARIES ARELIBRARIES ARE FRACTURINGFRACTURING AND MIGHT OUTWEIGHAND MIGHT OUTWEIGH MVCS ANWAYMVCS ANWAY http://www.jacquewatkins.com/wp-content/uploads/2011/08/Broken_glass.jpg
- 44. HTMLHTML
- 45. <!DOCTYPE html> <html> <head> <title>Legit</title> </head> <body> <p>This is a legit webpage. By itself.</p> </body> </html>
- 46. PRESENTATION OF CONTENTPRESENTATION OF CONTENT COMES DOWN TO THE DOM.COMES DOWN TO THE DOM. THE "DEFAULT" OF THE DOM ISTHE "DEFAULT" OF THE DOM IS HTMLHTML JAVASCRIPT MANIPULATES THEJAVASCRIPT MANIPULATES THE DOM.DOM.
- 47. <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>
- 48. THE SHADOW DOMTHE SHADOW DOM http://www.fangoria.com/new/what-we-do-in-the-shadows-sundance-movie-review/
- 51. CSSCSS
- 52. FLEXBOXFLEXBOX
- 54. YOU DON'T EVEN NEED TO KNOWYOU DON'T EVEN NEED TO KNOW ANNOYING STUFF LIKE VENDOR PREFIXESANNOYING STUFF LIKE VENDOR PREFIXES HTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXERHTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXER (Probably my favorite gulp recipe)
- 60. BUT THAT'S JUSTBUT THAT'S JUST ONE BIG NINJAONE BIG NINJA I SAID BECOMEI SAID BECOME THREE NINJASTHREE NINJAS http://www.viki.com/tv/1863c-ninja-segging-subbing-academy | http://www.woothemes.com/2010/07/training-ninjas-with-jon-hicks/
- 61. THANK YOUTHANK YOU ROBIN CANNON, @SHINYTOYROBOTSROBIN CANNON, @SHINYTOYROBOTS
- 62. 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