This document discusses web apps and progressive web apps. It begins with an introduction to Maria Clara Santana and her background. It then covers topics like the growth of mobile, differences between native and web apps, what UX design entails, and moves into discussing progressive web apps. It provides requirements for progressive web apps, examples of how to build them using technologies like Polymer, and tips for making them responsive, app-like, engageable, connectivity independent, and installable. It concludes with recommendations for further reading on progressive web apps.

1. WEB APPS
TO INFINITY AND BEYOND
@OLARCLARA
#CPBR9

2. Maria Clara Santana
Software Developer
UX enthusiast
Star Wars fangirl

3. (Source: http://bit.ly/1SETtqm)
meetup.com/GDG-Maceio

4. It’s a mobile, mobile, mobile world.
We already know it.
(Source: http://bit.ly/1ZOMYBu)

5. Web vs. Native

6. Native Apps flow
>> Open the store;
>> Search for the app;
>> Download
>> Accept permissions;
>> Install;
>> Use the app;
>> Type URL;
>> Use the app;
Web Apps flow

7. (Source: The U.S. Mobile App Report)

8. (Source: http://bit.ly/1nuPVeX)

9. What is UX Design?

10. “UX Design is the process of enhancing user
satisfaction by improving the usability,
accessibility and pleasure provided in the
interaction between the user and the product.”
UX Curve: A method for evaluating long-term user experience (2011)

11. (Inspired by: http://bit.ly/1OFxlKI)
FUNCTIONALITY
RELIABILITY
USABILITY
PLEASURABLE
AESTHETICS

12. UI vs. UX

14. UX Design
>> Usability engineering;
>> Information Architeture;
>> Prototypes;
>> Graphic design;
>> Brand alignment;
>> Interface layout;
UI Design

15. Moving back to UX...

16. (Source: http://bit.ly/1SETtqm)

17. Searches containing “ux design”
(Source: Google Trends, viewed on 08/01/2016)

18. UX state of mind

19. mobile first
offline-first
touch-first
design
personalized
experience
mobile enabled
experiences
installable
web apps
content
design
accessibility
push
notifications

22. Progressive Web Apps

23. Progressive Web Apps Flow
>> Type the URL;
>> Use the app;
>> Progressive enhancement...

24. Basic requirements
>> A manifest;
>> ServiceWorkers;
>> HTTPS;
>> Engageable;

25. So, let’s build Progressive Web Apps!

26. (Source: http://bit.ly/1sr3s7E)

27. polymer

28. (Photo: http://bit.ly/1d2I81R)
WEB COMPONENTS

29. elements.polymer-project.org

30. 1. Make it responsive

31. This and more on polymerlabs.github.io/app-layout/

32. 2. Make it app-like

35. 3. Make it re-engageable

36. Push notifications are great. But
let the user choose.

39. 4. Make it connectivity independent

41. Caching strategies:
>> fatest;
>> networkFirst;
>> networkOnly;

44. 5. Make it load fast

45. “74% of mobile users won’t wait longer that 5
seconds for a page to load.”
Mobile Application Testing & Performance Analysis

46. Async prevents the renderer from being
blocked

47. 6. Make it installable

51. (Source code on: http://bit.
ly/1Vuughe)

52. (Source code on: http://bit.
ly/1P0Ktaj)

53. Further reading
>> Progressive Web Apps: Escaping Tabs Without Losing Our Soul (http:
//bit.ly/1K8Tm4L);
>> Google Developers: Progressive Web Apps (http://bit.ly/1nlXeEV);
>> Getting started with Progressive Web Apps (http://bit.ly/1VyrQyX);

54. “When you stop learning, you stop growing.”
Karlie Kloss

55. Thank you!
about.me/mariaclarasantana