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

You Might Not Need jQuery

http://youmightnotneedjquery.com

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