a call to js developers - let’s stop trying to impress each other and start building

Call to JavaScript developers: Let’s stop trying to impress each other and start building

Chris Heilmann @codepo8, Web on the Edge, Helsinki, Nov 2015

Moore’s Law: (paraphrased)

Computers get faster, better, cheaper and are more available every two years.

May’s Law: (paraphrased)

Software efficiency halves every 18 months, compensating Moore’s law.

https://www.flickr.com/photos/56218409@N03/19216130670

WE MOVE FAST AND RUN IN CIRCLES


We’re all about the Moore…

WE WORK WITH AMAZING HARDWARE…

WE WORK WITH GREAT CONNECTIVITY…

WE GET PAID WELL – FOR A JOB WE LIKE



WE WORK WITH AMAZING BROWSERS

BROWSERS THAT GIVE OUR USERS FUNCTIONALITY WE DON’T EVER USE BUT THEY APPRECIATE…

BROWSER DO AN INCREDIBLE AMOUNT OF WORK FOR US…

• Display of all kind of media content • Fix minor mistakes in our code • Optimise our code to run smoothly • Provide us with developer tools • Provide us with deep insights what

our code does to the computer • Allow us to automate testing in

them and debug remotely on devices we don’t even own (using 3rd party services)

So how come we made the web all about May’s law?

CONVENIENCE BREEDS MORE CONVENIENCE

• Browsers aren’t good enough • Development environments are not

predictive and do our work for us • Languages are confusing • We should have to write less code

and achieve more

Instead of celebrating how lucky we are, we complain…


WE LIVE IN A HYPE FUELLED ENVIRONMENT


WE KEEP PROJECTING…

US OUR AUDIENCE

TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…

OR, ACTUALLY…

US OUR AUDIENCE


🐴💩

TIME TO GET REAL…

USOUR

ASSUMED AUDIENCE

OUR AUDIENCE


THE WEB IS AN AMAZING IDEA AND OFFER…

• Access to information world-wide, 24⨉7

• Independent of hardware, software, ability, or geographical location

• A read/write medium, everybody is invited to become a creator and not just a consumer

ONE PERSON’S BEAUTY IS ANOTHER ONE’S WORRY…

• It is hard to build software and interfaces for the unknown

• Open distribution, caching and availability of source code is anathema to content providers wanting to protect their content.

THE NEXT USERS ARE NOT THOSE WHO COMPLAIN THE WEB IS NOT AS GOOD AS NATIVE APPS…

https://vimeo.com/139312920

https://brucelawson.github.io/talks/2015/velocity

Bruce Lawson at SOTB 2015

https://brucelawson.github.io/talks/2015/velocity

THE NEXT CHALLENGE IS NOT IN COFFEE SHOPS IN THE SILICON VALLEY…

AS DEVELOPERS, WE ARE ASKED TO DO THE IMPOSSIBLE…

• Make it work the same in every browser

• Make it easy to maintain and we want to control everything

• Make sure it is also accessible - I think there’s a law we need to follow

• Don’t spent too much time on it - let’s release it now and fix it later!

• Use this analytics code you have no clue about - we need to know how people use our products

THE ANSWER IS ALWAYS JAVASCRIPT

• Javascript is too powerful for its own good.

• Almost everything that goes wrong can be controlled and to a degree fixed with JavaScript

• This leads to people relying on libraries and frameworks

WHAT DOES THIS CODE DO?


JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!



THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW…


I CURRENTLY WORK WITH A CLEANUP CREW…

http://dev.modern.ie/tools/staticscan/

https://github.com/MicrosoftEdge/static-code-scan

A simple way to detect how old a part of our massive site is checking which version of jQuery was used in that part of it. It’s like rings in a tree trunk.


“


WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…

WE’RE GOING FULL SPEED ON INNOVATION…

• Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps

THE VICIOUS INNOVATION CYCLE…


WE SHOULD WORRY A LOT MORE ABOUT COST…


WE USE CODE WE DON’T UNDERSTAND TO FIX ISSUES WE DON’T HAVE…

• Learning libraries and frameworks beyond “hello world” costs time and money.

• Time you don’t spend on looking at optimising your code

• In essence, we value developer convenience over user experience.

DEVELOPER CONVENIENCE, PRODUCTIVITY & EFFICIENCY…

#FFD700

COST FOR DEVELOPERS…

• Learning new frameworks • Re-learning frameworks • Cutting down on possible hires/

adding to onboarding time • Debugging frameworks • Setting up developer

environments

IS DEPENDENCY HELL A PROBLEM OF THE TOO PRIVILEGED?

https://www.youtube.com/watch?v=PA139CERNbc

Stephan Bönnemann (JSConfEU 2015): Dependency Hell Just Froze Over

https://www.youtube.com/watch?v=PA139CERNbc

WAITING FOR NPM TO FINISH INSTALLING…

THE REAL IMPORTANT BIT IS THE COST FOR OUR USERS…

• Time to load / execute • Bandwidth used • CPU usage • Frame rate (60 fps) • Memory usage • Battery

CONTROL OVER WHAT IS HAPPENING IN THE BROWSER

#FFD700

REPLACING BUILT-IN FUNCTIONALITY FOR THE SAKE OF CONTROL…

IF WE BUILD CLIENT-SIDE SOLUTIONS WE DON’T CONTROL WHERE OUR CODE RUNS.

HOMEWORK / SNEAK PREVIEW OF GREAT INSIGHTS…

PAUL LEWIS @AEROTWIST

THE DOM IS SLOW?

ANALYSING BROWSER RESULTS…

npm install -g bigrig github.com/GoogleChrome/big-rig github.com/GoogleChrome/node-big-rig

