MODERN JAVASCRIPT
FOR PHP DEVELOPERS
Derek Binkley - @DerekB_WI – [email protected]
Slide 2
Slide 2 text
ABOUT ME
Lead Developer at National Conference of Bar
Examiners
Father of three
Home pizza chef
Slide 3
Slide 3 text
WHAT WILL WE LEARN
Using Javascript for Quick Prototyping
Ways to Incrementally Add Functionality to Existing Pages
Object Oriented Design
Testable and Modular Design
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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.
Slide 6
Slide 6 text
MAKING IT MODERN
Slide 7
Slide 7 text
Using the built in capabilities of the browser.
Standard core of ECMAScript
Many online references
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
FIREFOX WEB CONSOLE
Ctrl + Shift + K opens browser console.
Slide 10
Slide 10 text
CHROME DEV TOOLS
Ctrl + Shift + I opens browser console.
Slide 11
Slide 11 text
LET'S GET TO SOME CODE
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
QUICK JAVASCRIPT BASICS
Slide 16
Slide 16 text
By default scope is global, var makes it local
Console let’s you print lines – quick and easy debugging
Prototype based not class based – inheritance differences
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
In PHP, we would separate into re-usable, carefully designed
objects.
So let’s try it in Javascript.
Slide 19
Slide 19 text
OBJECT FOR DATA
Slide 20
Slide 20 text
OBJECT FOR VIEW
Slide 21
Slide 21 text
OBJECT FOR VIEW – LIST
Slide 22
Slide 22 text
OBJECT FOR VIEW – INITIALIZE & REFRESH
Slide 23
Slide 23 text
BROWSER STORAGE
LocalStorage persists
SessionStorage tied to browser tab
Same origin policy for security, e.g. http://www.example.com
Slide 24
Slide 24 text
BROWSER STORAGE EXAMPLE
Slide 25
Slide 25 text
A PATTERN DEVELOPS
Slide 26
Slide 26 text
An alternative to Model View Controller
Well suited for browser based development
Model doesn’t interact directly with View
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
THERE IS EVEN MORE TO ADD
Slide 35
Slide 35 text
Examples using Knockout JS
Declarative data binding updates html in real time.
Works inside standard html tags
View object gets replaced by html parameters
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
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