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.
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…
AND WHY I AM
EXCITED ABOUT IT…
JAVASCRIPT IS…
• An incredibly versatile
language
• Available web-‐wide and across
many platforms
• Toolset independent
• ...
YOU CAN USE
JAVASCRIPT
• In browsers on the web
• On the server
• In applications
• To access services
• As a data format ...
JAVASCRIPT IS IN SUPER HIGH DEMAND!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
A QUICK REMINDER
HOW JAVASCRIPT IS
PRETTY MUCH THE
ODD ONE OUT…
JAVASCRIPT IS
TECHNICALLY NOT A
GREAT LANGUAGE
FOR THE WEB…
HTML AND CSS ARE
DESIGNED TO BE
FAULT TOLERANT.
https://adactio.com/journal/4272
JAVASCRIPT ISN’T
FAULT TOLERANT.
ONE LITTLE MISTAKE,
AND NOTHING
SHOWS UP.
THANKFULLY ONLY
PARANOID FREAKS
TURN OFF JAVASCRIPT!
http://kryogenix.org/code/browser/everyonehasjs.html
WELL, NOT QUITE…
SOUNDS
FAMILIAR?
JAVASCRIPT ABUSE IS
RAMPANT…
3MB OF BLOCKING
JAVASCRIPT BEFORE
THE FIRST WORD
APPEARS ON THE
PAGE!
THIS IS ONE BIG ISSUE
WE HAVE IN THE WEB
COMMUNITY…
• Javascript is too powerful for its
own good.
• Almost everything tha...
WE USE CODE WE
DON’T UNDERSTAND
TO FIX ISSUES WE
DON’T HAVE…
• Learning libraries and
frameworks beyond “hello
world” cost...
BUILDING LIBRARIES
AND FRAMEWORKS
THAT MAGICALLY FIX
THINGS HAS BECOME
FASHIONABLE…
• We work around browser issues
• We m...
MY GOAL FOR TODAY:
LET’S LEARN HOW TO USE JAVASCRIPT
RESPONSIBLY AND STAY UP-‐TO-‐DATE.
LET’S FIX THINGS AT THE SOURCE:
1: THE JAVASCRIPT LEARNING PROCESS
LEARNING
JAVASCRIPT SEEMS
UNFASHIONABLE…
• Search for a solution on
Stackoverflow
• Copy and paste the bits that
look like...
I CALL THIS THE FULL
STACK OVERFLOW
DEVELOPER
https://www.christianheilmann.com/2015/07/17/the-‐full-‐stackoverflow-‐devel...
YOU ARE BETTER
THAN THAT!
• There is no lack of free online
resources for learning
JavaScript
• Watch talks, do online cou...
LET’S FIX THINGS AT THE SOURCE:
2)﴿ REMOVING SCAPEGOATS: IE IS DEAD!
REMOVING THE
LARGEST STUMBLING
BLOCK OF THE WEB!
COMMUNICATION IS
OPEN AND READY TO
ANSWER YOUR
PROBLEMS!
@MSEDGEDEV
uservoice.modern.ie

status.modern.ie

remote.modern.i...
MOVING FROM TRIDENT TO EDGEHTML…
ALL THE NON-‐
STANDARD CODE IS
GONE, STOP
WORRYING ABOUT
AND ABOVE ALL
SUPPORTING IT!
✘ VML
✘ attachEvent(﴾)﴿
✘ currentSty...
SCAN AND REMOVE!
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code-‐scan
NO MORE PLUGINS,
THE BROWSER IS
THE RUNTIME…
LET’S FIX THINGS AT THE SOURCE:
3)﴿ STOP BREAKING THINGS!
WE NEEDED TO KEEP
IE11 IN WINDOWS 10
AS TOO MANY SITES
RELIED ON ITS NON-‐
STANDARD CODE.
BUILDING A NEW
BROWSER TAUGHT US
LOTS…
MOVING FROM TRIDENT TO EDGEHTML…
YOU CAN’T FIX WHAT YOU DON’T GET…
https://twitter.com/Caged/status/590602214021922818
USER AGENT
SNIFFING…
USER AGENT
SNIFFING…
PARSING THE “PACK OF LIES”
LET’S DETECT MOBILE!
window.mobileCheck	
  =	
  function()	
  {	
  
	
  var	
  check	
  =	
  false;	
  
(function(a){if(/(...
STOP DOING THAT!
✘ You can’t safely detect a browser.
✘ You fix your code in time and
environment, you might as well code
...
KEEP YOUR HELPER
TOOLS UP TO DATE!
✘ Outdated libraries forced us to
optimise old practices in the JS engine
✘ Shoddily wr...
IF YOU THINK
JAVASCRIPT, THINK
ESCALATORS.
LET’S FIX THINGS AT THE SOURCE:
4: REMOVING SCAPEGOATS: TOOLING
OUR DEVELOPMENT
ENVIRONMENT IS
INCREDIBLE!
• Developer tools in browsers are
outstanding and give us incredible
insights.
...
• Editors have linting, build integration,
and some are even written in
JavaScript and run in the browser.
• We share code...
• Open Source and cross platform
• Written in JavaScript
• Includes debugging and linting -‐
learn your mistakes while you...
• One hour free test server
• Authenticate with Google,
Facebook or Microsoft
• Keep your code by forking or
downloading i...
EVERYBODY DUCK!
LIVE DEMO…
LET’S FIX THINGS AT THE SOURCE:
5)﴿ REMOVING SCAPEGOATS: EVOLVE JS
JAVASCRIPT HAS
GROWN UP.
IT IS AN NOW AN
EVERGREEN LANGUAGE
WE CALL ECMASCRIPT
(﴾6, 2015…)﴿
http://kangax.github.io/compat-table/es6/
SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿
ONE SOLUTION:
TRANSPILING INTO
ES5…
https://babeljs.io
ANOTHER
SOLUTION:
SUPERSET
LANGUAGES THAT
CONVERT INTO JS…
http://typescriptlang.org/
https://featuretests.io/
WHAT ABOUT FEATURE TESTING?
SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-‐es2015/
READ THE
EXCELLENT BOOK
EXPLORING ES6
FOR FREE
(﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿
http://exploringjs.com/es6/
JAVASCRIPT HAD A
BUMPY RIDE, AND
MANY PREJUDICES
PERSIST.
OPEN YOUR MIND
AND LEARN HOW FAR
IT IS COME AND
WHAT IT CAN DO F...
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Upcoming SlideShare
Loading in …5
×

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

3,997 views

Published on

And have unicorn cookies!

Published in: Automotive
  • Be the first to comment

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

×