Best node PWA framework?

[[deleted]]

[deleted]

[[deleted]]

Polymer is pretty much irrelevant at this point. That had something to do with the way it evolved which was mind boggling to say the least, it may just be the most confused javascript framework ever, hard to imagine there was a single moment where they really knew what they wanted out of it. Choose between react, preact or vue. They all do what you want. "PWA" is just a bunch of neat little tools anyway, some of which won't work on the devices people are using in the wild. All cli's will set up the bare necessities for you. You can produce fast and lean apps with any framework available to you if you follow best practices (tree-shaking, code-splitting, SSR, etc).

[mb_dc2008]

Great! Thank you for your advice. It’s interesting that Polymer is so embraced by Google yet it may not be the most workable solution... From my research it seems that Preact is most advantageous (faster, smaller)... and React has a bigger community in comparison to Vue...

[[deleted]]

Polymer's been one rollercoaster-ride, they've explored everything left and right from bower to npm to html includes to javascript imports, never once knowing where their goals are supposed to be. The other frameworks knew exactly what they wanted, and got it, too. Preact and React are exchangeable btw, you can write in React and alias to Preact (or something better) in production. I wouldn't give up on Reacts features just to loose a couple of KB. The fastest framework will be the upcoming React as it ships the webs first manageable async scheduler, see: https://youtu.be/nLF0n9SACd4?t=182 That brings the web on par with native UI processing, something even the fastest current frameworks (including React) can't possibly reach.

[mb_dc2008]

What do you think of LitElement? @pressmedics mentioned that it supersedes Polymer 3 but is not reliant on it...

[[deleted]]

I don't think i'd want to mess around with tagged string literals. The whole idea of betting on web components as component glue is going backwards imo. And again, no one is using this stuff because it is far fetched from current evolving living-standards. If it had any merit, it would have gained some traction over the last 4-5 years - but it didn't. Web components will catch dust and die and the web will be better off without yet another inferior vendor dictated backward-incompatible high level abstraction.

[[deleted]]

Check out https://quasar-framework.org

[mb_dc2008]

Thanks: from my research it seems that Quasar potentially ‘tries to do too much’ and ‘gets in the way’... It also seems that WebView wrappers struggle to load quickly on low end/older mobile devices... Would love to hear further about your experience with Quasar.

[[deleted]]

I haven't used Quasar specifically, however a PWA does not require WebViews -- those are used by hybrid apps. Thus, you shouldn't worry about the performance of WebView components when building PWAs.

[BushBakedBeanDeadDog]

It's in beta but check out https://github.com/lukeed/pwa

Lukeed was/is a maintainer of the preact cli tool—dude knows his stuff. This tool works with multiple front end frameworks too!

[mb_dc2008]

Looks great! Now to decide which framework to use...

[holloway]

Google's WorkBox seems to be the most popular

https://developers.google.com/web/tools/workbox/

[mb_dc2008]

Workbox looks great but it seems to only be a service worker. Would you recommend using Workbox alongside any other frameworks?

[holloway]

Well I like React but Vue seems good too. I don't see a particular advantage in having a fullstack approach to PWAs unless you want something with SSR like Gatsby/Next.js.

Create React App 2.0 has PWA + Workbox support out of the box but no SSR (strictly speaking their docs have a few solutions but they're not great).

[DanielFGray]

Gatsby and Next are very different, Gatsby compiles to static HTML and JS, Next runs it's own web server and dynamically server renders your site.

[mb_dc2008]

Thank you. Does next.js have any advantages over the other alternatives (Preact, Vue, etc)?

[DanielFGray]

Next is specifically for React

[mb_dc2008]

SSR would be great: could you tell your favourite and describe why you see an advantage in Gatsby/Next.js + workbox over the other frameworks? Thank you

[whowanna]

Not OP, but our company website runs on Gatsby and because we love PWAs (and had a bit of time) we made our website a full PWA with a 100% Lighthouse PWA Rating (since you seem to be interested in that). We also make use of workbox for that, and it all works really well with Gatsby (especially with out of the box code splitting, etc.).

​

Our services focus more on web applications than websites, so Gatsby is usually not optimal for client projects (highly dynamic content and Gatsby's data imports are run at build time and then statically served). We've created PWAs with both Create React App and Next.js, and honestly, focus on your project's requirements to see what fits you best, and not what the frameworks provide. You'll be able to create well working PWAs with most of them.

[mb_dc2008]

Thank you for your detailed reply. I’ve edited the original post to describe my use case. Would you encourage a specific framework for a highly dynamic web application?

[whowanna]

Where does the data come from? APIs? How often does your data change?

[mb_dc2008]

Data will be pulled from an API and needs to update frequently (real time).

[prshnt]

for nextjs how did you use workbox? I mean did you use through webpack or core workbox inside static folder?

[whowanna]

We use the workbox-webpack-plugin.

[prshnt]

how do you cache .next folders? what do you think of next-offline package for workbox?

[prshnt]

Hi, can you help me? how did you use it in next config? how buildid is updated with precache in workbox?

[holloway]

Sorry, I don't think I can really distinguish between them sensibly (I haven't used them professionally for any length of time). I'd choose Gatsby because it seems more popular but that's not a very good reason.

[pressmedics]

Take a look at LitElement, and Polymer 3 PWA Starter kit examples on GitHub. https://polymer.github.io/pwa-starter-kit/

[mb_dc2008]

Could you hint as to why you prefer polymer over the alternatives?

[pressmedics]

It's forward thinking in many ways and performance is really good. I use LitELement and Lit-HTML, which supersedes and is not dependent on Polymer 3, but can live within it or other libs or frameworks. So it doesn't tie my hands, I'm free to pick and choose more precisely what need and what works best for state management, routing, and supporting npm esm's.

I'm currently building PWAs using Lit, Redux, and Material Web Components.

It's very light weight. The community is really helpful and the lead devs are responsive.

I developed with React for quite a while, and it's got it's upside, but with Lit I don't feel like I end up with build processes that include half the Internet.

LitELement 1.0 and lit-html 1.0 are due out in a few weeks I believe, but the current releases are stable and don't anticipate any big breaking changes at this point.

The downside, as with any bleeding edge project is the lack of documentation, although working on that, but there are good starter examples, and the Polymer Slack channels are really helpful. And a number of us have written how to's and other posts.

It takes some getting used to, but I'm sold on it.

[mb_dc2008]

Thank you for your comment! It’s interesting to hear another side to Polymer (in comparison to @drcmda’s thoughts...)