ModernJavascriptTalk.pdf

JavaScript Talk for Midwest PHP.

Transcript

1. MODERN JAVASCRIPT FOR PHP DEVELOPERS Derek Binkley - @DerekB_WI – dbinkley@ncbex.org
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. ABOUT ME Lead Developer at National Conference of Bar Examiners Father of three Home pizza chef @DerekB_WI
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.  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.  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. MAKING IT MODERN @DerekB_WI
8.  Using the built in capabilities of the browser.  Standard core of ECMAScript  Many online references @DerekB_WI
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. FIREFOX WEB CONSOLE  Ctrl + Shift + K opens browser console. @DerekB_WI
11. CHROME DEV TOOLS  Ctrl + Shift + I opens browser console. @DerekB_WI
12. LET'S GET TO SOME CODE
13. @DerekB_WI
14. @DerekB_WI
15. @DerekB_WI
16. QUICK JAVASCRIPT BASICS
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. @DerekB_WI
19. @DerekB_WI
20. In PHP, we would separate into re-usable, carefully designed objects. So let’s try it in JavaScript.
21. OBJECT FOR DATA @DerekB_WI
22. OBJECT FOR VIEW @DerekB_WI
23. OBJECT FOR VIEW – LIST @DerekB_WI
24. OBJECT FOR VIEW – INITIALIZE & REFRESH @DerekB_WI
25. BROWSER STORAGE  LocalStorage persists  SessionStorage tied to browser tab  Same origin policy for security, e.g. http://www.example.com @DerekB_WI
26. BROWSER STORAGE EXAMPLE @DerekB_WI
27. BROWSER STORAGE EXAMPLE @DerekB_WI
28. A PATTERN DEVELOPS
29.  An alternative to Model View Controller  Well suited for browser based development  Model doesn’t interact directly with View @DerekB_WI
30. THERE IS EVEN MORE TO ADD
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. @DerekB_WI
33. @DerekB_WI
34. @DerekB_WI
35. @DerekB_WI
36. @DerekB_WI
37. @DerekB_WI
38. @DerekB_WI
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. Give feedback at https://joind.in/talk/9a733 @DerekB_WI
41. Download slides at: https://speakerdeck.com/derekb/modernjava scripttalk @DerekB_WI
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