Downsides first: It's a time sink. By the time you bootstrap webpack, babel, sass, etc. you're often pushed into building an "app" and instead of a web page. So there's a sunk cost just to do something remotely meaningful with react, in practice. The build outputs are colossal, even with tree shaking and codesplitting. The initial build times on a non-trivial app can be minutes. Minutes.
I made some pretty scathing comments about React / SPA apps on HN before. I was insistent I could build an app with django templates + css + js. But in the end I ended up having to use webpack just to build SASS/JS, even if I spurned using a SPA app. So I never found a way to keep it with just jinja/django templates and css and ship a good experience.
If you're making a website that's differentiated enough to be noticed, most likely it'll end up needing the attention to detail a JS app brings. It's just hard to make UX scale without it: template includes are not composable - ES Modules + React components definitely are.
What changed my mind on SPA:
- TypeScript is really the thing that changed the game, because it shores up a very hard-to-scale, disorganized language ecosystem with an amazing type system.
- Webpack and babel getting somewhat stable in their APIs, as well as their extension/plugins
- React Functional Components / Hooks (cleans up a level of indentation and avoids that class cobwebs that can make maintenance a pain)
- Prettier: Excellent formatting tool
- JSX: Ends up making components very "HTML-like" and the formatting with prettier makes it feel like "blocks" where you can get a gist of the depth/hierarchy.
- GraphQL + Relay: The responses are code-generated into types and it automates retrieving data from the server. You can throw redux out. Which leads me to another thing - I consider redux an antipattern on most cases. Not fun at all to work with at scale.
I wish typescript / react / jsx / sass just worked from the browser itself, without all the webpack and babel, and these configuration files. I think maybe, after thousands of hours, I finally comprehend webpack. But in all likelihood I'm mistaken, and webpack 5.x will end up making me have to start over anyway.
Comments
Downsides first: It's a time sink. By the time you bootstrap webpack, babel, sass, etc. you're often pushed into building an "app" and instead of a web page. So there's a sunk cost just to do something remotely meaningful with react, in practice. The build outputs are colossal, even with tree shaking and codesplitting. The initial build times on a non-trivial app can be minutes. Minutes.
I made some pretty scathing comments about React / SPA apps on HN before. I was insistent I could build an app with django templates + css + js. But in the end I ended up having to use webpack just to build SASS/JS, even if I spurned using a SPA app. So I never found a way to keep it with just jinja/django templates and css and ship a good experience.
If you're making a website that's differentiated enough to be noticed, most likely it'll end up needing the attention to detail a JS app brings. It's just hard to make UX scale without it: template includes are not composable - ES Modules + React components definitely are.
What changed my mind on SPA:
- TypeScript is really the thing that changed the game, because it shores up a very hard-to-scale, disorganized language ecosystem with an amazing type system.
- Webpack and babel getting somewhat stable in their APIs, as well as their extension/plugins
- React Functional Components / Hooks (cleans up a level of indentation and avoids that class cobwebs that can make maintenance a pain)
- Prettier: Excellent formatting tool
- JSX: Ends up making components very "HTML-like" and the formatting with prettier makes it feel like "blocks" where you can get a gist of the depth/hierarchy.
- GraphQL + Relay: The responses are code-generated into types and it automates retrieving data from the server. You can throw redux out. Which leads me to another thing - I consider redux an antipattern on most cases. Not fun at all to work with at scale.
I wish typescript / react / jsx / sass just worked from the browser itself, without all the webpack and babel, and these configuration files. I think maybe, after thousands of hours, I finally comprehend webpack. But in all likelihood I'm mistaken, and webpack 5.x will end up making me have to start over anyway.