Meetup 2020 Responsive Web App - outline and discussion

[mmcgahan]

This issue is a long-term discussion reference. We will create tickets and organize the priority of work in relation to other ongoing product/feature/platform requirements, but this issue should remain open as we move toward a cutting edge web application

Functionality

progressive enhancement

• each device/platform gets a tailored experience
  • media queries in CSS
  • media queries in JS
• lazy loading of features
  • declarative async imports with media-query-like sniffing

offline-first

• cached app assets (service worker)
• cached API responses (cache middleware)
• 'prefetching' to load parts of the application that have not yet been directly accessed (HTTP/2, service worker)
• cached form submissions that will be sent when connectivity is restored (service worker)
• manifest.json to provide loader UI on mobile devices
• network status UI
  • connected/disconnected
  • reconnecting

HTTP/2

• server push to load dependencies in parallel
• minimize bundle size, maximize bundle quantity for parallelization
• 'live' data - when DB changes, client UI changes (SSE - Server Side Events)
• 'push notifications' UI

Optimistic UI updates

• patterns for showing results of mutations before response returns
  • reducers/selectors, etc
  • queries define expected results?
  • Swarm Design System support
• 'loading' state for async routes

Advanced: true native-app replacement

• chromeless install of web app ('add to homescreen')
  • platform-dependent design considerations
  • navigation UX
• What is the distance between our React app and a React Native app?
  • can we get closer?
  • is it actually a valuable goal?
  • would a React-Native-targeted app also be a better web SPA?
  • what would release/distribution look like?

Questions

1. What is the role of the MWP library in this effort?
2. What is the role of SDS?
3. What is the role of the starter kit? (going away)
4. What is the role of the systems team/EE (esp. WRT HTTP/2)?
5. How do we create development patterns that make these approaches easy/automatic?
6. What are the objective/quantifiable success metrics? (these will appear alongside tickets, but it's important to keep the question in mind)
7. How do we simplify maintenance of RWA features/capabilities?
8. What is the role of product teams in building platform tech?

References

• https://cloudfour.com/thinks/designing-responsive-progressive-web-apps
• https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2 Great discussion of the wins that are possible with a modern web app architecture

[eilinora]

One more question for the list maybe

• What is the role of engineers on product teams in contributing to MWP?

[mattkime]

We could also have a section detailing how we relate to the consuming repos, what functionality we provide, and how its exposed.

[mmcgahan]

@mattkime that's definitely worth a discussion - what were you thinking?

[mattkime]

@mmcgahan Actually, I think I'm happy with how our conversation about the upstream repo went and your ideas on meetup-web-platform modularity. But it would probably be a good idea to make those ideas an explicit part of the 2020 vision, although they'd be be a supporting detail.

[mattkime]

Oh - here's a big one thats been pushed to the side - live page / content updates.

Previous conversations about 'pushing' data to the browser or using some sort of pub/sub system seem too burdensome. Alternatively we could have components that query data on a specified interval.

[mattkime]

Where does accessibility fit in?

[mmcgahan]

Yeah, live UI updates is definitely a big feature, and is one of the things that HTTP/2 is designed to deal with in modern web apps through Server Side Events (SSE) - it's one of the bullet points under the HTTP/2 heading in the issue description

'live' data - when DB changes, client UI changes

We shouldn't need to do any sort of long polling or interval-based querying. Even websockets aren't a great fit for most of what we would want, but here are a couple of good resources that cover the topic in more depth:

https://www.infoq.com/articles/websocket-and-http2-coexist https://stackoverflow.com/a/5326159

A full implementation will require some investigation (and a clear product spec), but there are Hapi plugins that can help, e.g. https://github.com/mtharrison/susie

[mattkime]

Speed-as-feature - monitoring & dev tools, set baseline goals

[mmcgahan]

A topic that feeds into a lot of this discussion end to end caching, which @willh-meetup has mentioned will be a big part of every replatforming team's H2 goals - we can help identify where data is cached and how caching rules get communicated downstream, and then designing the platform to interpret and consume those caching rules while applying internal caching where desired.

That sort of project should probably start with a diagram to identify all the pieces and their relationships - most of it will just be services and the HTTP headers they use to set time-to-live for the data they supply, but there might be some other elements that need to be accounted for.

I'm eager to get into that effort because I think it will be able to provide a lot of big real-user metric performance gains.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.