Progressive Web Apps the return of the web? Chris Heilmann @codepo8, - - PowerPoint PPT Presentation

▶
progressive web apps the return of the web
SMART_READER_LITE
LIVE PREVIEW

Progressive Web Apps the return of the web? Chris Heilmann @codepo8, - - PowerPoint PPT Presentation

Jan 02, 2024 140 likes •915 views

Progressive Web Apps the return of the web? Chris Heilmann @codepo8, Goto Berlin, November 2016 Chris Heilmann @codepo8 There is a very cool thing happening right now The honeymoon period of native apps is over.

slide-1
SLIDE 1
slide-2
SLIDE 2

Progressive Web Apps – the return of the web?

Chris Heilmann @codepo8, Goto Berlin, November 2016
slide-3
SLIDE 3

Chris Heilmann @codepo8

slide-4
SLIDE 4

There is a very cool thing happening right now…

😄

slide-5
SLIDE 5

💿

The honeymoon period

  • f native apps is over.

🗒

🔦

slide-6
SLIDE 6

💿

🗒

🔦

slide-7
SLIDE 7

💿

🗒

🔦

slide-8
SLIDE 8

💿

🗒

🔦

slide-9
SLIDE 9

🌎

However, there is still the problem of a changing world.

slide-10
SLIDE 10

🖦→💼→📲

Evolution is happening around us… …and user numbers are shifting.

slide-11
SLIDE 11

💕

The web wasn’t ready for the mobile form factor.

slide-12
SLIDE 12

😡

🌨 Mobile was a throwback to the

web of old

🌨 Small screens, bad connectivity,

unreliable browser support

🌨 Constantly changing conditions 🌨 Hardwired browser and hardware

with unpredictable upgrades

slide-13
SLIDE 13

⚠

We weren’t ready to go all

  • ut on web with mobile.
slide-14
SLIDE 14

💿

🌨 Instead of creating web sites that

work well on mobile, we packaged them up and submitted them to market places.

🌨 In a 1:1 comparison with native

apps, they looked rubbish.

🍏 This may or may not have been

by design

slide-15
SLIDE 15 https://remysharp.com/2016/05/28/state-of-the-gap

These days, we’re looking much better…

slide-16
SLIDE 16

The big breakthrough: Service Worker

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

🔨

slide-17
SLIDE 17

Progressive Web Apps

🦅

slide-18
SLIDE 18

“Websites that have taken all the right vitamins”

– Alex Russel?

https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
slide-19
SLIDE 19

🦅

🔨 Work offline using Service Worker 🔨 Can hibernate and notify on

change

🔨 Possible progressive enhancement

  • f a working, standard web site

🔨 More functionality with

subsequent visits

🔨 The link is the distribution model

slide-20
SLIDE 20

🦅

🔨 All the benefits of native apps -

none of the sluggish distribution issues

🔨 Natural evolution of web content

into the mobile form factor

🔨 A big opportunity to crack the

closed distribution model

slide-21
SLIDE 21

💸

slide-22
SLIDE 22

Computers and smartphones are powerful. Browsers can do a lot and are open to feedback. JavaScript is flexible and has evolved. CSS has become amazing. Developer tools in browsers give us great debugging and even design capabilities

😎 🦅 🎊

slide-23
SLIDE 23

💪

And yet, the mobile web is in a very sorry state.

slide-24
SLIDE 24

🤕

But, but but, everybody says the mobile web doesn’t exist! It’s just the web and we make it responsive…

slide-25
SLIDE 25

🔭

Alright, let’s look at the problem…

slide-26
SLIDE 26

This used to be much easier… HTML

(Structure)

CSS

(Look and Feel)

JavaScript

(Behaviour)

slide-27
SLIDE 27

Flexibility and forgiveness…

💨

HTML and CSS are fault tolerant…

slide-28
SLIDE 28

Knives, bees and footguns…

🦃

JavaScript is not fault tolerant

slide-29
SLIDE 29

This is why we keep banging on about progressive enhancement

slide-30
SLIDE 30

Using this, we can support the past…

slide-31
SLIDE 31

And we can support current edge cases…

slide-32
SLIDE 32

And after some checking, all the current browsers and what they support…

slide-33
SLIDE 33

With HTML and CSS you’re relying on the user agent to do the right thing…

😑

slide-34
SLIDE 34

The HTML5 revolution promised a move from documents to apps…

slide-35
SLIDE 35

The problem is that eight years after the proposal and five years after HTML5’s “last call”, there are still many basic support issues…

😧

slide-36
SLIDE 36 https://vimeo.com/176453149

Monica Dinculescu < INPUT >

HTML Special, CSS Day

slide-37
SLIDE 37 https://www.filamentgroup.com/lab/type-number.html
slide-38
SLIDE 38

And the bad people of the internet don’t stop abusing

  • ld technology either…

💁

slide-39
SLIDE 39

In UGC, we can’t have nice things…

https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
slide-40
SLIDE 40

Keep users on this page…

https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf

🔔💪

slide-41
SLIDE 41

Fix for newer browsers…

https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
slide-42
SLIDE 42

Fix for all browsers…

https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
slide-43
SLIDE 43

Almost…

Listen for the click event and prevent the default browser behavior of opening a new tab. Inject a hidden iframe that opens the new tab, then immediately remove the iframe.

“

https://github.com/danielstjules/blankshield

slide-44
SLIDE 44

JavaScript isn’t evil.

slide-45
SLIDE 45

