PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R....
32
Matija Grcic
Transcript of PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R....
Matija Grcic
2
Session
Introduction PWA RESTSolution
Closing
1Progressive Web Apps
4
Reliable
Fast
Engaging
60%
user experiences
4
Progressive Web Apps
5
Why build a Progressive Web App?
Home Screen
5
Increased engagement
6
Why build a Progressive Web App?
Work reliably
6
Improved conversions
7
HTTPS
7
How to build a Progressive Web App?
Responsive
Offline
Metadata
3G
Cross-browser
Transitions
URL
8
Indexability& social
8
How to build a Progressive Web App?
User experience
Performance
Caching
Pushnotifications
CredentialManagement
API
PaymentRequest
API
PWA
2REST Api
10
A truly RESTful API looks like hypertext.
Roy T. Fielding
11
Constraints that identify a RESTful architecture
Statelessness
Resource-orientation
Uniforminterface
Hypermedia-driven
application state
REST (REpresentational State Transfer) is the name given to an architectural style for networked software. The REST architectural style
was first identified by Roy Fielding and is documented in his dissertation[Architectural Styles and the Design of Network-based Software
Architectures]. The same term ("REST") and related terms ("RESTful", "Pragmatic REST", "High REST/Low REST" and others) can also
be used to refer to a varying collection of design patterns for implementing services on the web over HTTP. Fielding addresses this
discrepancy in the use of the term "REST" in his 2008 blog post, "REST APIs must be hypertext-driven."
11
Mike Amundsen
12
HAL - Hypertext Application Language
12
13
HAL's design is well balanced and introduces hypermedia without compromising too much on the
simplicity of JSON.
Mike Kelly
HAL - Hypertext Application Language
3SOLUTION & ANALYSIS
UmbracoUsed as Headless CMSExposes structured data
ReactReact App Frame (PWA App Shell)Used for views
WebApi.HalAdds support for the Hal Media Type (and Hypermedia) to Asp.net Web Api
Architecture
15
Webpack 2Code-splittingTree-shakingDetecting bloat
16
17
18
19
20
21
22
23
24
25
26
4CLOSING
28
Moving from Multichannel to Omnichannel
28
Mastering Omni Channel B2B Customer Engagement Report
29
Reliable
Fast
Engaging
The Washington Post have seen load times average 400 milliseconds,an 88%
improvement over our traditional mobile website. Source
Add to Home Screen also delivers high-quality visits, with customers converting 70% more than average users. Source
The Weather Channel goal is to supply timely, accurate information when it
matters most. After upgrading their site to a PWA, they saw
a 80% improvement in load time. Source
30
THANKSMatija Grcic
@matijagrcic
matijagrcic
8 West Consulting
@8westconsulting
8-west-consulting
RESOURCES
32
Simpler web payments: Introducing the Payment Request APIDriving user growth with performance improvementsaspnet/JavaScriptServices@typesProgressive web appsNext-generation web apps for educationYour First Progressive Web AppProgressive Web App by airberlin - Presentation at Google I/OWhat, Exactly, Makes Something A Progressive Web App?Integrating Progressive Web Apps deeply into AndroidHow progressive web apps will change e-commerceProgressive Web Apps with React.jsBuilding Indexable Progressive Web AppsREST APIs must be hypertext-drivenWith lessons from Google, The Washington Post has brought its page load speed down to millisecondsPWA BuilderTechnical Seo For Progressive Web Apps (PWA)Progressive Web App Summit 2016Totally Tooling Tips: Progressive Web AppsThe Very Real Performance Impact on RevenueAvon.com: An Umbraco approach to a headless CMS
