improving perceived page performance with asp.net web api and ajax
TRANSCRIPT
![Page 1: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/1.jpg)
Improving Perceived Page Performance with ASP.NET Web API and AJAXChris Bohatka
![Page 2: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/2.jpg)
About Me• Chris Bohatka
• .NET Web Developer
• Clean Code
• UX
• @cjb5790
• http://chris.bohatka.com
![Page 3: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/3.jpg)
• Founded in 1999 in Mentor, OH
• Global leader and pioneer in enabling authenticated payments, secure transactions and alternative payment brands
TokenizationMobile Solution DesignConsumerAuthentication
AlternativePayments
![Page 4: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/4.jpg)
Some Cardinal Customers
![Page 5: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/5.jpg)
• Production Engineering Specialist
• Technical Services Specialist
• Software Developer
• https://www.cardinalcommerce.com/Career-Opportunities
Available Positions
![Page 6: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/6.jpg)
![Page 7: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/7.jpg)
![Page 8: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/8.jpg)
![Page 9: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/9.jpg)
![Page 10: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/10.jpg)
Why Not Postback?
1.Performance2.User Experience3.Code Maintainability
![Page 11: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/11.jpg)
http://brendan.enrick.com/image.axd?picture=Golden-Hammer_thumb_1.png
![Page 12: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/12.jpg)
![Page 13: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/13.jpg)
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
![Page 14: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/14.jpg)
What is REST?• Representational State Transfer
• Stateless
• Architecture
• Light Weight
• Pure HTTP
• Cacheable
• Utilizes JSON
![Page 15: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/15.jpg)
![Page 16: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/16.jpg)
Client-Server Gateway• Returns JSON data
![Page 17: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/17.jpg)
Client-Server Gateway• Easily pair with client-side frameworks and
widgets
• Handlebars
• AngularJS
• KendoUI
![Page 18: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/18.jpg)
Performance
Actual Perceivedvs.
![Page 19: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/19.jpg)
Actual Performance• Eliminate a roundtrip
• Less data access
• Only reload what you need
• Smaller HTTP requests
• Direct
![Page 20: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/20.jpg)
Perceived Performance
![Page 21: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/21.jpg)
Perceived Performance• Actual Performance from a User’s perspective
• Load times
Actual Perceived=(kinda)
![Page 22: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/22.jpg)
User Experience
Shipping Address
Billing Address
Payment Information
Order Summary
Submit
![Page 23: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/23.jpg)
UI Examples
![Page 24: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/24.jpg)
Code Maintainability• Separation of Concerns
• DRY (Don’t Repeat Yourself)
• Unit Testing
![Page 25: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/25.jpg)
Web Api Routing• Built on top of MVC
• Uses same routing engine
• Decorate with Route attribute
• Use attributes to drive API method
• HttpGet
• HttpPost
![Page 26: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/26.jpg)
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
![Page 27: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/27.jpg)
Basic Web API Example
![Page 28: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/28.jpg)
Intermediate Web API Example
![Page 29: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/29.jpg)
What is AJAX?
![Page 30: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/30.jpg)
Warning:
Javascript Incoming
![Page 31: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/31.jpg)
![Page 32: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/32.jpg)
What Is AJAX?
![Page 33: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/33.jpg)
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
![Page 34: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/34.jpg)
How to call Web API on the client
![Page 36: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/36.jpg)
Let’s Get Started...
Step 2: Create a WebApiConfig
Step1: Install via NuGet
![Page 37: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/37.jpg)
Let’s Get Started...
Step 3: Add to Global.asax
![Page 38: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/38.jpg)
Let’s Get Started...
Step 4: Create Your Controller
Step 5: Create Your First Endpoint
![Page 39: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/39.jpg)
Let’s Get Started...
Step 6: Make Client Side Call
![Page 40: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/40.jpg)
Demo
![Page 41: Improving Perceived Page Performance with ASP.NET Web API and AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062522/58714a6b1a28ab55588b66ad/html5/thumbnails/41.jpg)
Thank you.
@cjb5790