Progressive Web Apps: Reasons, Architectures, Strategies and Tools

Ismael Velasco (14.Nov.2018 at 19:10, 50 min)
Talk at PHPSW: Back to Front, November 2018 (English - UK)

Rating: 4 of 5

If Google has the web and mobile covered, why would they invest so heavily on a hybrid? If Tinder and Facebook are already benchmarks of success, why would they invest in PWA versions? Why would those of us working on less grandiose projects want to build PWAs? This talk will answer those questions, and give a guided tour of the state of PWAs today in various platforms; architectural issues, cache and design strategies you may need to consider in order to build commercial PWAs; and the tool ecosystem available to you. It will also touch on why you wouldn't build PWAs.

Who are you?

Claim talk

Talk claims have been moved to the new site.

Please login to the new site to claim your talk

Comments closed.


Rating: 4 of 5

14.Nov.2018 at 19:44 by Lucia Velasco (36 comments) via Web2 LIVE

"Google have Android" add an asterisk because of the new legislation...
I enjoyed that you didn't just read from the slides, and that you supplemented the information on the slides when you did. Very engaging delivery.
I LOVED learning about the history, the WHY of PWA.
What's 'bounce rate'? Not everyone could see the logos, perhaps point out some prominent stats from your stats slides and then read out some of the brand's instead of reading almost all of one and none of the other.
What's a PWA? A loooong list. Difference between strategies and architectures?? Where's the list from, your own analysis or sources? (Later: I get it, it's your plan. Please say "This is the breakdown I will go thru today" or something - it didn't feel like a title slide).
Not everyone knows what a service worker is, thanks for explaining :)
At capabilities I needed a pause to digest, or a cat picture. Perhaps introduce the slide before moving onto it.
Umming and ahhing, not humming :)
You mention web manifest in capabilities. All me about that.
I need some images, between all the bullet points.
I like the technical concepts you talk about during the architecture bit. Feels useful and helps cement the role of the architecture in my PWA.
Would like to see an example of integrating the tools, or be told where it fits into my code. I feel like the tools bit could have been multiple slides.
You keep using the word'progressive' and I'm not sure which definition you're using because I'm not sure whether you defined it initially explicitly word for word in the context of PWA.
Interesting thoughts on so stores!
Font in "from website to PWA" flow chart is unclear. Big it, bold it. Pause for effect on this slide. Move this slide to the end, move avoid slide one back.

Rating: 4 of 5

14.Nov.2018 at 19:47 by Rob Wilson (31 comments) via Web2 LIVE

I've seen Ismael's talk before at PHP South Wales, but even with this foresight into the talk, Ismael has still kept my attention, and thrown in some humour too (Mummy Web, Daddy Native; Baby PWA. - haha).

Although I enjoyed it, it would be great to see some examples of code (such as the manifest file), and maybe an example site for those who've not seen a PWA site (PHP South Wales' website is PWA for those looking for one).

Rating: 4 of 5

14.Nov.2018 at 19:48 by Martin Bampton (19 comments) via Web2 LIVE

Very informative introduction from a man who really seems to know his stuff on the topic. Good listing of resources for anyone wanting to read more into it. Handled questions very well at the end!

Rating: 4 of 5

14.Nov.2018 at 19:50 by James Rennison (1 comments) via Web2 LIVE

Great talk. Only issues were a double open parentheses and some text wasn't legible on the background in a flow diagram.
Would have liked more detail, because it's a genuinely intriguing topic. Cheeky ask: maybe a demo?
Also I failed a spam check submitting this comment.

Rating: 5 of 5

14.Nov.2018 at 20:08 by Doug Fitzmaurice (15 comments) via Web2 LIVE

Excellent summary! Covered all the questions I had, and I feel I could show the slides to anyone in the company who needed convincing on PWAs.

I agree with the comments about some of the diagrams being a little small, and I think the slide transitions were distracting as you often went back and forth to emphasise points.

Rating: 4 of 5

14.Nov.2018 at 20:12 by Jan (2 comments) via Web2 LIVE

