building great spa’s with angular js, asp.net mvc and webapi
DESCRIPTION
Slides from my Techorama 2014 presentationTRANSCRIPT
Building great SPA’s with
AngularJS, ASP.NET MVC and WebAPI
2
What are we going to talk about?
• AngularJS• ASP.NET MVC• ASP.NET WebAPI• Single Page Applications
3
Who am I?
• Maurice de Beijer• The Problem Solver• Microsoft Integration MVP• Freelance developer• DevelopMentor instructor• Twitter: @mauricedb• Blog: http://msmvps.com/blogs/TheProblemSolver/ • Web: http://www.TheProblemSolver.nl• E-mail: [email protected]
4
AngularJS
• Powerful JavaScript MVC framework• Makes it easy to build Single Page Applications• Focused on building CRUD applications• Very modular with Dependency Injection• Makes it relatively easy to build testable
applications
5
AngularJS
6
AngularJS cons
• Large JavaScript applications are hard to maintain
• Even a browser based application needs a server part
• Doing the same thing in every browser wastes CPU cycles
7
AngularJS
Demo
8
ASP.NET WebAPI
• Makes it easy to serve up data in a RESTful manner
• Easy to consume from AngularJS– $resource– $http
9
ASP.NET WebAPI
Demo
10
ASP.NET MVC
• Powerful server side MVC framework– Routing– HTML helpers– Editor templates
11
ASP.NET MVC cons
• Doing everything on the server is wasteful– UI lag because of latency– Need to worry about scaling sooner
12
Single Page Applications
• SPA’s are great for the end user– Responsive
• SPA’s are great for the server– Only request to the server when needed
13
Single Page Applications cons
• SPA’s can be hard to maintain– Less structure out of the box– Hard to maintain when large
14
Single Page Applications
Demo
15
The best of both worlds
• Mix ASP.NET with Angular– Use the structure of ASP.NET to create Mini SPAs– MVC HTML helpers to reduce markup repetition
16
The best of both worlds
Demo
17
Questions
?https://github.com/mauricedb/Techorama2014/
18
A big thank you to our sponsors
Gold Partners
Silver & Track Partners
Platinum Partners