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.

Modern JavaScript Talk

427 views

Published on

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. This talk will 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.

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important)  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Modern JavaScript Talk

  1. 1. MODERN JAVASCRIPT FOR PHP DEVELOPERSDerek Binkley - @DerekB_WI – dbinkley@ncbex.org
  2. 2. ABOUT ME Lead Developer at National Conference of Bar Examiners Father of three Home pizza chef
  3. 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. 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. 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. 6. MAKING IT MODERN
  7. 7.  Using the built in capabilities of the browser.  Standard core of ECMAScript  Many online references
  8. 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. 9. FIREFOX WEB CONSOLE  Ctrl + Shift + K opens browser console.
  10. 10. CHROME DEV TOOLS  Ctrl + Shift + I opens browser console.
  11. 11. LET'S GET TO SOME CODE
  12. 12. QUICK JAVASCRIPT BASICS
  13. 13.  By default scope is global, var makes it local.  Console let’s you print lines  Prototype based not class based.
  14. 14. In PHP, we would separate into re-usable, carefully designed objects. So let’s try it in JavaScript.
  15. 15. OBJECT FOR DATA
  16. 16. OBJECT FOR VIEW
  17. 17. OBJECT FOR VIEW – LIST
  18. 18. OBJECT FOR VIEW – INITIALIZE & REFRESH
  19. 19. BROWSER STORAGE  LocalStorage persists  SessionStorage tied to browser tab  Same origin policy for security, e.g. http://www.example.com
  20. 20. BROWSER STORAGE EXAMPLE
  21. 21. A PATTERN DEVELOPS
  22. 22.  An alternative to Model View Controller  Well suited for browser based development  Model doesn’t interact directly with View
  23. 23. THERE IS EVEN MORE TO ADD
  24. 24.  Examples using Knockout JS  Declarative data binding updates html in real time.  Works inside standard html tags  View object gets replaced by html parameters
  25. 25.  Variables become observable objects  Knockout also offers observable arrays
  26. 26. UNIT TESTING  By following separating concerns your code is now unit testable  Many tools out there but beyond the scope of this talk
  27. 27. Give feedback at https://joind.in/event/madison-php-conference- 2016/schedule/list Download slides at http://www.slideshare.net/DerekBinkley/moder n-javascript-talk
  28. 28.  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/  Derek Binkley - @DerekB_WI – dbinkley@ncbex.org

×