UI5 with Akamai - Introduction to the Content Delivery Network

©2018 AKAMAI | FASTER FORWARDTM
UI5 with Akamai
Introduction to the Content Delivery Network
20-JULY-2018

Agenda What is a CDN?1
Why do you need a CDN?2
How does a CDN work?3
Demo/Hands-On4
Q & A5
Gokul Anand E
SolutionsArchitect II

• Content Delivery Network
• Highly-distributed platform of servers optimized to deliver content
quickly.
• Dispersed across many physical and network locations, in order to
respond directly to end user requests.
• Fast and secure delivery.
• It acts as an intermediary between a content server(origin) and its end
users or clients.
What is a CDN?1

RELIABLE SECURE
234000+ servers | 100% availability | 15-30% of daily Internet traffic
FAST
Why do you need a CDN?2 To Improve Performance

Akamai overview

Why Akamai for Cloud Delivery?
• Akamai Intelligent Platform
• Offload: Reduce requests to cloud
origins and cache at the Edge.
• Performance: Accelerate dynamic
content.
• Security: Weakness of cloud providers;
Lock down cloud origins.
• Availability: 100% Availability SLA;
• Hybrid Clouds / Multi-DC: Akamai is
cloud provider agnostic.
• Routing: Geo-based routing based on
origin locations; flexible routing rules.
rules.
• DevOps: developer.akamai.com
Cloud Infrastructure Cloud Delivery (Akamai)
Includes technology tools to build and
operate servers, storage, and computing for
digital applications
Includes automated intelligence and
machine learning to route, accelerate,
secure, and analyze digital application
performance to maximize business
outcomes
Akamai and Cloud Providers

Running over the platform is Akamai’s Intelligent software that enables high-performing and secure
web experiences, to any device, anywhere.
WEB PERFORMANCE
Web users
MEDIA DELIVERY
Web users
CLOUD SECURITY
Cloud and Data center
infrastructure
ENTERPRISE
Branch users
Akamai Product Portfolio

Edge closest
to end-user
Edge closest
to origin
Akamai Intelligent
Platform
DNS
Resolution
Before using Akamai
a.b.com A 1.2.3.4
After using Akamai
a.b.com CNAME a.b.com.edgekey.net
a.b.com.edgekey.net A 6.7.8.9
Akamai
Configuration
Hostname
a.b.com
Origin Hostname
origin-a.b.com A 1.2.3.4
How does a CDN work?3
Origin
End users

Bootstrapping from Content Delivery Network
Bootstrapping: Loading and Initializing
To use OpenUI5 features in your HTML
page, you have to load and initialize the
SAPUI5 library.
OpenUI5 can either be loaded locally with a relative path from a Web server or externally from a
Content Delivery Network (CDN) using an absolute path.

• Install (Pre-requisite)
• Modify Headers for Google Chrome™ - Chrome Web Store
• Add Akamai pragma headers
• Demo URL: https://openui5.hana.ondemand.com/
• We will see:
• DIG/nslookup command
• HTTP/2
• TCP_HIT
• Network – hosts.txt file spoofing
• Performance comparison
Demo/Hands-on4

Tools:
• DIG command
• NSLOOKUP command
• www.digwebinterface.com
How to check if a hostname is using Akamai?
• Hostname
• Origin hostname

How to check CDN is enabled in UI5? (Browser-level)
Enable CDN
UI5 libraries are loaded from CDN URL
https://openui5.hana.ondemand.com
Disable CDN
UI5 libraries are loaded from Origin
https://openui5.eu1.hana.ondemand.com

How to check CDN is using HTTP/2?
CDN is enabling HTTP/2, to verify HTTP/2 is being used:
- Go to Chrome > Developer Tools
- Select Network graph
- Load page e.g. https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html
- Check protocol column for “h2”

Performance comparison - With and without Akamai
• Performance tests brought improvements of up
to 40% (measured for Fiori Launchpad (FLP).
• Requests to origin (either as dynamic requests
or 404s) are causing long roundtrips
• Avoid synchronous requests and 404
https://blogs.sap.com/2017/06/08/fiori-for-s4hana-performance-tips-and-tricks-in-s4hana-1610-on-premise/

Performance comparison
• Performance tests brought improvements of up to 40%
• Requests to origin (either as dynamic requests or 404s) are causing long roundtrips
• Try to avoid synchronous requests and 404 as much as you can
Performance comparison by http://www.webpagetest.org
From
origin
US1
From
origin
EU1
From
Akamai
Compared access by Chrome:
- From 5 different locations:
• Sao Paulo
• Mumbai
• Sydney
• Frankfurt
• Virginia
- Results from: Origin US1
- Results from: Origin EU1
- Results from: Akamai
https://openui5.hana.ondemand.com/test-
resources/sap/tnt/demokit/toolpageapp/webapp/in
dex.html

Performance comparison
Performance comparison by apache benchmark ab -n 100 –c 10 url
Requesting from origin: openui5.eu1.ondemand.com
Total time: 16.268 seconds
Requesting from CDN: openui5.hana.ondemand.com
Total time: 10.141 seconds

How to check if the CDN is caching an asset?
To verify an asset is being cached:
1. Add “Modify Headers” extension from Google Chrome Store.
2. Add Akamai Debug headers to your requests.
(Pragma: akamai-x-cache-on, akamai-x-check-cacheable, akamai-x-get-cache-key, ...)
3. Go to Chrome > Developer Tools
4. Select Network graph.
5. Load page e.g. https://openui5.hana.ondemand.com
6. Check responses for Akamai-Cache (responses with like “TCP_HIT, TCP_MEM_HIT” came from cache)

SAP articles on Performance Acceleration
Basic articles about improving performance – especially when using CDN
SAPUI5 Application Startup Performance – Best Practices (Oct 2016):
https://blogs.sap.com/2016/10/29/sapui5-application-startup-performance-best-practices/
Step 1: Loading SAPUI5 libraries asynchronously
Step 2: Using the event attachInit of the SAPUI5 core
Step 3: Use the AKAMAI network to reduce latency effects
Step 4: Optimizing the application resources
Step 5: Using the init event of the Component
SAPUI5 Application Startup Performance – Advanced Topics (Oct 2016):
https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/
1. Asynchronous Component Loading
2. Language fallback causing 404s for properties files
3. Usage of OData Model V2
4. Use model preload feature
5. Eliminate all 404s

Language fallback causing 404s for properties files
Let’s have a closer look at the network trace again for my i18n file:
First step, let’s rename our i18n file to i18n_en.properties:
Next, let’s configure SAPUI5 to only use this language from now on:
Note: data-sap-ui-language=”en”

Minify the code with component preload:
https://blogs.sap.com/2015/04/27/performance-improvement-with-component-preloadjs/

Q & A

THANK YOU
gokul@akamai.com

UI5 with Akamai - Introduction to the Content Delivery Network

More Related Content

What's hot (20)

Similar to UI5 with Akamai - Introduction to the Content Delivery Network (20)

Recently uploaded (20)

UI5 with Akamai - Introduction to the Content Delivery Network

Editor's Notes