A Call to JS Developers: Just Start Building


The Presentation inside:

Slide 0

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


Slide 1

Moore’s Law: (paraphrased) Computers get faster, better, cheaper and are more available every two years.


Slide 2

May’s Law: (paraphrased) Software efficiency halves every 18 months, compensating Moore’s law.


Slide 3

WE MOVE FAST AND RUN IN CIRCLES https://www.flickr.com/photos/[email protected]/19216130670


Slide 4

We’re all about the Moore…


Slide 5

WE WORK WITH AMAZING HARDWARE…


Slide 6

WE WORK WITH GREAT CONNECTIVITY…


Slide 7

WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/[email protected]/4326186183


Slide 8

WE WORK WITH AMAZING BROWSERS


Slide 9

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


Slide 10

• • Fix minor mistakes in our code • BROWSER DO AN INCREDIBLE AMOUNT OF WORK FOR US… Display of all kind of media content 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)


Slide 11

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


Slide 12

Instead of celebrating how lucky we are, we complain… 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


Slide 13

WE LIVE IN A HYPE FUELLED ENVIRONMENT https://www.flickr.com/photos/[email protected]/4151566643


Slide 14

WE KEEP PROJECTING… US TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES… OUR AUDIENCE


Slide 15

OR, ACTUALLY… US TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES… OUR AUDIENCE


Slide 16


Slide 17

TIME TO GET REAL… OUR AUDIENCE US TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES… OUR ASSUMED AUDIENCE


Slide 18

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


Slide 19

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.


Slide 20

Bruce Lawson at SOTB 2015 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


Slide 21

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


Slide 22

• • 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


Slide 23

• 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


Slide 24

WHAT DOES THIS CODE DO?


Slide 25

JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT! https://www.flickr.com/photos/[email protected]/2473052504


Slide 26

THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW… https://www.flickr.com/photos/[email protected]/4290544535


Slide 27

I CURRENTLY WORK WITH A CLEANUP CREW… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-code-scan


Slide 28

“ 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/[email protected]/13916636762


Slide 29

WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…


Slide 30

• WE’RE GOING FULL SPEED ON INNOVATION… Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps


Slide 31


Slide 32

THE VICIOUS INNOVATION CYCLE…


Slide 33

NSFW


Slide 34

WE SHOULD WORRY A LOT MORE ABOUT COST… https://www.flickr.com/photos/[email protected]/5634567317


Slide 35

• 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.


Slide 36

DEVELOPER CONVENIENCE, PRODUCTIVITY & EFFICIENCY… #FFD700


Slide 37

• • COST FOR DEVELOPERS… Learning new frameworks Re-learning frameworks • Cutting down on possible hires/ adding to onboarding time • Debugging frameworks • Setting up developer environments


Slide 38


Slide 39

Stephan Bönnemann (JSConfEU 2015): Dependency Hell Just Froze Over IS DEPENDENCY HELL A PROBLEM OF THE TOO PRIVILEGED? https://www.youtube.com/watch?v=PA139CERNbc


Slide 40

WAITING FOR NPM TO FINISH INSTALLING…


Slide 41

• 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


Slide 42

CONTROL OVER WHAT IS HAPPENING IN THE BROWSER #FFD700


Slide 43

REPLACING BUILT-IN FUNCTIONALITY FOR THE SAKE OF CONTROL…


Slide 44

IF WE BUILD CLIENTSIDE SOLUTIONS WE DON’T CONTROL WHERE OUR CODE RUNS.


Slide 45

HOMEWORK / SNEAK PREVIEW OF GREAT INSIGHTS… PAUL LEWIS @AEROTWIST


Slide 46

THE DOM IS SLOW?


Slide 47


Slide 48


Slide 49


Slide 50

ANALYSING BROWSER RESULTS… npm install -g bigrig github.com/GoogleChrome/big-rig github.com/GoogleChrome/node-big-rig


Slide 51


Slide 52

• 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


Slide 53

• • 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.


Slide 54

WE ARE RUNNING OUT OF BOTH EXCUSES…


Slide 55

JAVASCRIPT EVOLVES… 1997 ECMAScript1 1998 ECMAScript2 1999 ECMAScript3 1997 2009 ECMAScript5 2015 ECMAScript6 2005 - 2007 ECMAScript4 - Abandoned 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2015


