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

Modern JavaScript for PHP Developers

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 derek-b
February 16, 2017

Modern JavaScript for PHP Developers

Are you scared by JavaScript? Have you used JQuery but struggle with adding interactive features to your web page? This talk will help you understand how to use JavaScript effectively in your existing web pages and PHP applications. Let's explore different ways to write and structure your JavaScript code and introduce the model-view-view model pattern as a complement to the model view controller pattern often used in PHP to create more reusable, understandable, and testable code

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

February 16, 2017
Tweet

Transcript

  1. MODERN JAVASCRIPT FOR PHP DEVELOPERS Derek Binkley - @DerekB_WI –

    dbinkley@ncbex.org
  2. ABOUT ME Lead Developer at National Conference of Bar Examiners

    Father of three Home pizza chef
  3. WHAT WILL WE LEARN Using Javascript for Quick Prototyping Ways

    to Incrementally Add Functionality to Existing Pages Object Oriented Design Testable and Modular Design
  4.  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.  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. MAKING IT MODERN

  7.  Using the built in capabilities of the browser. 

    Standard core of ECMAScript  Many online references
  8. 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
  9. FIREFOX WEB CONSOLE  Ctrl + Shift + K opens

    browser console.
  10. CHROME DEV TOOLS  Ctrl + Shift + I opens

    browser console.
  11. LET'S GET TO SOME CODE

  12. None
  13. None
  14. None
  15. QUICK JAVASCRIPT BASICS

  16.  By default scope is global, var makes it local

     Console let’s you print lines – quick and easy debugging  Prototype based not class based – inheritance differences
  17. None
  18. In PHP, we would separate into re-usable, carefully designed objects.

    So let’s try it in Javascript.
  19. OBJECT FOR DATA

  20. OBJECT FOR VIEW

  21. OBJECT FOR VIEW – LIST

  22. OBJECT FOR VIEW – INITIALIZE & REFRESH

  23. BROWSER STORAGE  LocalStorage persists  SessionStorage tied to browser

    tab  Same origin policy for security, e.g. http://www.example.com
  24. BROWSER STORAGE EXAMPLE

  25. A PATTERN DEVELOPS

  26.  An alternative to Model View Controller  Well suited

    for browser based development  Model doesn’t interact directly with View
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. THERE IS EVEN MORE TO ADD

  35.  Examples using Knockout JS  Declarative data binding updates

    html in real time.  Works inside standard html tags  View object gets replaced by html parameters
  36. None
  37. None
  38. None
  39. UNIT TESTING  By following separating concerns your code is

    now unit testable  Many tools out there but beyond the scope of this talk  http://qunitjs.com/ - from Jquery team 
  40. Give feedback at https://joind.in/talk/8a3ef

  41. Download slides at: ????

  42.  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 – dbinkley@ncbex.org