Improving Perceived Page Performance with ASP.NET Web API and AJAXChris Bohatka
About Me• Chris Bohatka
• .NET Web Developer
• Clean Code
• UX
• @cjb5790
• http://chris.bohatka.com
• Founded in 1999 in Mentor, OH
• Global leader and pioneer in enabling authenticated payments, secure transactions and alternative payment brands
TokenizationMobile Solution DesignConsumerAuthentication
AlternativePayments
Some Cardinal Customers
• Production Engineering Specialist
• Technical Services Specialist
• Software Developer
• https://www.cardinalcommerce.com/Career-Opportunities
Available Positions
Why Not Postback?
1.Performance2.User Experience3.Code Maintainability
http://brendan.enrick.com/image.axd?picture=Golden-Hammer_thumb_1.png
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
What is REST?• Representational State Transfer
• Stateless
• Architecture
• Light Weight
• Pure HTTP
• Cacheable
• Utilizes JSON
Client-Server Gateway• Returns JSON data
Client-Server Gateway• Easily pair with client-side frameworks and
widgets
• Handlebars
• AngularJS
• KendoUI
Performance
Actual Perceivedvs.
Actual Performance• Eliminate a roundtrip
• Less data access
• Only reload what you need
• Smaller HTTP requests
• Direct
Perceived Performance
Perceived Performance• Actual Performance from a User’s perspective
• Load times
Actual Perceived=(kinda)
User Experience
Shipping Address
Billing Address
Payment Information
Order Summary
Submit
UI Examples
Code Maintainability• Separation of Concerns
• DRY (Don’t Repeat Yourself)
• Unit Testing
Web Api Routing• Built on top of MVC
• Uses same routing engine
• Decorate with Route attribute
• Use attributes to drive API method
• HttpGet
• HttpPost
Web API AdvantagesWhy 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
Basic Web API Example
Intermediate Web API Example
What is AJAX?
Warning:
Javascript Incoming
What Is AJAX?
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
How to call Web API on the client
Let’s Get Started...
Step 2: Create a WebApiConfig
Step1: Install via NuGet
Let’s Get Started...
Step 3: Add to Global.asax
Let’s Get Started...
Step 4: Create Your Controller
Step 5: Create Your First Endpoint
Let’s Get Started...
Step 6: Make Client Side Call
Demo
Thank you.
@cjb5790
Top Related