Slide 56

JAVASCRIPT GREW UP … • 5+ years since ES5 ratification • Significant changes in 15+ years • Backwards compatible • Ratified June 2015 1997 ECMAScript1 1998 ECMAScript2 1999 ECMAScript3 1997 2009 ECMAScript5 2015 ECMAScript6 2005 - 2007 ECMAScript4 - Abandoned 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2015 http://www.ecma-international.org/publications/standards/Ecma-262.htm


Slide 57

SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9)) http://kangax.github.io/compat-table/es6/


Slide 58

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/


Slide 59

WITH ES6 WE HAVE A CLEAN NEW SLATE…


Slide 60

this IS COMPLICATED *** ***


Slide 61

this IS COMPLICATED *** *** blog.getify.com/arrow-this/


Slide 62

this IS COMPLICATED *** *** blog.getify.com/arrow-this/


Slide 63

this IS COMPLICATED *** *** blog.getify.com/arrow-this/


Slide 64

this IS COMPLICATED *** *** blog.getify.com/arrow-this/


Slide 65

SAVING KEYSTROKES


Slide 66

BURN THE WITCH! http://www.bennadel.com/blog/2949-var-for-life---why-let-and-const-dont-interest-me-in-javascript.htm


Slide 67

ES2015 QUIZ TIME… https://maxwellito.github.io/es6-quiz-slides


Slide 68

ES2015 QUIZ TIME… https://maxwellito.github.io/es6-quiz-slides


Slide 69

ES2015 QUIZ TIME… https://maxwellito.github.io/es6-quiz-slides


Slide 70

ES2015 QUIZ TIME… https://maxwellito.github.io/es6-quiz-slides


Slide 71

ES2015 QUIZ TIME…


Slide 72

UTF-8, BABY…


Slide 73

THE NEW BASELINE IS HERE!


Slide 74

THE NEW BASELINE IS HERE!


Slide 75

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


Slide 76

FREE TIME PROJECTS USED TO BE ABOUT FUN AND EXPERIMENTATION… http://sephie-monster.deviantart.com/art/Mythbusters-153616339


Slide 77

NOT ABOUT CUTTHROAT COMPETITION AND SELF-INFLICTED COMPLEXITY… https://egghead.io/series/how-to-write-an-open-source-javascript-library


Slide 78

JAVASCRIPT CATERS TO DIFFERENT AUDIENCES… Syntactic Sugar Scalable Apps Library Builders Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs let, const & block7 scoped bindings Classes Promises Iterators Generators Typed arrays Modules map, set & weakmap __proto__ Proxies Symbols Sub7classable built7ins


Slide 79

TIME TO CALM DOWN AND CONCENTRATE ON THE GOOD THINGS… https://www.flickr.com/photos/[email protected]/5034289376


Slide 80

BETTER BROWSERS ALLOW US TO WRITE SIMPLER HELPER LIBRARIES… http://lea.verou.me/2015/12/introducing-bliss-a-3kb-library-for-happier-vanilla-js/


Slide 81

COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…


Slide 82

MONOPOLIES FALL AND SURPRISES HAPPEN…


Slide 83

ES6 GOODNESS FOR EVERYBODY! https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/


Slide 84

VISUAL STUDIO CODE • Open Source and cross platform • Written in JavaScript • Includes debugging and linting - learn your mistakes while you write code • GitHub integration https://code.visualstudio.com/


Slide 85

TRANSPILATING FOR THE WEB OF YESTERDAY… • • • 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


Slide 86

FEATURE TESTING WHAT YOU NEED… https://featuretests.io/


Slide 87

EXCELLENT RESOURCES ARE FREE AND ONLINE… https://ponyfoo.com/articles/es6


Slide 88

READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT) http://exploringjs.com/es6/


Slide 89

TRY NODE AND EXPRESS… • One hour free test server • Authenticate with Google, Facebook or Microsoft • Keep your code by forking or downloading it https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/


Slide 90

EVERYBODY DUCK! LIVE DEMO…


Slide 91

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!


Slide 92

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


Slide 93

LET’S TALK MORE HUMAN https://github.com/HugoGiraudel/SJSJ


Slide 94

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


Slide 95


Slide 96

THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM


Slide 97


×

HTML:





Ссылка: