SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Are you scared by JavaScript? Have you used JQuery but struggle with adding interactive features to your web page? This talk will help you understand how to use JavaScript effectively in your existing web pages and PHP applications. This talk will explore different ways to write and structure your JavaScript code and introduce the model-view-view model pattern as a complement to the model view controller pattern often used in PHP.
Lead Developer/Analyst at National Conference of Bar Examiners
Are you scared by JavaScript? Have you used JQuery but struggle with adding interactive features to your web page? This talk will help you understand how to use JavaScript effectively in your existing web pages and PHP applications. This talk will explore different ways to write and structure your JavaScript code and introduce the model-view-view model pattern as a complement to the model view controller pattern often used in PHP.
1.
MODERN
JAVASCRIPT
FOR PHP
DEVELOPERSDerek Binkley - @DerekB_WI – dbinkley@ncbex.org
2.
ABOUT ME
Lead Developer at National Conference of Bar
Examiners
Father of three
Home pizza chef
3.
WHAT WILL WE LEARN
Using Javascript for Quick Prototyping
Ways to Incrementally Add Functionality to Existing
Pages
Object Oriented Design
Testable and Modular Design
4.
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
5.
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.
7.
Using the built in capabilities of the browser.
Standard core of ECMAScript
Many online references
8.
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
9.
FIREFOX WEB CONSOLE
Ctrl + Shift + K opens browser console.
10.
CHROME DEV TOOLS
Ctrl + Shift + I opens browser console.
24.
Examples using Knockout JS
Declarative data binding updates html in real time.
Works inside standard html tags
View object gets replaced by html parameters
25.
Variables become observable objects
Knockout also offers observable arrays
26.
UNIT TESTING
By following separating concerns your code is now unit testable
Many tools out there but beyond the scope of this talk
27.
Give feedback at
https://joind.in/event/madison-php-conference-
2016/schedule/list
Download slides at
http://www.slideshare.net/DerekBinkley/moder
n-javascript-talk
Ask audience about problems with caveat that this is very simple code No code re-use View and code coupled too closely Simple modifications will continue to clutter code exponentially.
Prototypes define a model and decorate it instead of inheritance. Watch out for properties getting passed by reference.
This does not output 1, 2 and 3.
Very important for prototyping. Same origin means exact domain name
This is one way to model your code and doesn’t fit in all cases. May be complex for this simple example but would be easier to expand.
Pretty basic isn’t it.
A little more going on than the base model but still pretty simple.
This is the controller for this pattern.
This method could use some help but illustrates the point of seperation.
Knockout is easy to add to a project so easy to show. This is not an endorsement over other frameworks.
Knockout is easy to add to a project so easy to show. This is not an endorsement over other frameworks.
Cleaner more understandable by taking html tags out of javascript code.
Knockout is easy to add to a project so easy to show. This is not an endorsement over other frameworks.