ModernJavascriptTalk.pdf

JavaScript Talk for Midwest PHP.

Transcript

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

   View Slide

2.  Harassment includes offensive verbal comments related to gender, age, sexual orientation, disability,
   physical appearance, body size, race, religion, sexual images in public spaces, deliberate intimidation,
   stalking, following, harassing photography or recording, sustained disruption of talks or other events,
   inappropriate physical contact, and unwelcome sexual attention.
    Participants asked to stop any harassing behavior are expected to comply immediately.
    Sponsors are also subject to the anti-harassment policy. In particular, sponsors should not use sexualised
   images, activities, or other material. Booth staff (including volunteers) should not use sexualise
   clothing/uniforms/costumes, or otherwise create a sexualised environment.
    If a participant engages in harassing behavior, the conference organisers may take any action they
   deem appropriate, including warning the offender or expulsion from the conference with no refund.
    If you are being harassed, notice that someone else is being harassed, or have any other concerns,
   please contact a member of conference staff immediately. Conference staff can be identified as they’ll
   be wearing branded t-shirts.
    Conference staff will be happy to help participants contact hotel/venue security or local law
   enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the
   duration of the conference. We value your attendance.
    We expect participants to follow these rules at conference and workshop venues and conference-
   related social events.
   @DerekB_WI
   

   View Slide

3. ABOUT ME
   Lead Developer at National Conference of Bar
   Examiners
   Father of three
   Home pizza chef
   @DerekB_WI
   

   View Slide

4. WHAT WILL WE LEARN
   Using Javascript for Quick Prototyping
   Ways to Incrementally Add Functionality to Existing Pages
   Object Oriented Design
   Testable and Modular Design
   @DerekB_WI
   

   View Slide

5.  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
   @DerekB_WI
   

   View Slide

6.  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.
   @DerekB_WI
   

   View Slide

7. MAKING IT MODERN
   @DerekB_WI
   

   View Slide

8.  Using the built in capabilities of the browser.
    Standard core of ECMAScript
    Many online references
   @DerekB_WI
   

   View Slide

9. 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
   @DerekB_WI
   

   View Slide

10. FIREFOX WEB CONSOLE
     Ctrl + Shift + K opens browser console.
    @DerekB_WI
    

    View Slide

11. CHROME DEV TOOLS
     Ctrl + Shift + I opens browser console.
    @DerekB_WI
    

    View Slide

12. LET'S GET TO SOME CODE
    

    View Slide

13. @DerekB_WI
    

    View Slide

14. @DerekB_WI
    

    View Slide

15. @DerekB_WI
    

    View Slide

16. QUICK JAVASCRIPT BASICS
    

    View Slide

17.  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
    @DerekB_WI
    

    View Slide

18. @DerekB_WI
    

    View Slide

19. @DerekB_WI
    

    View Slide

20. In PHP, we would separate into re-usable, carefully designed
    objects.
    So let’s try it in JavaScript.
    

    View Slide

21. OBJECT FOR DATA
    @DerekB_WI
    

    View Slide

22. OBJECT FOR VIEW
    @DerekB_WI
    

    View Slide

23. OBJECT FOR VIEW – LIST
    @DerekB_WI
    

    View Slide

24. OBJECT FOR VIEW – INITIALIZE & REFRESH
    @DerekB_WI
    

    View Slide

25. BROWSER STORAGE
     LocalStorage persists
     SessionStorage tied to browser tab
     Same origin policy for security, e.g. http://www.example.com
    @DerekB_WI
    

    View Slide

26. BROWSER STORAGE EXAMPLE
    @DerekB_WI
    

    View Slide

27. BROWSER STORAGE EXAMPLE
    @DerekB_WI
    

    View Slide

28. A PATTERN DEVELOPS
    

    View Slide

29.  An alternative to Model View Controller
     Well suited for browser based development
     Model doesn’t interact directly with View
    @DerekB_WI
    

    View Slide

30. THERE IS EVEN MORE TO ADD
    

    View Slide

31.  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
    @DerekB_WI
    

    View Slide

32. @DerekB_WI
    

    View Slide

33. @DerekB_WI
    

    View Slide

34. @DerekB_WI
    

    View Slide

35. @DerekB_WI
    

    View Slide

36. @DerekB_WI
    

    View Slide

37. @DerekB_WI
    

    View Slide

38. @DerekB_WI
    

    View Slide

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
     https://jasmine.github.io/ - Behavior driven testing
    @DerekB_WI
    

    View Slide

40. Give feedback at https://joind.in/talk/9a733
    @DerekB_WI
    

    View Slide

41. Download slides at:
    https://speakerdeck.com/derekb/modernjava
    scripttalk
    @DerekB_WI
    

    View Slide

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
    @DerekB_WI
    

    View Slide