'

A Call to JS Developers: Just Start Building

Понравилась презентация – покажи это...





Слайд 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


Слайд 1

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


Слайд 2

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


Слайд 3

WE MOVE FAST AND RUN IN CIRCLES https://www.flickr.com/photos/56218409@N03/19216130670


Слайд 4

We’re all about the Moore…


Слайд 5

WE WORK WITH AMAZING HARDWARE…


Слайд 6

WE WORK WITH GREAT CONNECTIVITY…


Слайд 7

WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/31317832@N05/4326186183


Слайд 8

WE WORK WITH AMAZING BROWSERS


Слайд 9

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


Слайд 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)


Слайд 11

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


Слайд 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


Слайд 13

WE LIVE IN A HYPE FUELLED ENVIRONMENT https://www.flickr.com/photos/38497891@N04/4151566643


Слайд 14

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


Слайд 15

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


Слайд 16


Слайд 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


Слайд 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


Слайд 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.


Слайд 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


Слайд 21

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


Слайд 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


Слайд 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


Слайд 24

WHAT DOES THIS CODE DO?


Слайд 25

JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT! https://www.flickr.com/photos/73645804@N00/2473052504


Слайд 26

THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW… https://www.flickr.com/photos/27429206@N02/4290544535


Слайд 27

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


Слайд 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/91183364@N08/13916636762


Слайд 29

WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…


Слайд 30

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


Слайд 31


Слайд 32

THE VICIOUS INNOVATION CYCLE…


Слайд 33

NSFW


Слайд 34

WE SHOULD WORRY A LOT MORE ABOUT COST… https://www.flickr.com/photos/56844027@N05/5634567317


Слайд 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.


Слайд 36

DEVELOPER CONVENIENCE, PRODUCTIVITY & EFFICIENCY… #FFD700


Слайд 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


Слайд 38


Слайд 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


Слайд 40

WAITING FOR NPM TO FINISH INSTALLING…


Слайд 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


Слайд 42

CONTROL OVER WHAT IS HAPPENING IN THE BROWSER #FFD700


Слайд 43

REPLACING BUILT-IN FUNCTIONALITY FOR THE SAKE OF CONTROL…


Слайд 44

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


Слайд 45

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


Слайд 46

THE DOM IS SLOW?


Слайд 47


Слайд 48


Слайд 49


Слайд 50

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


Слайд 51


Слайд 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


Слайд 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.


Слайд 54

WE ARE RUNNING OUT OF BOTH EXCUSES…


Слайд 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


Слайд 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


Слайд 57

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


Слайд 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/


Слайд 59

WITH ES6 WE HAVE A CLEAN NEW SLATE…


Слайд 60

this IS COMPLICATED *** ***


Слайд 61

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


Слайд 62

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


Слайд 63

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


Слайд 64

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


Слайд 65

SAVING KEYSTROKES


Слайд 66

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


Слайд 67

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


Слайд 68

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


Слайд 69

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


Слайд 70

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


Слайд 71

ES2015 QUIZ TIME…


Слайд 72

UTF-8, BABY…


Слайд 73

THE NEW BASELINE IS HERE!


Слайд 74

THE NEW BASELINE IS HERE!


Слайд 75

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


Слайд 76

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


Слайд 77

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


Слайд 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


Слайд 79

TIME TO CALM DOWN AND CONCENTRATE ON THE GOOD THINGS… https://www.flickr.com/photos/48066826@N02/5034289376


Слайд 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/


Слайд 81

COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…


Слайд 82

MONOPOLIES FALL AND SURPRISES HAPPEN…


Слайд 83

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


Слайд 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/


Слайд 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


Слайд 86

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


Слайд 87

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


Слайд 88

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


Слайд 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/


Слайд 90

EVERYBODY DUCK! LIVE DEMO…


Слайд 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!


Слайд 92

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


Слайд 93

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


Слайд 94

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


Слайд 95


Слайд 96

THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM


Слайд 97


×

HTML:





Ссылка: