This document discusses Angular, TypeScript, and Katana. It provides an overview of these technologies including what OWIN and Project Katana are, how to decouple the client and server, and demos of using Angular, TypeScript, and Reactive Extensions with ASP.NET. It also summarizes what Angular, TypeScript, and Reactive Extensions are and how they can be used together to build single page applications.

1. Angular, TypeScript and Katana
Twin Cities Code Camp
October 4th 2014
Justin Wendlandt
jwendl@hotmail.com
@jwendl
http://www.jwendl.net/

2. Keywords and Terms
Katana

3. ASP.NET vNext
• Who to follow for more
information
 Scott Guthrie, Scott
Hanselman, Damian Edwards
and David Fowler.
 Channel 9 Videos

4. What is OWIN?
• Decouple server and application
 No more System.Web – YAY!
• Decouple client and server
• Open standards
• Stimulate open source Eco
System
• Windows Internet of Things?
 Embedded Devices?
Application
Framework
OWIN Middleware
Server
Host

5. What is Project Katana?
• OWIN implementation for IIS
• A few hooks into System.Web
• A few hooks into
System.Net.HttpListener

6. Demos - Katana

7. What About the Server?
• Web API vs. MVC
• Business Logic
• Data Access Layer
• No Code Changes at all
 (Unless you use Cache)
 (Unless you use Session)
 (Unless you use System.Web)

8. Decoupling the Client
• Do you SPA?
• Do you run server-side?
• Do you go Hybrid?

9. Using the Hybrid Approach
• ASP.NET MVC
• TypeScript
• Reactive Extensions
 For Ajax
 For Updating DOM (using
jQuery)

10. Using the SPA Approach
• ASP.NET Web API
• TypeScript
• Angular
• Reactive Extensions
 For Ajax

11. What is Angular?
• It’s HTML Enhanced for Web
Apps
• Single Page Application
Framework

12. Angular – Routing
• Root page never navigates
• Clicked links “Navigate”
 Then data bind

13. Angular – $scope
• Scope delivers model to DOM
and controller
• $scope is NOT the model itself
• Should contain multiple models

14. Angular – Dependency Injection
• Resolves instance of object for
you
• Helps decouple services and
providers

15. Angular – Two-Way Data Binding
• No code to handle the binding,
ng-model does it for you
• Based on $scope
• Can contain filters for read-bindings

16. Angular Demo – HotTowel

17. Reactive Extensions for JavaScript
• Uses promises – Awesome!
• Can handle events as well
• Throttle Input if need be
• Perfect for anything
asynchronous

18. The Reactive Manifesto
• Respond in timely manner
• Consistent Quality of Service Responsive
• Stay responsive in the face of failure
• Allows for recovery Resilient
• Stay responsive under varying workload
• No central bottlenecks Elastic
• Relies on Asynchronous Messages
• Ensure Loose Coupling Message Driven

19. Why Should I Always use RxJS?
• Event-Driven
• Avoids Nasty Nested Callbacks
• Resembles .NET Fluent API
• Perfect Fit for $Ajax calls that an
Angular App would need

20. Demo - SteamLookupApp

21. What is TypeScript?
• It’s not JavaScript
• It’s not C#
• Interfaces are model prototypes
• Modules are a separation layer

22. Interfaces vs. .d.ts Files
• TypeScript Interfaces
 Describes a model
– var dog: Animal = { … }
 Ensuring a model passed into
a function
– function Bark (animal: Dog) { … }
• TypeLite
 Takes .NET models and turns
them into TypeScript
Interfaces
• TypeScript .d.ts files
 Third Party Applications
 _refs.ts
• DefinitelyTyped project on GitHub

23. Web Essentials
• Preview Window
• Drag n’ Drop
• Native _refs.ts support

24. Demo - AsgardBlogEngine

25. References
• Videos
 http://channel9.msdn.com/Event
s/Speakers/Damian-Edwards
 http://channel9.msdn.com/Event
s/Speakers/david-fowler
• TypeScript
 http://www.typescriptlang.org/
• Angular JS
 https://angularjs.org/
• HotTowel / HotTowel TypeScript
 https://github.com/johnpapa/HotT
owel-Angular
 https://github.com/johnnyreilly/Ho
tTowel-Angular-TypeScript
• RxJS
 http://reactive-extensions.
github.io/RxJS/
 http://www.slideshare.net/mattpo
dwysocki/cascadiajs-dont-cross-the-
streams

26. Questions???
• http://www.jwendl.net/
• Twitter: @jwendl
• jwendl@hotmail.com
• http://speakr.cc/
• http://github.com/jwendl/