Using JavaScript, you have a means to test if what you’re trying to do succeeded…

✅

slide-46
SLIDE 46

Supporting the past balancing act…

Use powerful language additions… Don’t block out

  • lder browsers and

environments…

slide-47
SLIDE 47

Progressive enhancement balancing act

Control the UX with JavaScript and own the failure cases. Rely on the browser to give a “working” experience.

slide-48
SLIDE 48

I don’t have all the answers for you. A lot of this depends on your project, goals and resources.

😴

slide-49
SLIDE 49

!

slide-50
SLIDE 50

JavaScript can’t be trusted and can be turned off.

💤 🔩

Everybody has JavaScript, and we can do everything with it!

slide-51
SLIDE 51

The “JavaScript not available” argument is largely bogus and is holding back the web!

⬇ 🎥

slide-52
SLIDE 52

The “JavaScript is flaky and will break” argument is very much alive and will always be that way…

🚨

slide-53
SLIDE 53

Until the first successful load, you have no JavaScript

  • functionality. That is a fact.

slide-54
SLIDE 54

However, subsequently, you can do a lot with JavaScript that is needed on mobile and can’t be done in HTML/ CSS.

😋

slide-55
SLIDE 55

New error cases become much more important than “JavaScript is not available”

⚠

slide-56
SLIDE 56

✏ Small initial payload ✏ Form factor supporting content ✏ Form factor supporting interfaces ✏ Offline/Flaky connection support ✏ T aking advantage of the power of the end user device ✏ Avoiding interaction latency

❤📳

slide-57
SLIDE 57

The beauty of HTML, CSS and JS…

😎 All is contained in one package 😎 Everything is running on the end users environments 😎 You wouldn’t even need ServiceWorker to make things work offline - inlining everything
  • r using local storage would be enough

📧

slide-58
SLIDE 58

Our solutions should have excellent error handling instead of automatic tolerance.

👍

slide-59
SLIDE 59

What about accessibility, eh?

♿

slide-60
SLIDE 60

Used sensibly, JavaScript is an accessibility boost. Sometimes the only way to make things

  • accessible. ARIA is not magic.

🕺

slide-61
SLIDE 61 https://codepo8.github.io/gridnav/
slide-62
SLIDE 62

It is time we took ownership and responsibility of the whole technology stack.

🔌

slide-63
SLIDE 63

There is a culture of “let’s use whatever if it works”

😑

slide-64
SLIDE 64

We have a lot of messy solutions, and we keep building more tools to undo what clogs up the web.

slide-65
SLIDE 65

Best practices can help with that, but only when they apply to the people who build things and when they solve current issues and needs…

slide-66
SLIDE 66

Using instead of a URL or using a button is not JavaScript’s fault. It is a bad idea and practice - probably copy & paste.

💪

<a href="javascript:void(0)">

slide-67
SLIDE 67

Instead of bashing bad use

  • f JavaScript, let’s embrace

and scrutinise new ideas.

🔏

slide-68
SLIDE 68

🆚

🔨 Any web product can become a

Progressive Web App, not all have to be.

🔨 You’ll reap the rewards of simple

maintenance and upgrade paths and the form factor mobile users expect.

🔨 However, it makes sense to clean

up before going there…

slide-69
SLIDE 69

🛡

🔨 Look at what you built, check the

current state of affairs at http:// caniuse.com and remove all the cruft you don’t need.

🔨 Simplify your interfaces, the next

users are impatient and on flaky connections.

🔨 Reconsider the ways you build

and deploy your products, a lot can be automated.

slide-70
SLIDE 70 ✅ Create and publish as much content independent of JavaScript as you can ✅ JavaScript can make things much more enjoyable and some things are just not worth while to implement without. ✅ Benefit from the user’s hardware ✅ Spend more time building great interfaces, less time relying on what is there and can’t break - in many cases it is disappointing.

It is time to re- think our best practice for the web approach…

slide-71
SLIDE 71 🙃 You don’t rely on automatic fixes. JavaScript breaks and it is painful. It allows us to analyse what went wrong. 🙃 T
  • oling is much better and we get much
more insights into what happened than with, for example, CSS 🙃 We take responsibility of the interface. It is our job to make it happen - not browser makers to agree and find a consensus 🙃 We have full control over what gets loaded when, cached where and rendered when.

Benefits of an “It’s OK to rely on JS for this” approach…

slide-72
SLIDE 72 ⚠ We shouldn’t hide functionality in magical abstractions. A product that relies on the availability and maintenance
  • f a framework is not a script
dependency - it is a support issue. ⚠ Just because we can do everything in JavaScript, doesn’t mean we have to. Use it when HTML is not good enough or too broken to rely on. ⚠ While the client is powerful, it is also
  • unknown. A lot more can be done on
the server - and in JavaScript.

Dangers to be aware of…

slide-73
SLIDE 73

Important considerations independent of technology used…

💤 Shit happens! Spend more time in creating sensible error messaging and fallbacks, spend less time in trying to predict every possible error 💤 Slowness kills - our solutions must load fast what is needed and enhance when they can. They also need to be snappy. 💤 Offline and flaky is the norm - avoid network dependency as much as you can 💤 Security is paramount. A hacked server sending out malware or spam is worse than an app that needs a restart…
slide-74
SLIDE 74

We have to stop thinking in binaries, and consider writing great, secure and failure- aware solutions using each technology to its strengths.

🐞

slide-75
SLIDE 75

CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

THANKS!

slide-76
SLIDE 76