a call to js developers - let’s stop trying to impress each other and start building
Post on 16-Apr-2017
2.975 Views
Preview:
TRANSCRIPT
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
https://www.flickr.com/photos/31317832@N05/4326186183
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…
https://www.flickr.com/photos/38497891@N04/4151566643
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
TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
🐴💩
TIME TO GET REAL…
USOUR
ASSUMED AUDIENCE
OUR AUDIENCE
TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
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
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?
https://www.flickr.com/photos/73645804@N00/2473052504
JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!
https://www.flickr.com/photos/27429206@N02/4290544535
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.
https://www.flickr.com/photos/91183364@N08/13916636762
“
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…
NSFW
https://www.flickr.com/photos/56844027@N05/5634567317
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
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
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/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
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
https://maxwellito.github.io/es6-quiz-slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-quiz-slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-quiz-slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-quiz-slides
ES2015 QUIZ TIME…
ES2015 QUIZ TIME…
UTF-8, BABY…
THE NEW BASELINE IS HERE!
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
NOT ABOUT CUTTHROAT COMPETITION AND SELF-INFLICTED COMPLEXITY…
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…
https://www.flickr.com/photos/48066826@N02/5034289376
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://featuretests.io/
FEATURE TESTING WHAT YOU NEED…
EXCELLENT RESOURCES ARE FREE AND ONLINE…
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!
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…
top related