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.

Fixing web and JS gaps

2,294 views

Published on

Closing talk at #jsopennyc

Published in: Devices & Hardware
  • Be the first to comment

Fixing web and JS gaps

  1. 1. Fixing web and JS gaps Christian Heilmann @codepo8
  2. 2. Today, I want to talk about JavaScript
  3. 3. • An incredibly versatile language • Available web-wide and across many platforms • Toolset independent • Forgiving and inviting JavaScript is…
  4. 4. • In browsers on the web • On the server • In applications • To access services • As a data format (JSON) • On hardware • … your turn, surprise me :) You can use JavaScript…
  5. 5. Javascript is in super high demand! https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
  6. 6. A quick reminder how JavaScript is pretty much the odd one out… Photo by nan palmero https://www.flickr.com/photos/97402086@N00/14187670430/
  7. 7. Javascript is not a great language for the web… Photo by hajime7 https://www.flickr.com/photos/77798146@N00/3377368881
  8. 8. HTML and CSS are designed to be fault tolerant. https://adactio.com/jour nal/4272
  9. 9. Javascript is not fault tolerant.
  10. 10. One little mistake, and nothing shows up. Photo by heiner.adams https://www.flickr.com/photos/122794378@N08/19920120966
  11. 11. Thankfully only paranoid freaks turn off JavaScript… Photo by Mash Down Babylon https://www.flickr.com/photos/64896490@N 00/411071191
  12. 12. Well, not quite…
  13. 13. Sounds familiar?
  14. 14. JavaScript abuse is rampant…
  15. 15. 3MB of blocking JavaScript before the first word appears on the page! Photo by bionicteaching https://www.flickr.com/photos/29096601@N00/6057415565
  16. 16. This is one big issue we have in the web community… • Javascript is too powerfulfor 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
  17. 17. 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.
  18. 18. 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.
  19. 19. </WEB My goal for today: let’s learn how to use JavaScript responsibly and stay up-to-date.
  20. 20. The plan… 1. Fix the JavaScript learning process… 2. Stop catering to undead browsers 3. Stop breaking the web 4. Use the amazing tools we have 5. Evolve JavaScript itself
  21. 21. </WEB 1. The JavaScript Learning Process
  22. 22. Back in the days, learning JavaScript worked a bit like this… • Look at the source of web sites using view-source • Copy and paste the bits that look like they are responsible for some things • Change some numbers around • Run into errors • Blame Internet Explorer
  23. 23. Today we’re more professional about this… • 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 a terrible language • For goodmeasure, blame Internet Explorer
  24. 24. The full stack overflow developer https://www.christianheilmann.com/2015/07/17/the-full-stackoverflow-devel oper/
  25. 25. 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.
  26. 26. </WEB 2. Removing scapegoats: IE is dead!
  27. 27. Removing the largest stumbling block of the web…
  28. 28. @MSEDGEDEV uservoice.modern.ie status.modern.ie remote.modern.ie Open communication…
  29. 29. Moving from Trident to EdgeHTML
  30. 30. ✘VML ✘attachEvent() ✘currentStyle ✘X-UA-Compatible (render modes) ✘IE Layout Quirks ✘VBScript ✘Conditional Comments ✘MS-Prefixed Events All the non-standard code is gone – stop worrying about and supporting it!
  31. 31. No more plugins!
  32. 32. </WEB 3. Stop breaking things!
  33. 33. If you think JavaScript, think escalators. Photo by Nicolas Alejandro Street Photography https://www.flickr.com/photos/80835334@N07/11328584795
  34. 34. IE 11 is still there, but only on demand – people rely on non-standard code…
  35. 35. Building a new browser taught us lots… Photo by Schwar https://www.flickr.com/photos/83868261@N 00/7854935610
  36. 36. Moving from Trident to EdgeHTML
  37. 37. You can’t fix what you don’t get… https://twitter.com/Caged/status/590602214021922818
  38. 38. Photo by Tim Dorr https://www.flickr.com/photos/60723528@N00/2096272747 User agent sniffing…
  39. 39. USER AGENTSNIFFING… Parsing the “Pack of lies”…
  40. 40. Let’s detect mobile! What can go wrong? window.mobileCheck = function() { var check = false; (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi ptop|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|win dows (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; }
  41. 41. ✘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. Stop doing that!
  42. 42. ✘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. Keep your helper tools up-to-date
  43. 43. http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-code-scan Scan and remove!
  44. 44. </WEB 4. Removing scapegoats: tooling rocks
  45. 45. • 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). Our development environment is incredible!
  46. 46. • Editors have linting, build integration, and some are even written in JavaScript and run in the browser. • We share codeon GitHub and help debug problems using JSFiddle, JSBin and others… Our development environment is incredible!
  47. 47. • Open Source and cross platform • Written in JavaScript • Includes debugging and linting - learn your mistakes while you write code • Fully Extensible using JavaScript • GitHub integration https://code.visualstudio.com/ Visual Studio Code
  48. 48. • One hour free test server • Authenticate with Google, Facebookor Microsoft • Keep your codeby forking or downloading it https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/ Try out Node and Express
  49. 49. LIVE DEMO… Photo by Jo Naylor https://www.flickr.com/photos/11598937@N08/3479161418 Everybody duck!
  50. 50. </WEB 5. Removing scapegoats: evolve JS
  51. 51. JavaScript has grown up… It is an evergreen language called ECMAScript
  52. 52. http://kangax.github.io/compat-table/es6/Support is very encouraging…
  53. 53. https://babeljs.io If more is needed, you can transpile…
  54. 54. http://typescriptlang.org/ Or you can use a superset language…
  55. 55. https://featuretests.io/ Feature testing is another option…
  56. 56. https://babeljs.io/docs/learn-es2015/ Babel has a lot of docs and live testing…
  57. 57. http://exploringjs.com/es6/ Axel Rauschmayer has a free book!
  58. 58. Love JavaScript! It is everywhere and ready to please…
  59. 59. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×