2016 06 14 mankato software development meetup - knockout.js · knockout.js? “knockout is a...

15
Knockout.js Overview Mike Wills @mikewills [email protected]

Upload: others

Post on 09-Jul-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Knockout.js Overview

Mike Wills @mikewills [email protected]

Page 2: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user
Page 3: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

What is Knockout.js?

“Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.”

Page 4: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Pros

Declarative Bindings

Associate DOM elements to model data

Automatic UI Refresh

UI updates automatically when data changes

Page 5: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

ProsDependency Tracking

Set up relationships between model data to transform and combine it

Templating

Quickly generate sophisticated, nested UIs as a function of your model data

Page 6: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

ProsSmall and lightweight (54kb, smaller when gzipped)

No dependencies

Supports all browsers (even old ones)

Works with any JavaScript Framework

Good documentation/community

Page 7: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Pros

Easy to learn

Easy to read

Easy to make quick changes

Page 8: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Cons

Not as popular as other frameworks (dying?)

Only for 2-way data binding, may need other libraries for other functionality

Page 9: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user
Page 10: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Basic Example from Website

Page 11: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Examples

aka SHOW ME THE DAMN CODE!

Page 12: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

https://city.mankatomn.gov/maps/garbage/

https://city.mankatomn.gov/maps/callsforservice/

Page 13: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Where do I learn more?

http://knockoutjs.com/

http://learn.knockoutjs.com/

http://stackoverflow.com/questions/tagged/knockout.js

Page 14: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user

Contact Me

https://mikewills.me

[email protected]

@mikewills

Page 15: 2016 06 14 Mankato Software Development Meetup - Knockout.js · Knockout.js? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user