Modern JavaScript Talk

MODERN JAVASCRIPT: MOVING BEYOND JQUERY @DerekB_WI [email protected]

About Me • Father of 3 • Volunteer at Community
Justice • Senior Engineer, TurnTo Networks • 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 Code

@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 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

@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.

@DerekB_WI MAKING IT MODERN

@DerekB_WI PLAIN VANILLA JS ▪ Using the built in capabilities
of the browser. ▪ Standard core of ECMAScript ▪ Many online references

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

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

LET'S GET TO SOME CODE

@DerekB_WI PHP EXAMPLE

@DerekB_WI OLD FASHIONED EXAMPLE

QUICK JAVASCRIPT BASICS

@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

@DerekB_WI SCOPE EXAMPLE

@DerekB_WI SCOPE RESULTS

OBJECTS FOR DATA/VIEW ▪ PHP: re-usable, carefully designed objects. ▪
Let’s try it in JavaScript.

@DerekB_WI OBJECT FOR DATA

@DerekB_WI PROTOTYPICAL INHERITANCE

@DerekB_WI 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

A PATTERN DEVELOPS

@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

THERE IS EVEN MORE TO ADD

@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

@DerekB_WI DATA BINDING - HTML

DATA BINDING - OBJECT

@DerekB_WI DATA BINDING - OBJECT

CONNECTING TO PHP ▪ Use an http request (AJAX) ▪
Asynchronous

@DerekB_WI CONNECTING TO PHP

@DerekB_WI UNIT TESTING ▪separating concerns leads to testable code ▪Testing
not tied to framework

@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

@DerekB_WI VUE JS

@DerekB_WI REACT

@DerekB_WI THANKS - BEDANKT ▪ https://joind.in/talk/6cae0

@DerekB_WI RESOURCES ▪ 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]

Modern JavaScript Talk

Modern JavaScript Talk

More Decks by derek-b

Other Decks in Technology

Featured

Transcript