PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R....
Transcript of PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R....
![Page 1: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/1.jpg)
Matija Grcic
![Page 2: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/2.jpg)
2
Session
Introduction PWA RESTSolution
Closing
![Page 3: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/3.jpg)
1Progressive Web Apps
![Page 4: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/4.jpg)
4
Reliable
Fast
Engaging
60%
user experiences
4
Progressive Web Apps
![Page 5: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/5.jpg)
5
Why build a Progressive Web App?
Home Screen
5
Increased engagement
![Page 6: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/6.jpg)
6
Why build a Progressive Web App?
Work reliably
6
Improved conversions
![Page 7: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/7.jpg)
7
HTTPS
7
How to build a Progressive Web App?
Responsive
Offline
Metadata
3G
Cross-browser
Transitions
URL
![Page 8: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/8.jpg)
8
Indexability& social
8
How to build a Progressive Web App?
User experience
Performance
Caching
Pushnotifications
CredentialManagement
API
PaymentRequest
API
PWA
![Page 9: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/9.jpg)
2REST Api
![Page 10: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/10.jpg)
10
A truly RESTful API looks like hypertext.
Roy T. Fielding
![Page 11: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/11.jpg)
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
![Page 12: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/12.jpg)
12
HAL - Hypertext Application Language
12
![Page 13: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/13.jpg)
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
![Page 14: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/14.jpg)
3SOLUTION & ANALYSIS
![Page 15: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/15.jpg)
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
![Page 16: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/16.jpg)
16
![Page 17: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/17.jpg)
17
![Page 18: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/18.jpg)
18
![Page 19: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/19.jpg)
19
![Page 20: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/20.jpg)
20
![Page 21: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/21.jpg)
21
![Page 22: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/22.jpg)
22
![Page 23: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/23.jpg)
23
![Page 24: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/24.jpg)
24
![Page 25: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/25.jpg)
25
![Page 26: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/26.jpg)
26
![Page 27: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/27.jpg)
4CLOSING
![Page 28: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/28.jpg)
28
Moving from Multichannel to Omnichannel
28
Mastering Omni Channel B2B Customer Engagement Report
![Page 29: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/29.jpg)
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
![Page 30: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/30.jpg)
30
THANKSMatija Grcic
@matijagrcic
matijagrcic
8 West Consulting
@8westconsulting
8-west-consulting
![Page 31: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/31.jpg)
RESOURCES
![Page 32: PWA with Umbraco · 11. C. onstraints that identify a RESTful architecture. S. tatelessness. R. esource-orientation. U. niform interface. H. ypermedia-driven application state. REST](https://reader030.fdocuments.net/reader030/viewer/2022040914/5e8ab4b6c36ab70fbf6d5ce9/html5/thumbnails/32.jpg)
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