7/25/2019 Building Rich User Interaction with Knockout JS

1/15

Building Rich User Interaction withKnockout JS

Ian Robinson

Enliven

7/25/2019 Building Rich User Interaction with Knockout JS

2/15

Ian Robinson

github.com/irobinson

@irobinson

http://github.com/irobinsonhttp://localhost/var/www/apps/conversion/tmp/scratch_5/twitter.com/irobinsonhttp://localhost/var/www/apps/conversion/tmp/scratch_5/twitter.com/irobinsonhttp://github.com/irobinson

7/25/2019 Building Rich User Interaction with Knockout JS

3/15

Agenda

Introduction

Key Knockout Concepts

How? Live examples DotNetNuke 6.2

User File Manager Example

7/25/2019 Building Rich User Interaction with Knockout JS

4/15

Overview

Why JavaScript Frameworks?

https://github.com/addyosmani/todomvc

Backbone, Spine, Ember, Knockout

Structure provided by proven patterns (MVC, MVVM)

Knockout

MVVM

Model = Data (e.g. service) View = UI (e.g. html)

ViewModel = Code representation of data (e.g. JS object)

https://github.com/addyosmani/todomvchttps://github.com/addyosmani/todomvc

7/25/2019 Building Rich User Interaction with Knockout JS

5/15

Key Concepts: Declarative

Bindings

Declarative Bindings

What and where, not how

7/25/2019 Building Rich User Interaction with Knockout JS

6/15

Key Concepts: Automatic UI

Refresh

Automatic UI Refresh

Your data drives the UI

Manipulate your data, not the DOM

7/25/2019 Building Rich User Interaction with Knockout JS

7/15

Key Concepts: Dependency

Tracking

Dependency Tracking

Create relationships between data

Observables, Observable Arrays, and Computed

Observables

7/25/2019 Building Rich User Interaction with Knockout JS

8/15

Key Concepts: Templating

Templating

Native (e.g. foreach, if)

String Based (third-party, e.g. Underscore,

jQuery.tmpl)

7/25/2019 Building Rich User Interaction with Knockout JS

9/15

Named Template

7/25/2019 Building Rich User Interaction with Knockout JS

10/15

External Template Engine

7/25/2019 Building Rich User Interaction with Knockout JS

11/15

Live Examples

http://knockoutjs.com/examples/helloWorld.html

7/25/2019 Building Rich User Interaction with Knockout JS

12/15

Knockout in DotNetNuke 6.2

Shipped with DotNetNuke

/resources/shared/scripts/knockout.js

Used throughout the new modules

I implemented it in User File Manager

Templating

DNN Service API

Custom bindings Computed bindings

jQuery Plugin / Reusable Component

7/25/2019 Building Rich User Interaction with Knockout JS

13/15

User File Manager

7/25/2019 Building Rich User Interaction with Knockout JS

14/15

Thank you!

Ian Robinson

Co-Founder & CTO

Enliven

ian@enlivenstudio.com

@irobinson | @enlivenhq

7/25/2019 Building Rich User Interaction with Knockout JS

15/15

Thanks to all our Generous Sponsors!