Improving Perceived Page Performance with ASP.NET Web API and AJAX
•Download as PPTX, PDF•
0 likes•373 views
This document discusses improving perceived page performance in ASP.NET web applications using Web API and AJAX. It defines Web API as a client-server gateway using REST that returns JSON data and can be easily paired with client-side frameworks. AJAX is described as a way to send data between the browser and server asynchronously without disrupting the user experience. The document recommends using Web API and AJAX to eliminate full page postbacks, improve performance and user experience, and maintain clean separation of concerns in the code. It provides steps and examples for getting started with Web API in an ASP.NET application and making client-side calls.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Improving Perceived Page Performance with ASP.NET Web API and AJAX
Similar to Improving Perceived Page Performance with ASP.NET Web API and AJAX (20)
Recently uploaded
Recently uploaded (20)
Improving Perceived Page Performance with ASP.NET Web API and AJAX
- 1. Improving Perceived Page Performance with ASP.NET Web API and AJAX Chris Bohatka
- 2. About Me • Chris Bohatka • .NET Web Developer • Clean Code • UX • @cjb5790 • http://chris.bohatka.com
- 3. • Founded in 1999 in Mentor, OH • Global leader and pioneer in enabling authenticated payments, secure transactions and alternative payment brands TokenizationMobile Solution Design Consumer Authentication Alternative Payments
- 5. • Production Engineering Specialist • Technical Services Specialist • Software Developer • https://www.cardinalcommerce.com/Career-Opportunities Available Positions
- 10. Why Not Postback? 1. Performance 2. User Experience 3. Code Maintainability
- 13. What is Web API? • Client-Server gateway via REST • Framework • Built on ASP.NET MVC • Open Source • https://github.com/aspnet/Mvc • Available via NuGet
- 14. What is REST? • Representational State Transfer • Stateless • Architecture • Light Weight • Pure HTTP • Cacheable • Utilizes JSON
- 16. Client-Server Gateway • Returns JSON data
- 17. Client-Server Gateway • Easily pair with client-side frameworks and widgets • Handlebars • AngularJS • KendoUI
- 19. Actual Performance • Eliminate a roundtrip • Less data access • Only reload what you need • Smaller HTTP requests • Direct
- 21. Perceived Performance • Actual Performance from a User’s perspective • Load times Actual Perceived= (kinda)
- 23. UI Examples
- 24. Code Maintainability • Separation of Concerns • DRY (Don’t Repeat Yourself) • Unit Testing
- 25. Web Api Routing • Built on top of MVC • Uses same routing engine • Decorate with Route attribute • Use attributes to drive API method • HttpGet • HttpPost
- 26. Web API Advantages Why should I use it? • Take existing logic, expose to client • Supports all HTTP verbs • Work in familiar environment • Eliminates Postback • JSON Object Serialization • Utilize .NET Security When to use it… • Filtering • Complex forms • Complex data loads • Pair with client side templates
- 27. Basic Web API Example
- 28. Intermediate Web API Example
- 29. What is AJAX?
- 32. What Is AJAX?
- 33. What is AJAX? • Asynchronous Javascript And XML • XML has been replaced with JSON • A way to send data back and forth between the browser and the server without disrupting the user experience
- 34. How to call Web API on the client
- 35. You Might Not Need jQuery http://youmightnotneedjquery.com
- 36. Let’s Get Started... Step 2: Create a WebApiConfig Step1: Install via NuGet
- 37. Let’s Get Started... Step 3: Add to Global.asax
- 38. Let’s Get Started... Step 4: Create Your Controller Step 5: Create Your First Endpoint
- 39. Let’s Get Started... Step 6: Make Client Side Call
- 40. Demo
Editor's Notes
- Number of other large Fortune 500 companies
- Web Forms
- End up using query string parameters: if PostBack and this...
- Give me 3 good reasons... Code Maintainability: Event Driven & Stateful
- Web Forms compatible
- What is REST? SOAP, REST Longest time I was unsure of what REST really was, “oh, okay, it’s an API?” Cacheable: GET requests
- http://developer.marvel.com/docs
- Less data access: no need manage state, lookup references Less churn
- Most users aren’t aware of performance optimizations Load time = display loading gif - dependent on server latency Actual vs Perceived depends on server configuration
- Checkout example Event Driven, Stateful Multiple steps, multiple pages, takes 5 min RESTful Multiple steps, one page, takes 2 min Another great example, employment application Or decision tree...interactive documentation
- I told you I like Clean Code... Snuck this one in MVC Non-Action N-Tier
- REST API = URL driven Web Api makes it easy with attribute routing
- Work in familiar environment = .NET, Visual Studio I used to think building REST API’s was only available in other javascript-y languages Security: Cross Site Forgery Token
- Security through POST
- Intentionally Left Blank
- Module Pattern
- Cleaner Trojan War Hero Amsterdam Football Club (most successful) Deadpool Villain, like The Hulk