Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern JavaScript Talk

June 09, 2018

Modern JavaScript Talk

Talk for Dutch PHP 2018 about moving beyond jQuery


June 09, 2018

More Decks by derek-b

Other Decks in Technology


  1. About Me • Father of 3 • Volunteer at Community

    Justice • Senior Engineer, TurnTo Networks • Home Pizza Chef
  2. @DerekB_WI WHAT WILL WE LEARN ▪Using Javascript for Quick Prototyping

    ▪Ways to Incrementally Add Functionality to Existing Pages ▪Object Oriented Design ▪Testable Code
  3. @DerekB_WI ALL ABOUT THE BROWSER ▪ For this talk we

    are only concerned with the browser. ▪ Complementing not replacing PHP ▪ Lots of browser tools for developers ▪ For this talk we are not looking at a single page app or server side JS
  4. @DerekB_WI SCARED OF JAVASCRIPT? ▪ Early on we wanted to

    add functionality to our static pages ▪ But browsers do not agree ▪ Plugins for functionality, Flash, ActiveX ▪ Big libraries start to evolve, Dojo, YUI
  5. @DerekB_WI JQUERY BECOMES GO TO TOOL ▪ Selectors use same

    syntax as style sheets. ▪ Allows for manipulation of DOM ▪ Bind to events ▪ Add-Ons for UI enhancements ▪AJAX also takes center stage.
  6. @DerekB_WI PLAIN VANILLA JS ▪ Using the built in capabilities

    of the browser. ▪ Standard core of ECMAScript ▪ Many online references
  7. @DerekB_WI BASICS ▪ By default scope is global, var makes

    it local ▪ ECMAScript 6 introduces let for block level scoping. ▪ Console lets you print lines – quick and easy debugging ▪ Prototype based not class based – inheritance differences
  8. @DerekB_WI BROWSER STORAGE ▪ LocalStorage persists ▪ SessionStorage tied to

    browser tab ▪ Same origin policy for security, e.g. http://www.example.com
  9. @DerekB_WI MVVM – MODEL VIEW VIEW MODEL ▪ An alternative

    to Model View Controller ▪ Well suited for browser based development ▪ Model doesn’t interact directly with View
  10. @DerekB_WI DATA BINDING ▪ Examples using Knockout JS ▪ Declarative

    data binding updates html in real time. ▪ Works inside standard html tags ▪ View object gets replaced by html parameters ▪ Vue.js is an alternative
  11. @DerekB_WI UNIT TESTING ▪http://qunitjs.com/ - from Jquery team ▪https://jasmine.github.io/ -

    Behavior driven testing ▪https://mochajs.org/ - Used in My Other Talk ▪https://facebook.github.io/jest/ - Jest
  12. @DerekB_WI RESOURCES ▪ http://vanilla-js.com/ ▪ https://developer.mozilla.org/en-US/docs/Web/JavaScript ▪ https://msdn.microsoft.com/en-us/library/d1et7k7c(v=vs.94).aspx ▪ http://javascriptissexy.com/javascript-objects-in-detail/

    ▪ http://www.codeproject.com/Articles/278901/MVVM-Pattern-Made-Simple ▪ https://www.sitepoint.com/javascript-testing-unit-functional-integration/ ▪ https://medium.com/javascript-scene/master-the-javascript-interview-what- s-the-difference-between-class-prototypal-inheritance- e4cd0a7562e9#.l5sawwwsh ▪ Derek Binkley - @DerekB_WI – [email protected]