MODERN JAVASCRIPT:
MOVING BEYOND JQUERY
@DerekB_WI
[email protected]
Slide 2
Slide 2 text
About Me
• Father of 3
• Volunteer at Community Justice
• Senior Engineer, TurnTo Networks
• Home Pizza Chef
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
@DerekB_WI
WHAT WILL WE LEARN
▪Using Javascript for Quick Prototyping
▪Ways to Incrementally Add Functionality to Existing
Pages
▪Object Oriented Design
▪Testable Code
Slide 6
Slide 6 text
@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
Slide 7
Slide 7 text
@DerekB_WI
SCARED OF JAVASCRIPT?
▪ 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 8
Slide 8 text
@DerekB_WI
JQUERY BECOMES GO TO TOOL
▪ 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 9
Slide 9 text
@DerekB_WI
MAKING IT MODERN
Slide 10
Slide 10 text
@DerekB_WI
PLAIN VANILLA JS
▪ Using the built in capabilities of the browser.
▪ Standard core of ECMAScript
▪ Many online references
Slide 11
Slide 11 text
@DerekB_WI
FIREFOX WEB CONSOLE
▪ Ctrl + Shift + K opens browser console.
Slide 12
Slide 12 text
@DerekB_WI
CHROME DEV TOOLS
▪ Ctrl + Shift + I opens browser console.
Slide 13
Slide 13 text
LET'S GET TO SOME CODE
Slide 14
Slide 14 text
@DerekB_WI
PHP EXAMPLE
Slide 15
Slide 15 text
@DerekB_WI
OLD FASHIONED EXAMPLE
Slide 16
Slide 16 text
@DerekB_WI
OLD FASHIONED EXAMPLE
Slide 17
Slide 17 text
QUICK JAVASCRIPT BASICS
Slide 18
Slide 18 text
@DerekB_WI
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
Slide 19
Slide 19 text
@DerekB_WI
SCOPE EXAMPLE
Slide 20
Slide 20 text
@DerekB_WI
SCOPE EXAMPLE
Slide 21
Slide 21 text
@DerekB_WI
SCOPE
RESULTS
Slide 22
Slide 22 text
OBJECTS FOR DATA/VIEW
▪ PHP: re-usable, carefully designed
objects.
▪ Let’s try it in JavaScript.
Slide 23
Slide 23 text
@DerekB_WI
OBJECT FOR DATA
Slide 24
Slide 24 text
@DerekB_WI
PROTOTYPICAL INHERITANCE
Slide 25
Slide 25 text
@DerekB_WI
OBJECT FOR DATA
Slide 26
Slide 26 text
@DerekB_WI
OBJECT FOR VIEW
Slide 27
Slide 27 text
@DerekB_WI
OBJECT FOR VIEW – LIST
Slide 28
Slide 28 text
@DerekB_WI
OBJECT FOR VIEW – INITIALIZE & REFRESH
Slide 29
Slide 29 text
@DerekB_WI
BROWSER STORAGE
▪ LocalStorage persists
▪ SessionStorage tied to browser tab
▪ Same origin policy for security, e.g. http://www.example.com
Slide 30
Slide 30 text
@DerekB_WI
BROWSER STORAGE
EXAMPLE
Slide 31
Slide 31 text
@DerekB_WI
BROWSER STORAGE
EXAMPLE
Slide 32
Slide 32 text
A PATTERN DEVELOPS
Slide 33
Slide 33 text
@DerekB_WI
MVVM –
MODEL VIEW VIEW MODEL
▪ An alternative to Model View Controller
▪ Well suited for browser based development
▪ Model doesn’t interact directly with View
Slide 34
Slide 34 text
THERE IS EVEN
MORE TO ADD
Slide 35
Slide 35 text
@DerekB_WI
DATA BINDING
▪ 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
Slide 36
Slide 36 text
@DerekB_WI
DATA BINDING - HTML
Slide 37
Slide 37 text
@DerekB_WI
DATA BINDING - HTML
Slide 38
Slide 38 text
DATA BINDING - OBJECT
Slide 39
Slide 39 text
@DerekB_WI
DATA BINDING - OBJECT
Slide 40
Slide 40 text
@DerekB_WI
DATA BINDING - OBJECT
Slide 41
Slide 41 text
@DerekB_WI
DATA BINDING - OBJECT
Slide 42
Slide 42 text
@DerekB_WI
DATA BINDING - OBJECT
Slide 43
Slide 43 text
CONNECTING TO PHP
▪ Use an http request (AJAX)
▪ Asynchronous
Slide 44
Slide 44 text
@DerekB_WI
CONNECTING TO PHP
Slide 45
Slide 45 text
@DerekB_WI
CONNECTING TO PHP
Slide 46
Slide 46 text
@DerekB_WI
UNIT TESTING
▪separating concerns leads to testable code
▪Testing not tied to framework
Slide 47
Slide 47 text
@DerekB_WI
UNIT TESTING
▪http://qunitjs.com/ - from Jquery team
▪https://jasmine.github.io/ - Behavior driven
testing
▪https://mochajs.org/ - Used in My Other Talk
▪https://facebook.github.io/jest/ - Jest