MODERN JAVASCRIPT FOR PHP DEVELOPERS Derek Binkley - @DerekB_WI – [email protected] 

 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 

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

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 

 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 

 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 

MAKING IT MODERN @DerekB_WI 

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

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 

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

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

LET'S GET TO SOME CODE 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

QUICK JAVASCRIPT BASICS 

 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 

@DerekB_WI 

@DerekB_WI 

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

OBJECT FOR DATA @DerekB_WI 

OBJECT FOR VIEW @DerekB_WI 

OBJECT FOR VIEW – LIST @DerekB_WI 

OBJECT FOR VIEW – INITIALIZE & REFRESH @DerekB_WI 

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

BROWSER STORAGE EXAMPLE @DerekB_WI 

BROWSER STORAGE EXAMPLE @DerekB_WI 

A PATTERN DEVELOPS 

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

THERE IS EVEN MORE TO ADD 

 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 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

@DerekB_WI 

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 

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

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

 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 – [email protected] @DerekB_WI