ModernJavascriptTalk.pdf

Transcript

1. 1.

   MODERN JAVASCRIPT FOR PHP DEVELOPERS Derek Binkley - @DerekB_WI –

   dbinkley@ncbex.org
2. 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
3. 3.

   ABOUT ME Lead Developer at National Conference of Bar Examiners

   Father of three Home pizza chef @DerekB_WI
4. 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
5. 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
6. 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
7. 7.

   MAKING IT MODERN @DerekB_WI

8. 8.

    Using the built in capabilities of the browser. 

   Standard core of ECMAScript  Many online references @DerekB_WI
9. 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
10. 10.

    FIREFOX WEB CONSOLE  Ctrl + Shift + K opens

    browser console. @DerekB_WI
11. 11.

    CHROME DEV TOOLS  Ctrl + Shift + I opens

    browser console. @DerekB_WI
12. 12.

    LET'S GET TO SOME CODE

13. 13.

    @DerekB_WI

14. 14.

    @DerekB_WI

15. 15.

    @DerekB_WI

16. 16.

    QUICK JAVASCRIPT BASICS

17. 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
18. 18.

    @DerekB_WI

19. 19.

    @DerekB_WI

20. 20.

    In PHP, we would separate into re-usable, carefully designed objects.

    So let’s try it in JavaScript.
21. 21.

    OBJECT FOR DATA @DerekB_WI

22. 22.

    OBJECT FOR VIEW @DerekB_WI

23. 23.

    OBJECT FOR VIEW – LIST @DerekB_WI

24. 24.

    OBJECT FOR VIEW – INITIALIZE & REFRESH @DerekB_WI

25. 25.

    BROWSER STORAGE  LocalStorage persists  SessionStorage tied to browser

    tab  Same origin policy for security, e.g. http://www.example.com @DerekB_WI
26. 26.

    BROWSER STORAGE EXAMPLE @DerekB_WI

27. 27.

    BROWSER STORAGE EXAMPLE @DerekB_WI

28. 28.

    A PATTERN DEVELOPS

29. 29.

     An alternative to Model View Controller  Well suited

    for browser based development  Model doesn’t interact directly with View @DerekB_WI
30. 30.

    THERE IS EVEN MORE TO ADD

31. 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
32. 32.

    @DerekB_WI

33. 33.

    @DerekB_WI

34. 34.

    @DerekB_WI

35. 35.

    @DerekB_WI

36. 36.

    @DerekB_WI

37. 37.

    @DerekB_WI

38. 38.

    @DerekB_WI

39. 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
40. 40.

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

41. 41.

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

42. 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