Slide 1

Slide 1 text

Enhancing your EE Add-ons with KnockoutJS Patrick Pohler Anecka, LLC Sunday, October 21, 2012

Slide 2

Slide 2 text

Sunday, October 21, 2012 Started 10 years ago as a "code monkey" doing .NET/C# development for Chase and software firms Sophos and TDCI Worked in web dev when altavista and yahoo was everybody's search engine.

Slide 3

Slide 3 text

Sunday, October 21, 2012 Now a freelancer/ owner of Anecka, LLC, working for small businesses, startups and non profits Been developing in EE for two years, love the platform and the community.

Slide 4

Slide 4 text

Sunday, October 21, 2012 Live in Columbus, Ohio We kinda like college football

Slide 5

Slide 5 text

Sunday, October 21, 2012 This year I married my best friend and a gorgeous girl

Slide 6

Slide 6 text

Sunday, October 21, 2012 No kids yet, but We have a cat named Bill

Slide 7

Slide 7 text

Sunday, October 21, 2012 I also homebrew, interested in swapping techniques and advice after the talk

Slide 8

Slide 8 text

Story time Sunday, October 21, 2012 Not enough as developers to ignore the front-end experience Story: faced with a mess of a project, home sale calculator dozens of different calculations all interdependent with each other. Wrapped up in an obsolete "windows" js library A friend suggested KO, i was able to turn a 2.5 month project into a one month job.

Slide 9

Slide 9 text

Sunday, October 21, 2012 The client was very happy and i came out looking like a genius

Slide 10

Slide 10 text

What is KnockoutJS? • Helps you create dynamic web apps • Dependency tracking • Declarative binding • Extensible • Supports lots of browsers Sunday, October 21, 2012 KnockoutJS is a javascript library that helps you create dynamic web applications. Anytime you have anything in your UI change dynamically, KO will help you write and maintain that Dependency tracking: ko detects changes in your data and syncs it to your ui automatically Declarative bindings: any easy way to connect your UI to your data, if you can write Html you can bind with ko Extensible: write your own custom code to make KO even more powerful Browser support: supports IE 6+, Safari, Firefox, Chrome

Slide 11

Slide 11 text

Why not jQuery? Sunday, October 21, 2012 But what's wrong with jQuery you might ask?

Slide 12

Slide 12 text

jQuery vs Knockout • jQuery is great for low level DOM work Sunday, October 21, 2012 Jquery is great for low level DOM work, it gives you a lot of control over your app on a micro level

Slide 13

Slide 13 text

jQuery vs Knockout • But things get awkward as the app gets bigger • As complexity increases so does the number of things the dev has to manage Sunday, October 21, 2012 But as your app gets more complex, managing all of those low level pieces becomes a challenge It could become so great that your app collapses under its own weight, simply because there isnt a clean way to separate your app's data and logic from the UI

Slide 14

Slide 14 text

jQuery vs Knockout • KO takes care of automatically keeping data and UI in sync • You can still use jQuery with KO Sunday, October 21, 2012 KO scales well because it's a high-level framework that takes care of the manual labor of keeping your data and UI in sync. jQuery and KO play very well together, and KO doesn't interfere with your underlying HTML or how you design your app.

Slide 15

Slide 15 text

Knockout Basics • Model-View-View Model pattern • MVVM pattern helps keep a complex app simple by using three components Sunday, October 21, 2012 The way ko organizes your application is by using the Model View View Model pattern, MVVM for short

Slide 16

Slide 16 text

MVVM Pattern • Model = your app's data • View Model = Model + methods that do work • View = UI, aka HTML doc (or EE template) • Demo : jsfiddle.net/tNb64 Sunday, October 21, 2012 There are three components in MVVM: Model - this is the data your app will manage, usually loaded from a database with ajax calla View Model - view model is your apps data, plus methods that manipulate the data. These methods should be independent of the UI, this keeps your code simple as your app becomes more complex View - finally your view is your apps ui, this would be your HTML or EE template. The view displays information in the model and sends commands to the View Model based on user behavior (such as button clicks) Lets see a simple example of the pattern

Slide 17

Slide 17 text

Observables • Observables allow KO to update the UI when the ViewModel changes • Setup with "ko.observable()" • To read, call observable property as a method: this.firstName() • To update, pass value as a param: this.firstName("Patrick") • Demo: jsfiddle.net/KxMfX/1 Sunday, October 21, 2012 So you've seen how to create a ViewModel and display one of it's properties using a binding. One of KO's main benefits is how it can update the UI automatically when the ViewModel changes. But how does it know when the ViewModel changes? The answer is a key concept in KO called an observable. Observables watch for changes in the state of properties in the View Model and updates the View automatically You create using ko.observable() Read by calling the property as a method, empty param: this.firstName() Update by passing the value as a param to the method: thsi.firstName("Patrick")

