Successfully reported this slideshow.
Your SlideShare is downloading. ×

Let’s learn how to use JavaScript responsibly and stay up-to-date.

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

YouTube videos are no longer supported on SlideShare

View original on YouTube

LET’S LEARN
HOW TO USE
JAVASCRIPT
RESPONSIBLY
AND STAY
UP-‐TO-‐DATE.
CHRIS HEILMANN @CODEPO8 MICROSOFT SINGAPORE MEETUP -‐...
TODAY, I WANT TO
TALK TO YOU ABOUT
JAVASCRIPT…

Check these out next

1 of 63 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Let’s learn how to use JavaScript responsibly and stay up-to-date. (20)

Advertisement

More from Christian Heilmann (20)

Recently uploaded (20)

Advertisement

Let’s learn how to use JavaScript responsibly and stay up-to-date.

  1. 1. LET’S LEARN HOW TO USE JAVASCRIPT RESPONSIBLY AND STAY UP-‐TO-‐DATE. CHRIS HEILMANN @CODEPO8 MICROSOFT SINGAPORE MEETUP -‐ NOVEMBER 2015
  2. 2. TODAY, I WANT TO TALK TO YOU ABOUT JAVASCRIPT…
  3. 3. AND WHY I AM EXCITED ABOUT IT…
  4. 4. JAVASCRIPT IS… • An incredibly versatile language • Available web-‐wide and across many platforms • Toolset independent • Forgiving and inviting
  5. 5. 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 :)﴿
  6. 6. JAVASCRIPT IS IN SUPER HIGH DEMAND! https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
  7. 7. A QUICK REMINDER HOW JAVASCRIPT IS PRETTY MUCH THE ODD ONE OUT…
  8. 8. JAVASCRIPT IS TECHNICALLY NOT A GREAT LANGUAGE FOR THE WEB…
  9. 9. HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT. https://adactio.com/journal/4272
  10. 10. JAVASCRIPT ISN’T FAULT TOLERANT.
  11. 11. ONE LITTLE MISTAKE, AND NOTHING SHOWS UP.
  12. 12. THANKFULLY ONLY PARANOID FREAKS TURN OFF JAVASCRIPT!
  13. 13. http://kryogenix.org/code/browser/everyonehasjs.html WELL, NOT QUITE…
  14. 14. SOUNDS FAMILIAR?
  15. 15. JAVASCRIPT ABUSE IS RAMPANT…
  16. 16. 3MB OF BLOCKING JAVASCRIPT BEFORE THE FIRST WORD APPEARS ON THE PAGE!
  17. 17. 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
  18. 18. 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.
  19. 19. 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 others and make them smaller • And each of those comes with a “don’t use in production” label.
  20. 20. MY GOAL FOR TODAY: LET’S LEARN HOW TO USE JAVASCRIPT RESPONSIBLY AND STAY UP-‐TO-‐DATE.
  21. 21. LET’S FIX THINGS AT THE SOURCE: 1: THE JAVASCRIPT LEARNING PROCESS
  22. 22. LEARNING JAVASCRIPT SEEMS UNFASHIONABLE… • 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 • Go back to step 1
  23. 23. I CALL THIS THE FULL STACK OVERFLOW DEVELOPER https://www.christianheilmann.com/2015/07/17/the-‐full-‐stackoverflow-‐developer/
  24. 24. 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.
  25. 25. LET’S FIX THINGS AT THE SOURCE: 2)﴿ REMOVING SCAPEGOATS: IE IS DEAD!
  26. 26. REMOVING THE LARGEST STUMBLING BLOCK OF THE WEB!
  27. 27. COMMUNICATION IS OPEN AND READY TO ANSWER YOUR PROBLEMS! @MSEDGEDEV uservoice.modern.ie
 status.modern.ie
 remote.modern.ie
 insider.windows.com
  28. 28. MOVING FROM TRIDENT TO EDGEHTML…
  29. 29. 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
  30. 30. SCAN AND REMOVE! http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
  31. 31. NO MORE PLUGINS, THE BROWSER IS THE RUNTIME…
  32. 32. LET’S FIX THINGS AT THE SOURCE: 3)﴿ STOP BREAKING THINGS!
  33. 33. WE NEEDED TO KEEP IE11 IN WINDOWS 10 AS TOO MANY SITES RELIED ON ITS NON-‐ STANDARD CODE.
  34. 34. BUILDING A NEW BROWSER TAUGHT US LOTS…
  35. 35. MOVING FROM TRIDENT TO EDGEHTML…
  36. 36. YOU CAN’T FIX WHAT YOU DON’T GET… https://twitter.com/Caged/status/590602214021922818
  37. 37. USER AGENT SNIFFING…
  38. 38. USER AGENT SNIFFING… PARSING THE “PACK OF LIES”
  39. 39. 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?
  40. 40. 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.
  41. 41. 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.
  42. 42. IF YOU THINK JAVASCRIPT, THINK ESCALATORS.
  43. 43. LET’S FIX THINGS AT THE SOURCE: 4: REMOVING SCAPEGOATS: TOOLING
  44. 44. 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)﴿.
  45. 45. • 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!
  46. 46. • 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/
  47. 47. • 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/
  48. 48. EVERYBODY DUCK! LIVE DEMO…
  49. 49. LET’S FIX THINGS AT THE SOURCE: 5)﴿ REMOVING SCAPEGOATS: EVOLVE JS
  50. 50. JAVASCRIPT HAS GROWN UP. IT IS AN NOW AN EVERGREEN LANGUAGE WE CALL ECMASCRIPT (﴾6, 2015…)﴿
  51. 51. http://kangax.github.io/compat-table/es6/ SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿
  52. 52. ONE SOLUTION: TRANSPILING INTO ES5… https://babeljs.io
  53. 53. ANOTHER SOLUTION: SUPERSET LANGUAGES THAT CONVERT INTO JS… http://typescriptlang.org/
  54. 54. https://featuretests.io/ WHAT ABOUT FEATURE TESTING?
  55. 55. SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-‐es2015/
  56. 56. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
  57. 57. 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.
  58. 58. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×