Build Modern Web Apps Using ASP.NET Web API and AngularJS

Build Modern Web Apps Using ASP.NET Web API and AngularJS

• 1.
  Build Modern WebApps using ASP.NET Web API & AngularJS Taiseer Joudeh Senior IT Team Lead at Aramex Twitter : @tjoudeh Blog: http://bitof tech.net
• 2.
  Agenda • Deepdive into ASP.NET Web API • REST Specifications • Build RESTful HTTP service using Web API • Single Page Applications Overview • SPA Frameworks • Build simple SPA using AngularJS • Host the project on Microsoft Azure
• 3.
  What is ASP.NETWeb API? • Framework for building HTTP based services • Use HTTP is application protocol • Designed for broad reach (To any client speaks HTTP!) • HTTP != REST • The framework does not enforce an architectural style • Can be used with: • ASP.NET Web Forms • ASP.NET MVC
• 4.
  ASP.NET Web APIFeatures • Built on top of ASP.NET Stack • Native Support for ASP.NET Routing • Convention over Configuration • Native abstraction on top of raw HTTP protocol • Brand new HTTP client toolkit • High level of scalability on architecture and on the cloud • Easily build RESTful compliant Services
• 5.
  What is RESTfulServices? • REST = Representation State Transfer • Stateless architect which runs over HTTP (Not a protocol) • Four basic design principals for RESTful services: 1. Use HTTP Verbs only to interact with resources 2. Interaction with resources is stateless, request/response contain all information 3. Resources identified by URIs only (Services Discovery) 4. Content Negotiation (Support for XML/JSON)
• 6.
  Resources in RESTfulServices Operation HTTP Verb ResourceURI Get all students GET /api/students Create a new student POST /api/students Get a student GET /api/students/{username} Update a student PUT /api/students/{username} Delete a student DELETE /api/students/{username}
• 7.
  Why to buildRESTful Services? • Can be easily consumed by any client (Mobile Apps, SPA, Desktop Apps, Service to Service, etc…) • Lightweight (No XML parsing, less bandwidth, just the payloads) • Easier to learn and build, you can get up running quickly. • Closer to Web design specification, all about HTTP protocol.
• 8.
  Demo
• 9.
  To implement aWeb API….. • Derive from API Controller • Implement your HTTP Methods • Maps URI space to your API controllers • Ex: api/{controller}/{id} • {controller} + “Controller ” = ApiController Type Name • Simple types are taken from URI • Route data, query parameters • Complex types come from the body • MediaTypeFormaters are configured to deserialize request body based on content type • JSON, XML, and form-url-encoded are supported out of the box
• 10.
  Demo
• 11.
  What is SPA? • Single Page Application – Bad Name maybe! (Rich Web Applications) • Load all necessary resources up-front with single page load (shell page) • Bring the desktop experience to the web – Partial loads • Built entirely with JS and HTML
• 12.
  Motivations to buildSPA • Rich user experience – faster responses • Reduce round tripping between client and the server • Reach – SPAs can reach different users on different platforms.
• 13.
  SPA Architecture Philosophy • Thin Stateless Server • Role is a service (RESTful API is important) • Stateless server…easy to scale • Strong separation of concerns which leads to lower network latency, less bandwidth usage, snappy response • MVC at the Client • View: sets on top of the architecture (Think of page). • Model: set at the bottom of the architecture, holds the data for the view • Controller: Sets in between, orchestrator between View and Model, handle business logic
• 14.
  SPA Frameworks •Consider framework with features: • Browser history management (Support for back button) • Templating engine (Mustache, Handlebars, etc…) • Two way data binding • Routing service • Framework examples: • AngularJS • EmberJS • BackboneJS
• 15.
  Thank You!