Modern JavaScript Talk

Modern JavaScript Talk

Talk for Dutch PHP 2018 about moving beyond jQuery

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

June 09, 2018
Tweet

Transcript

  1. MODERN JAVASCRIPT: MOVING BEYOND JQUERY @DerekB_WI binkleyd@yahoo.com

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

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

    ▪Ways to Incrementally Add Functionality to Existing Pages ▪Object Oriented Design ▪Testable Code
  6. @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
  7. @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
  8. @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.
  9. @DerekB_WI MAKING IT MODERN

  10. @DerekB_WI PLAIN VANILLA JS ▪ Using the built in capabilities

    of the browser. ▪ Standard core of ECMAScript ▪ Many online references
  11. @DerekB_WI FIREFOX WEB CONSOLE ▪ Ctrl + Shift + K

    opens browser console.
  12. @DerekB_WI CHROME DEV TOOLS ▪ Ctrl + Shift + I

    opens browser console.
  13. LET'S GET TO SOME CODE

  14. @DerekB_WI PHP EXAMPLE

  15. @DerekB_WI OLD FASHIONED EXAMPLE

  16. @DerekB_WI OLD FASHIONED EXAMPLE

  17. QUICK JAVASCRIPT BASICS

  18. @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
  19. @DerekB_WI SCOPE EXAMPLE

  20. @DerekB_WI SCOPE EXAMPLE

  21. @DerekB_WI SCOPE RESULTS

  22. OBJECTS FOR DATA/VIEW ▪ PHP: re-usable, carefully designed objects. ▪

    Let’s try it in JavaScript.
  23. @DerekB_WI OBJECT FOR DATA

  24. @DerekB_WI PROTOTYPICAL INHERITANCE

  25. @DerekB_WI OBJECT FOR DATA

  26. @DerekB_WI OBJECT FOR VIEW

  27. @DerekB_WI OBJECT FOR VIEW – LIST

  28. @DerekB_WI OBJECT FOR VIEW – INITIALIZE & REFRESH

  29. @DerekB_WI BROWSER STORAGE ▪ LocalStorage persists ▪ SessionStorage tied to

    browser tab ▪ Same origin policy for security, e.g. http://www.example.com
  30. @DerekB_WI BROWSER STORAGE EXAMPLE

  31. @DerekB_WI BROWSER STORAGE EXAMPLE

  32. A PATTERN DEVELOPS

  33. @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
  34. THERE IS EVEN MORE TO ADD

  35. @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
  36. @DerekB_WI DATA BINDING - HTML

  37. @DerekB_WI DATA BINDING - HTML

  38. DATA BINDING - OBJECT

  39. @DerekB_WI DATA BINDING - OBJECT

  40. @DerekB_WI DATA BINDING - OBJECT

  41. @DerekB_WI DATA BINDING - OBJECT

  42. @DerekB_WI DATA BINDING - OBJECT

  43. CONNECTING TO PHP ▪ Use an http request (AJAX) ▪

    Asynchronous
  44. @DerekB_WI CONNECTING TO PHP

  45. @DerekB_WI CONNECTING TO PHP

  46. @DerekB_WI UNIT TESTING ▪separating concerns leads to testable code ▪Testing

    not tied to framework
  47. @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
  48. @DerekB_WI VUE JS

  49. @DerekB_WI REACT

  50. @DerekB_WI THANKS - BEDANKT ▪ https://joind.in/talk/6cae0

  51. @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 – binkleyd@yahoo.com