http://github.com/GoogleChrome/big-rig

THE JAVASCRIPT LEARNING PROCESS HAS ALWAYS BEEN INTERESTING…

• Use view source to see what others are doing…

• Copy and paste the bits that look like they are responsible for some things

• Change some numbers around • Run into errors • Blame Internet Explorer

THIS, OF COURSE, WAS WRONG AND WE GOT MORE PROFESSIONAL…

• Search for a solution on Stackoverflow

• Copy and paste the bits that look like they are responsible for some things

• Change some numbers around • Run into errors • Blame JavaScript for being

terrible and not a real language • For good measure, blame

Internet Explorer.

WE ARE RUNNING OUT OF BOTH EXCUSES…

1997 20151998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015

1997ECMAScript1

1998ECMAScript2

1999ECMAScript3

2005 - 2007ECMAScript4 - Abandoned

2009ECMAScript5

2015ECMAScript6

JAVASCRIPT EVOLVES…

1997 20151998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015

1997ECMAScript1

1998ECMAScript2

1999ECMAScript3

2005 - 2007ECMAScript4 - Abandoned

2009ECMAScript5

2015ECMAScript6

JAVASCRIPT GREW UP…

• 5+ years since ES5 ratification • Significant changes in 15+ years • Backwards compatible • Ratified June 2015

http://www.ecma-international.org/publications/standards/Ecma-262.htm

SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9))

http://kangax.github.io/compat-table/es6/

NUMBERS! Current status (December 2015):

Desktop: Edge 13: 84% Firefox 44: 74% Chrome 48/Opera 35: 65% Safari 9: 54% (former 21%!)

Mobile: Android 5.1: 29% iOS9: 54%

http://kangax.github.io/compat-table/es6/

WITH ES6 WE HAVE A CLEAN NEW SLATE…

this IS COMPLICATED *** ***

this IS COMPLICATED

*** ***

blog.getify.com/arrow-this/

SAVING KEYSTROKES

BURN THE WITCH!

http://www.bennadel.com/blog/2949-var-for-life---why-let-and-const-don-t-interest-me-in-javascript.htm

http://www.bennadel.com/blog/2949-var-for-life---why-let-and-const-don-t-interest-me-in-javascript.htm

https://maxwellito.github.io/es6-quiz-slides

ES2015 QUIZ TIME…

https://maxwellito.github.io/es6-quiz-slides

ES2015 QUIZ TIME…

UTF-8, BABY…

THE NEW BASELINE IS HERE!

MAYBE IT IS PRUDENT TO CALM THE F… DOWN A BIT!

FREE TIME PROJECTS USED TO BE ABOUT FUN AND EXPERIMENTATION…

http://sephie-monster.deviantart.com/art/Mythbusters-153616339

http://sephie-monster.deviantart.com/art/Mythbusters-153616339

NOT ABOUT CUTTHROAT COMPETITION AND SELF-INFLICTED COMPLEXITY…

https://egghead.io/series/how-to-write-an-open-source-javascript-library

https://egghead.io/series/how-to-write-an-open-source-javascript-library

Library Builders

map, set & weakmap__proto__ProxiesSymbols

Sub7classable built7ins

Scalable Apps

let, const & block7scoped bindings

ClassesPromisesIterators

GeneratorsTyped arrays

Modules

Syntactic Sugar

Arrow functionsEnhanced object literals

Template stringsDestructuring

Rest, Spread, DefaultString, Math, Number, Object, RegExp APIs

JAVASCRIPT CATERS TO DIFFERENT AUDIENCES…


TIME TO CALM DOWN AND CONCENTRATE ON THE GOOD THINGS…


BETTER BROWSERS ALLOW US TO WRITE SIMPLER HELPER LIBRARIES…

http://lea.verou.me/2015/12/introducing-bliss-a-3kb-library-for-happier-vanilla-js/

COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…

MONOPOLIES FALL AND SURPRISES HAPPEN…

ES6 GOODNESS FOR EVERYBODY!

https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/

• Open Source and cross platform • Written in JavaScript • Includes debugging and linting -

learn your mistakes while you write code

• GitHub integration

VISUAL STUDIO CODE

https://code.visualstudio.com/

TRANSPILATING FOR THE WEB OF YESTERDAY…

https://babeljs.io• Converts ES6 to older versions on the server or the client • In use by Facebook and many others • Used in editors and tool chains

https://babeljs.io

https://featuretests.io/

FEATURE TESTING WHAT YOU NEED…

EXCELLENT RESOURCES ARE FREE AND ONLINE…

https://ponyfoo.com/articles/es6

https://ponyfoo.com/articles/es6

READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT)

http://exploringjs.com/es6/

• One hour free test server • Authenticate with Google,

Facebook or Microsoft • Keep your code by forking or

downloading it

TRY NODE AND EXPRESS…

https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/

EVERYBODY DUCK!LIVE DEMO…

PLEASE, GO AND MAKE A BETTER WEB!

• Analyse the speed of your products and improve it by simplifying them: webpagetest.org

• Stop trying to guess what browser is in use and assume unknown browsers to be good, not terrible.

• Keep up to date with what browsers can do: caniuse.com and use it!

• File bugs, report issues, talk to us!

http://webpagetest.org

http://caniuse.com

JAVASCRIPT IS STILL THE SIMPLEST, MOST VERSATILE AND INVITING LANGUAGE OUT THERE…

LET’S TALK MORE HUMAN

https://github.com/HugoGiraudel/SJSJ

YOU MAKE THE WEB, LET US HEAR WHAT YOU NEED…

THANKS! CHRIS HEILMANN

@CODEPO8

CHRISTIANHEILMANN.COM

http://christianheilmann.com