Angular, TypeScript and KatanaTwin Cities Code CampOctober 4th 2014

Justin Wendlandtjwendl@hotmail.com

@jwendlhttp://www.jwendl.net/

Keywords and Terms

Katana

ASP.NET vNext• Who to follow for more

information Scott Guthrie, Scott

Hanselman, Damian Edwards and David Fowler.

Channel 9 Videos

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

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

System.Net.HttpListener

Demos - Katana

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)

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

Using the Hybrid Approach• ASP.NET MVC• TypeScript• Reactive Extensions

For Ajax For Updating DOM (using

jQuery)

Using the SPA Approach• ASP.NET Web API• TypeScript• Angular• Reactive Extensions

For Ajax

What is Angular?• It’s HTML Enhanced for Web

Apps• Single Page Application

Framework

Angular – Routing• Root page never navigates• Clicked links “Navigate”

Then data bind

Angular – $scope• Scope delivers model to DOM

and controller• $scope is NOT the model itself• Should contain multiple models

Angular – Dependency Injection• Resolves instance of object for

you• Helps decouple services and

providers

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

Angular Demo – HotTowel

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

asynchronous

The Reactive Manifesto•Respond in timely manner•Consistent Quality of ServiceResponsive•Stay responsive in the face of failure•Allows for recoveryResilient•Stay responsive under varying workload•No central bottlenecksElastic•Relies on Asynchronous Messages•Ensure Loose CouplingMessage Driven

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

Demo - SteamLookupApp

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

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

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

Demo - AsgardBlogEngine

References• Videos

http://channel9.msdn.com/Events/Speakers/Damian-Edwards

http://channel9.msdn.com/Events/Speakers/david-fowler

• TypeScript http://www.typescriptlang.org/

• Angular JS https://angularjs.org/

• HotTowel / HotTowel TypeScript https://

github.com/johnpapa/HotTowel-Angular

https://github.com/johnnyreilly/HotTowel-Angular-TypeScript

• RxJS http://reactive-extensions.github.

io/RxJS/

http://www.slideshare.net/mattpodwysocki/cascadiajs-dont-cross-the-streams

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