My experience w/ react & phoenix on my side project

spa
graphql
react

#1

Hey guys - I just finished my side project - misheneye.com (creates brand guides) - recently and used an spa - react (nextjs.org flavor). Wanted to share some thoughts…

Advantages

I was able to use react’s ecosystem. I chose material-ui.com for the ui, which saved quite a bit of work. The user gets decent default behavior that works across browsers.

Apollo is the client side consumer of absinthe’s graphql api and provides great caching options. You’re able to store fetched data on the client side and have fine grained control over updates of that data.

As the user switches pages, the graphql queries needed to support that page/view fetch from cache first, only falling back to the network if necessary. So navigation is quick, and there’s less load on the server/lookups from the db.

Disadvantages

Missed out on some of the advantage of phx generators.

Hit issues with react code that should be client-side only instead of SSR/statically generated.

Had to google for syntax switching back and forth from elixir to react.

Spent more time on devops + configuration.

Neutral

Phoenix obviously :smile: delivers server side rendered html by default. Nextjs allows you to compile/export your react app as static HTML files, or SSR it. I chose static so it’s just hosted by phoenix for now. The static content makes it SEO friendly… but I know I could SSR it at a later date to get the same SEO benefit, for more user-generated content.

Overall

Due to aggressive client-side caching, it’s slightly more efficient with the spa for data fetching because it fetches data less frequently… but there’s a larger javascript bundle for the client to download initially. So :man_shrugging: . Developing, however, took more time.

Were I to do it again now, I’d work harder to see if the SPA was truly required before going down that route to save quite a bit of time.

Also, gotta say, I love this community and the ecosystem. Absinthe with dataloader is great, as is phoenix and elixir itself… and really all the packages I’ve used. So thanks guys =)


#2

Thanks for sharing your experience!

What would the key criteria be for you to confidently use a SPA architecture again?


#3

Good question! After thinking about it, I’d say:

1 offline support
2 large-traffic site that can use client-side caching to meaningfully reduce server load/cost
3 cross-browser support for complex ui components
4 building out clients for web and mobile apps simultaneously (ala react native for web, or perhaps flutter for web)

The first 3 things can totally be solved without an SPA too… but I think after a certain amount of JS additions, managing JS without an SPA can be worse than with an SPA.

The 4th item works if you know up front you’ll need ios, android and web clients, and you don’t need too many platform-specific features. In that case, I think it can be faster to use an SPA. A frontend developer can make changes across all three platforms in the same language… and there would be quite a bit of code reuse around data fetching and other things. I’ve often heard about 80% code reuse.