Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quo vadis, JavaScript? Devday.pl keynote

3,644 views

Published on

I used fonts and colours and stuff. It was a good day. I also stayed in the lines!

Video: https://youtu.be/GvT5s1HQVRg

Published in: Education
  • Be the first to comment

Quo vadis, JavaScript? Devday.pl keynote

  1. 1. QUO VADIS, JAVASCRIPT? CHRIS HEILMANN @CODEPO8 DEVDAY.PL 2015
  2. 2. Johann Wolfgang von Goethe 1749 – 1832 Humans shall strive for nothing less but excellence, for this is what gives them the most satisfaction. That’s why relying on automatic semicolon insertion is not an option. “
  3. 3. TODAY, I WANT TO TALK TO YOU ABOUT JAVASCRIPT…
  4. 4. AND WHY I AM EXCITED ABOUT IT…
  5. 5. JAVASCRIPT IS… • An incredibly versatile language • Available web-‐wide and across many platforms • Toolset independent • Forgiving and inviting
  6. 6. YOU CAN USE JAVASCRIPT • In browsers on the web • On the server • In applications • To access services • As a data format (﴾JSON)﴿ • On hardware • … your turn, surprise me :)﴿
  7. 7. JAVASCRIPT IS IN SUPER HIGH DEMAND! https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
  8. 8. BLANKET STATEMENT: YOU WILL NEED TO DEAL WITH JAVASCRIPT SOONER OR LATER.
  9. 9. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
  10. 10. THE FLEXIBILITY OF JAVASCRIPT MAKES ALL OF THIS POSSIBLE…
  11. 11. SOUNDS GREAT! IF YOU KNOW JAVASCRIPT… AND IT IS AVAILABLE…
  12. 12. A QUICK REMINDER HOW JAVASCRIPT IS PRETTY MUCH THE ODD ONE OUT…
  13. 13. JAVASCRIPT IS TECHNICALLY NOT A GREAT LANGUAGE FOR THE WEB…
  14. 14. HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT. https://adactio.com/journal/4272
  15. 15. JAVASCRIPT ISN’T FAULT TOLERANT.
  16. 16. ONE LITTLE MISTAKE, AND NOTHING SHOWS UP.
  17. 17. THANKFULLY ONLY PARANOID FREAKS TURN OFF JAVASCRIPT!
  18. 18. http://kryogenix.org/code/browser/everyonehasjs.html WELL, NOT QUITE…
  19. 19. SOUNDS FAMILIAR?
  20. 20. JAVASCRIPT ABUSE IS RAMPANT…
  21. 21. 3MB OF BLOCKING JAVASCRIPT BEFORE THE FIRST WORD APPEARS ON THE PAGE!
  22. 22. WHY DOES THIS HAPPEN?
  23. 23. OF COURSE, I HADE TO ANALYSE…
  24. 24. THIS IS ONE BIG ISSUE WE HAVE IN THE WEB COMMUNITY… • 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
  25. 25. 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.
  26. 26. BUILDING LIBRARIES AND FRAMEWORKS THAT MAGICALLY FIX THINGS HAS BECOME FASHIONABLE… • We work around browser issues • We make web standards of tomorrow work today. • We build solutions to clean up our others and make them smaller • And each of those comes with a “don’t use in production” label.
  27. 27. SIMPLY BECAUSE YOU CAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN YOU SHOULD!
  28. 28. MY GOAL FOR TODAY: LET’S LEARN HOW TO USE JAVASCRIPT RESPONSIBLY AND STAY UP-‐TO-‐DATE.
  29. 29. LET’S FIX THINGS AT THE SOURCE: 1: THE JAVASCRIPT LEARNING PROCESS
  30. 30. 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
  31. 31. 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.
  32. 32. I CALL THIS THE FULL STACK OVERFLOW DEVELOPER https://www.christianheilmann.com/2015/07/17/the-‐full-‐stackoverflow-‐developer/
  33. 33. YOU ARE BETTER THAN THAT! • There is no lack of free online resources for learning JavaScript • Watch talks, do online courses, download and read free books. • Learn by doing and playing with the language -‐ if you don’t know it, analyse it. • Share your knowledge, when you teach you end up learning.
  34. 34. LET’S FIX THINGS AT THE SOURCE: 2: REMOVING SCAPEGOATS: TOOLING
  35. 35. OUR DEVELOPMENT ENVIRONMENT IS INCREDIBLE! • Developer tools in browsers are outstanding and give us incredible insights. • We can debug across devices and even convert HTML5 to native apps for closed systems (﴾manifold.js/ vorlon.js)﴿.
  36. 36. • Editors have linting, build integration, and some are even written in JavaScript and run in the browser. • We share code on GitHub and help debug problems using JSFiddle, JSBin and others… OUR DEVELOPMENT ENVIRONMENT IS INCREDIBLE!
  37. 37. LET’S FIX THINGS AT THE SOURCE: 3)﴿ REMOVING SCAPEGOATS: IE IS DEAD!
  38. 38. REMOVING THE LARGEST STUMBLING BLOCK OF THE WEB!
  39. 39. COMMUNICATION IS OPEN AND READY TO ANSWER YOUR PROBLEMS! @MSEDGEDEV uservoice.modern.ie
 status.modern.ie
 remote.modern.ie
 insider.windows.com
  40. 40. MOVING FROM TRIDENT TO EDGEHTML…
  41. 41. ALL THE NON-‐ STANDARD CODE IS GONE, STOP WORRYING ABOUT AND ABOVE ALL SUPPORTING IT! ✘ VML ✘ attachEvent(﴾)﴿ ✘ currentStyle ✘ X-‐UA-‐Compatible (﴾render modes)﴿ ✘ IE Layout Quirks ✘ VBScript ✘ Conditional Comments ✘ MS-‐Prefixed Events
  42. 42. SCAN AND REMOVE! http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
  43. 43. NO MORE PLUGINS, THE BROWSER IS THE RUNTIME…
  44. 44. LET’S FIX THINGS AT THE SOURCE: 4)﴿ STOP BREAKING THINGS!
  45. 45. WE NEEDED TO KEEP IE11 IN WINDOWS 10 AS TOO MANY SITES RELIED ON ITS NON-‐ STANDARD CODE.
  46. 46. BUILDING A NEW BROWSER TAUGHT US LOTS…
  47. 47. MOVING FROM TRIDENT TO EDGEHTML…
  48. 48. YOU CAN’T FIX WHAT YOU DON’T GET… https://twitter.com/Caged/status/590602214021922818
  49. 49. USER AGENT SNIFFING…
  50. 50. USER AGENT SNIFFING… PARSING THE “PACK OF LIES”
  51. 51. LET’S DETECT MOBILE! window.mobileCheck  =  function()  {    var  check  =  false;   (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec| hiptop|iemobile|ip(hone|od)|iris|kindle|lge  |maemo|midp|mmp|mobile.+firefox|netfront|opera  m(ob|in)i| palm(  os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone| wap|windows  (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-­‐6]i|770s|802s|a  wa|abac| ac(er|oo|s-­‐)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-­‐m|r  |s  )| avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-­‐(n|u)|c55/|capi|ccwa|cdm-­‐|cell|chtm|cldc|cmd -­‐|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-­‐s|devi|dica|dmob|do(c|p)o|ds(12|-­‐d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez([4-­‐7]0|os|wa|ze)|fetc|fly(-­‐|_)|g1  u|g560|gene|gf-­‐5|g-­‐mo|go(.w|od)|gr(ad|un)|haie|hcit|hd -­‐(m|p|t)|hei-­‐|hi(pt|ta)|hp(  i|ip)|hs-­‐c|ht(c(-­‐|  |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-­‐(20|go|ma)|i230|iac(  | -­‐|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(  |/)|klon|kpt  |kwc -­‐|kyo(c|k)|le(no|xi)|lg(  g|/(k|l|u)|50|54|-­‐[a-­‐w])|libw|lynx|m1-­‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21| ca)|m-­‐cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-­‐|  |o|v)|zz)|mt(50|p1|v  )|mwbp|mywa|n10[0-­‐2]| n20[2-­‐3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-­‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran| owg1|p800|pan(a|d|t)|pdxg|pg(13|-­‐([1-­‐8]|c))|phil|pire|pl(ay|uc)|pn-­‐2|po(ck|rt|se)|prox|psio|pt-­‐g|qa-­‐ a|qc(07|12|21|32|60|-­‐[2-­‐7]|i-­‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h -­‐|oo|p-­‐)|sdk/|se(c(-­‐|0|1)|47|mc|nd|ri)|sgh-­‐|shar|sie(-­‐|m)|sk-­‐0|sl(45|id)|sm(al|ar|b3|it|t5)| so(ft|ny)|sp(01|h-­‐|v-­‐|v  )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-­‐|tdg-­‐|tel(i|m)|tim-­‐|t-­‐mo| to(pl|sh)|ts(70|m-­‐|m3|m5)|tx-­‐9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-­‐3]|-­‐v)|vm40| voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-­‐|  )|webc|whit|wi(g  |nc|nw)|wmlb|wonu|x700|yas-­‐|your| zeto|zte-­‐/i.test(a.substr(0,4)))check  =  true})(navigator.userAgent||navigator.vendor||window.opera);   return  check;  }   WHAT CAN GO WRONG?
  52. 52. STOP DOING THAT! ✘ You can’t safely detect a browser. ✘ You fix your code in time and environment, you might as well code native. ✘ If you really need to fix an issue with a specific browser, include agent and version number.
  53. 53. KEEP YOUR HELPER TOOLS UP TO DATE! ✘ Outdated libraries forced us to optimise old practices in the JS engine ✘ Shoddily written polyfills broke new JavaScript functionality and forced us to rename new methods (﴾array.contains, f.e.)﴿ ✘ Old libraries do browsers sniffing and apply old syntax of now standardised functionality.
  54. 54. IF YOU THINK JAVASCRIPT, THINK ESCALATORS.
  55. 55. CAPABILITY TESTING MEANS YOU NEVER DELIVER BROKEN EXPERIENCES.
  56. 56. “CUTTING THE MUSTARD” https://justmarkup.com/log/2015/02/26/cut-‐the-‐mustard-‐revisited/
  57. 57. SETTING YOUR BASELINE…
  58. 58. EXTENDING THE BASELINE
  59. 59. LET’S FIX THINGS AT THE SOURCE: 5)﴿ REMOVING SCAPEGOATS: EVOLVE JS
  60. 60. JAVASCRIPT HAS GROWN UP. IT IS AN NOW AN EVERGREEN LANGUAGE WE CALL ECMASCRIPT (﴾6, 2015…)﴿
  61. 61. • Arrow functions as a short-hand version of an anonymous function. • Block-level scope using let instead of var makes variables scoped to a block (if, for, while, etc.) • Classes to encapsulate and extend code. • Constants using the const keyword. • Default parameters for functions like foo(bar = 3, baz = 2) • Destructuring to assign values from arrays or objects into variables. • Generators that create iterators using function* and the yield keyword. • Map, a Dictionary type object that can be used to store key/value pairs. and Set as a collection object to store a list of data values. • Modules as a way of organizing and loading code. • Promises for async operations avoiding callback hell • Rest parameters instead of using arguments to access functions arguments. • Template Strings to build up string values including multi-line strings. ES6 COMES WITH SO MUCH GOODNESS, TECHNICALLY IT HAS TO BE FATTENING…
  62. 62. Library Builders map, set & weakmap __proto__ Proxies Symbols Sub7classable built7ins Scalable Apps let, const & block7 scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
  63. 63. http://kangax.github.io/compat-table/es6/ SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿
  64. 64. THE PROBLEM: FOR NON-‐SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
  65. 65. THE SOLUTION: TRANSPILING INTO ES5… https://babeljs.io
  66. 66. ✘ Extra step between writing code and running it in the browser. ✘ We don’t run or debug the code we write. ✘ We’re hope the transpiler creates efficient code ✘ We create a lot of code ✘ Browsers that support ES6 will never get any. THE PROBLEMS WITH TRANSPILING:
  67. 67. https://featuretests.io/ WHAT ABOUT FEATURE TESTING?
  68. 68. ✘ It is an extra step that might be costly ✘ We can only do it client-‐side ✘ We can get false positives -‐ experimental features might be implemented in a rudimentary fashion ✘ We have to keep your feature tests up-‐to-‐date and extend them as needed -‐ support for one feature doesn’t mean support for another. THE PROBLEMS WITH FEATURE TESTING:
  69. 69. YOU CAN USE AN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
  70. 70. ✘ They makes us dependent on that abstraction ✘ We can’t control possible version clashes in the abstraction layer ✘ Maintainers need to know the abstraction instead of the standard of ES6 PROBLEMS WITH ANY ABSTRACTION
  71. 71. THE ES6 CONUNDRUM: • We can’t use it safely in the wild • We can use TypeScript or transpile it • We can feature test for it, but that can get complex quickly • Browsers that support it, will not get any ES6 that way (﴾but can use it internally)﴿ • The performance is bad right now (﴾which is a normal thing)﴿. To improve this, we need ES6 to be used in the wild…
  72. 72. THAT SAID… IF YOU USE JAVASCRIPT IN AN ENVIRONMENT YOU CONTROL, PLEASE USE ES6 AND FEED BACK YOUR EXPERIENCES TO THE TC93!
  73. 73. HELP ES6 BY LOOKING AT ITS UNIT TESTS… https://github.com/tc39/test262 http://test262.ecmascript.org/
  74. 74. YOU CAN LEARN AND FIX ISSUES. http://es6katas.org
  75. 75. SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-‐es2015/
  76. 76. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
  77. 77. JAVASCRIPT HAD A BUMPY RIDE, AND MANY PREJUDICES PERSIST. OPEN YOUR MIND AND LEARN HOW FAR IT IS COME AND WHAT IT CAN DO FOR YOU.
  78. 78. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×