Jon Galloway - Technical Evangelist Christopher Harrison - Content Developer

The document introduces Knockout, a JavaScript library for building dynamic web applications. It discusses what Knockout provides including data binding and reusable templates. It also covers obtaining Knockout through NuGet, Bower or a CDN. The document demonstrates a simple 'Hello World' example to get started with Knockout.

Uploaded by

Sudarshan Kumar Singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

42 views24 pages

Jon Galloway - Technical Evangelist Christopher Harrison - Content Developer

Uploaded by

Sudarshan Kumar Singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 24

Jon Galloway | Technical Evangelist

Christopher Harrison | Content Developer

Meet Christopher Harrison | @geektrainer

Content Developer
Focused on web and OSS
Microsoft Certified Trainer
Still misses his Commodore 64
Long time geek
Regular presenter at TechEd
Periodic blogger
Marathoner, husband, father of one four legged child
Meet Jon Galloway | @jongalloway

Azure Technical Evangelist

Focused on ASP.NET MVC
http://weblogs.asp.net/jongalloway
Web development on Microsoft platform since late '90s
Ex-submariner; Showcase Showdown winner “Price is Right”
Popular Author and Conference Speaker
Wrox Professional MVC 5; MVC Music Store tutorial
Virtual ASP.NET MVC Conference (mvcConf)
World wide Web Camps speaker
Herding Code podcast (http://herdingcode.com)
Course Topics

Creating Dynamic Webpages With Knockout

01 | Introducing Knockout 04 | Making Server Calls and Persisting Data

02 | Binding and Models 05 | Single Page Applications

03 | Components
Setting Expectations

• Target Audience
– HTML/CSS developer
– New to Knockout
– Possibly XAML developer wanting to move to web
– Looking to fill knowledge gaps
• Suggested Prerequisites/Supporting Material
– Visual Studio 2015 Community
Join the MVA Community!

• Microsoft Virtual Academy

– Free online learning tailored for IT Pros and Developers
– Over 3M registered users
– Up-to-date, relevant training on variety of Microsoft products
• “Earn while you learn!”
– Get 50 MVA Points for this event!
– Visit http://aka.ms/MVA-Voucher
– Enter this code: Knockout (expires 12 Oct 15)
Introducing Knockout

Jon Galloway | Technical Evangelist

Christopher Harrison | Content Developer
Introducing Knockout

• What is Knockout?
• Obtaining Knockout
• Hello, Knockout
DEMO
What we’ll be building
What is Knockout?
What Knockout provides

• An MVVM library
• Automatic UI refresh and updates
• Reusable templates
• Can be used with nearly any framework
• Focused on data binding
• Small library size
What Knockout isn’t

• A full framework

• Knockout doesn’t compete with jQuery

– Still use jQuery for Ajax calls and effects
Lightweight vs full framework

Angular
Ember

Knockout

jQuery
What is MVVM?

• Model
– Domain model (or data access layer)
• View
– The display the user will see
• View model
– The data the user will see
– A “pure-code representation of the data and operations on a UI”
MVVM in pictures

Model

FirstName
View View Model
LastName
Name Name
Email
Email Email
LoadUser()

SaveUser()
MVVM in pictures
Person Model

FirstName

LastName

Load() / Save()
View View Model

Developer Developer
Bug Model

Bugs Bugs[] Title

Description

Developer

Load() / Save()
Obtaining Knockout
DEMO
Getting Knockout with NuGet
DEMO
Getting Knockout with Bower
DEMO
Using Knockout from CDN
Hello, Knockout
Knockout concepts

• Observables
– Things we want to keep an eye on
– Values may change
• When they do, everyone that’s interested is alerted

• Arrays
– Collections of objects
– Can also be observable
• Computed observables
– Values that are the result of code execution
DEMO
Hello, Knockout
©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the
U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft
must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.