Slide 18

Slide 18 text

Computed observables • Function that joins one or more observables • Computed observables can be combines with other computed observables • Demo: jsfiddle.net/patpohler/ usM4k Sunday, October 21, 2012 So what if you have an observable for first name and one for last name and you wanted to display a full name? That's where the Computed Observable comes in handy. Like Voltron, a computed observable is a function combines one or more other observables together. Even other computed observables! Lets see it in action

Slide 19

Slide 19 text

What is "this"? • Have to pass a ref. to ViewModel into the computed observable to define "this" keyword • Tip: set "this" to a variable in the ViewModel as a reference • Demo: http://jsfiddle.net/ GpPKM/2/ Sunday, October 21, 2012 Notice that i passed the keyword "this" as a second parameter to ko.computed. This maps the "this" keyword to the instance of the View Model.. Otherwise the observable would have no idea what "this.firstName()" was There's a programming convention i recommend thats easier to understand, heres a quick demo

Slide 20

Slide 20 text

Observable Arrays • Keeps track of a collection of things • Only tracks object IN the array, not changes to the objects themselves • Add items with "push" • Demo: jsfiddle.net/patpohler/ CEKKW Sunday, October 21, 2012 Finally our last type of observable deals with tracking collections or arrays of objects. Like the Count from Sesame st, observable arrays watch when items are added and subtracted from the collection. They do not track changes to the properties in those objects, you'll need to define those properties as their own observables Lets see a demo

Slide 21

Slide 21 text

Bindings • Bindings are what KO uses to control how the View and View Model interact • Affect Text & Appearance, Control Flow, and Form Fields • You can even create your own custom bindings Sunday, October 21, 2012 So we've seen in our examples a couple of KO's bindings. Remember, bindings are just simple methods KO uses to control how the View and ViewModel interact with each other. These bindings can be broken down into three categories. Text & Appearance, Control Flow and Form fields. You can even create your own custom bindings for some really advanced functionality. Right now, let's talk about some of the more common bindings you'll use in your app.

Slide 22

Slide 22 text

Text and Appearance • CSS & Style: jsfiddle.net/ patpohler/3kq2h • Visibility: jsfiddle.net/ patpohler/eV4Rr/1 Sunday, October 21, 2012

Slide 23

Slide 23 text

Control flow: foreach • Use foreach to loop through an array and binds elements to markup inside • $index gets the position, $data returns current element, $parent is the containing object • Demo: http://jsfiddle.net/ patpohler/CEKKW/1 Sunday, October 21, 2012

Slide 24

Slide 24 text

Control flow: if • Causes markup to appear as a conditional • Adds & removes elements to the DOM, doesn't just hide them • Use "ifnot" for negative conditionals • Demo: http://jsfiddle.net/ patpohler/7Nnbt/1 Sunday, October 21, 2012

Slide 25

Slide 25 text

Control flow: with • Helps bind complex objects (with child objects) • Changes context of binding to the child object • Demo: jsfiddle.net/patpohler/RRssq Sunday, October 21, 2012

Slide 26

Slide 26 text

Form fields • Enable / value: jsfiddle.net/patpohler/KJFMU • Click / submit • Options: jsfiddle.net/patpohler/F4gFp/1 Sunday, October 21, 2012

Slide 27

Slide 27 text

Tyson List • Allows members to create and manage todo lists • KO integrated into front- end templates • Lists are loaded, saved using EE actions • Exposes a REST/JSON API Sunday, October 21, 2012

Slide 28

Slide 28 text

Tyson List • Module folder structure • Themes, scripts needed for KO • Generating script include tag Sunday, October 21, 2012

Slide 29

Slide 29 text

Tyson List: REST API • Using EE actions to save, load lists • Turn off Output debugging, Page headers • Creating constants for EE action URLs Sunday, October 21, 2012

Slide 30

Slide 30 text

ko.mapping plugin • Maps data from the server as plain Javascript objects or JSON to KO models • Use ko.mapping.fromJS to convert a JS object to a KO view model • ko.mapping.toJS will convert a KO object to a regular object Sunday, October 21, 2012

Slide 31

Slide 31 text

Resources • Knockoutjs.com • Tutorial - learn.knockoutjs.com • Tyson List - github.com/patpohler/Tyson-List • Email me - [email protected], or follow me at @patpohler Sunday, October 21, 2012

Slide 32

Slide 32 text

Questions? Sunday, October 21, 2012

Slide 33

Slide 33 text

Thank you! Sunday, October 21, 2012