Presenattion for PWA meetup in London

1. Vue Storefrontheadless PWA for eCommerce

2. Filip Rakowski
Co-creator @ Vue Storefront
Frontend Developer @ Divante
Author @ PWA.buzz
filrakowski
frakowski

3. Subscribe!
PWA.buzz

4. Mobile eCommerce today

5. 2014 - 1.6 billion
2017 - 2 billion
...still growing!
Users made some kind of eCommerce transaction
using phone or tablet
5

6. 6

8. Slow, especially with bad internet connection
Complicated checkouts (mobile UX killer)
Not suited for mobile devices (sometimes even without RWD!)
Client perspective

9. Hard to find developers specialized in eCommerce platforms
Long and complicated development (long time2market)
User problems decrease conversion rate
Business perspective

11. Vue Storefront
eCommerce of the future!

13. Offline-ready, ultrafast PWA
Really fast and enjoyable development with all
standard eCommerce features out of the box
Can be integrated with any eCommerce!
Key features
Mobile first and works like a native mobile app
Painlessly upgradable core with new features
every month (as NPM package)
No architectural limitations (normal Vue.js app)

14. Key features
Open source and MIT license!

15. 15
How it works (simplified)
eCommerce CMS
Vue Storefront API Vue Storefront
Same for every platform
thanks to adapter
API Adapter
For each platform
(Magento 2 and Pimcore
integrations are ready)
Magento, Shopify or any
other
Single Page App PWA
written in Vue.js
NoSQL DB

16. How it works (simplified)
16
eCommerce CMS
Vue Storefront API Vue Storefront
API Adapter
NoSQL DB
Real-time sync based on product
updates

17. Frontend architecture
Extensions
(e.g new payment
methods, mailchimp,
integration, Google
Analytics integration)
Theme
This is your shop! Developed
like a separate Vue.js
application that can make use
of VS core and extensions
Vue Storefront Core
Contains all standard
eCommerce features, state
management, offline
capabilities and database
integration.
It’s upgradable as a NPM
package and extendable via
extensions.
core
src
themes
extensions
Your playground!

18. 100% offline-ready
How to make better use of PWA features

19. Standard PWA with App Shell cached
1/5 Harolds in coolness scale

20. How can we get more Harolds?

21. Caching data
IndexedDB can cache up to 50 mb of
data
for browsers other than Safari it’s even more!

22. Did you just said
“other than Safari?”

23. Caching data
IndexedDB can cache up to 50 mb of
data
That’s a lot for just JSONs!

24. Caching data
Let’s cache App Shell (boring)
AND DATA

25. Caching data
Let’s cache App Shell (boring)
AND DATA
(a bit less boring)

26. Caching data
github.com/localForage

27. Caching data
2/5 Harolds in coolness scale

28. Dynamic data
What about dynamic data like stock quantitys or prices?

29. Dynamic data
Dynamic data is valid for some time...

30. Dynamic data
...so measure the time user is offline and display the data as
long as it should be valid

31. Dynamic data
github.com/filrak/offline-timer

32. Dynamic data
3/5 Harolds in coolness scale

33. Offline UI changes
When user goes offline and website still works he is probably
not aware of lost connection and limited functionality.

34. Let him/her know that
some parts of the app
can work differently
and take care of his
good offline
experience.

35. Create friendly
fallbacks for data that
wasn’t cached

36. Offline UI changes
github.com/filrak/vue-offline

37. Offline UI changes
4/5 Harolds in coolness scale

38. CRUD
So now we have proper offline experience but still we are
struggling with the same issue most PWA’s do

39. CRUD
Create
Read
Update
Delete

40. CRUD
Create
Read
Update
Delete
Only this works offline

41. Background sync allows us to send requests made offline
just after coming back online via Service Worker.
We can use it to allow placing offline orders!

42. The problem with offline orders (and offline requests) is that
you cannot be sure that they were not made for the second
time in other device before the first one came back online.

43. We can make use of push
notifications to confirm
orders that were placed
offline (the same way
native apps are asking for
updates).

44. 5/5 Harolds in coolness scale!

45. One tap instead of N-taps

47. 47
Join and contribute!
...or give us a GitHub star! ;)
Great community!
Ccommited developers eager to make
this project as good as it is possible
Rich documentation
...and it’s still growing ‘)
Everyday commits
New features/fixes/improvements every
day!

48. 48
Thank you!
Filip Rakowski
filrakowski @ twitter
frakowski @ medium
Piotr Karwatka
piotrkarwatka @ twitter
piotrkarwatka @ medium
Here are some links and people to
follow if you want to learn more about
Vue Storefront:
github.com/DivanteLtd/vue-storefront
VueStorefront.io
@vuestorefront