I enjoyed listening that talk. Very informative and there was enough information about the resources to learn from.

Rating: 5 of 5

14.Nov.2018 at 21:00 by Matt Tapley (2 comments) via Web2 LIVE

Great insight into when and why to use pwas. Easy listening and engaging. No comments.

Rating: 5 of 5

15.Nov.2018 at 17:03 by Dave Barr (2 comments) via Web2 LIVE

Engaging and informative talk with just the right amount of history, present situation and looking to the future with humour and character. Very much enjoyed the talk and would certainly go to another by Ismael on this or any other subject.

Rating: 4 of 5

16.Nov.2018 at 12:57 by Dan Ackroyd (13 comments) via Web2 LIVE

HI Ismael,

I enjoyed the talk, and if you're going to give it again in the future, I think there's a few areas where it could be improved with the same content.

# Couple of things that I'm pretty sure about:

* Please practice not looking at the slides, and preferably not even pointing at the slides. Although there can be exceptions for when you're guiding the audience through a complicated diagram, in general, every speaker should have their eyes facing the audience the whole time. It's much, much easier for the audience to follow what you're saying when you are talking to them, rather than looking at the screen.

* The slides could do with some optimisation. You can be much more aggressive using the top space on a slide - there are very very venues where the top of slides are cut-off, so the content can be almost hard against the top.

Currently the title for the slides is taking up almost 50% of each slide. I think the title could be moved to the top, into the border space currently available, and then the content could take 100% of the remaining space.

* It would be worth breaking the talk into sections, and deliberately having breaks between those sections where you wrap up what that section was about, take 3 breaths and then introduce the next section. This would allow people in the audience to also take a break and mentally reset their brains, which makes it easier to follow for the whole talk. Currently you moved from each slide to the next without pause, which makes it hard for people to keep up all the way through the talk.

# Now, the big thing that I am less sure about, but think it's worth suggesting:

I think the structure of the talk could be re-arranged in a way that would make it much easier for people to follow, particularly for an audience of PHP developers, who are going to be less familiar with the topic of the talk than other audiences might be. As it was given, it was kind of hard for me to follow the talk, as the definition of what PWA is was after quite a few slides.

Additionally, if information can be given as a story, because of the way human brains work it is almost always easier for people to follow a story, than just facts on their own.

## Act 1 - Introduce the problem.

* We have web pages - the problem with these are no offline capabilities, restricted access to hardware etc, etc, etc.

* We have applications - the problem with these are need to be installed, hard to update etc, etc.

* "This caused a problem for big companies like google and facebook" Re-use the (almost?) first slide from the current talk with the how this gap between the webpages + apps, caused a problem for Google and Facebook and how their engineers wanted to come up with a solution

## Act 2 - Introduce the solution.

* "So, these people at Google and Facebook came up with this solution" Really cleanly define what a progressive web app is preferably in as non-technical terms as possible i.e. not starting off with talking about manifests, but how the appear to end-users and what the experience is using them.

* "What do PWAs allow us to do that is better than webpages/apps" - Describe what PWAs allow us to do that is better than webpages/apps.

* "And this is what users experience" - Although putting a list of technical reasons why PWAs are better onto a slide is a good idea, rather than reading through the list, instead it would be better to just say "this is a list of PWA features, but we don't have enough time to talk about all of them. I think this one (or two) is the most important so lets look at this:" and then do a deep dive on that one (or two) features and show what the user experience is like through a recorded demonstration. That would allow people to see the benefits even if they didn't understand why the user experience would be better.

## Act 3 - How do we use the solution

* "So how do we make PWAs" - at this point get into the tech details of manifest files and all the other details of how to get PWAs onto people's phones.

* All other relevant technical details and maybe some downsides to using PWAs.

Coda - Summary

It would be worth just summarising again the key points from the talk, just to try to embed those key points in people's minds.

* What the problem is - Web pages + apps both have downside
* How PWAs solve it - PWAs allow us to have a nice 'in the middle' solution.
* What the tech looks like.

I hope the above is useful, and doesn't sound too negative.

© 2019