Whenever you start a new project you either end up choosing one of the options:
copy pasting one of your previous projects;
use some boilerplate or even a boilerplate generator (like Yeoman);
use config-free solution;
build all from scratch.
Each way always have it’s own pros and cons, both short term and longer term.
Solutions can hide initial complexity in the beginning and provide a quick start, basically, a turn-key solution, but can be very painful whenever you customize them. On the other hand, they can be a bit bulky and in order to start you must do some heavy-lifting, but they will serve you well over time. Also there is custom, where only you define how things will be arranged, but you need to care about tons of aspects all by yourself, which require a very broad knowledge of all involved technologies.
Having company-wide standard approach provides a lot of benefits for big company where several UI projects (internal and customer facing) can coexist, so that any team can maintain any project. Or for design studio that makes websites for clients, where setup cost of each new project should be as low as possible. Unified approach allows to transfer knowledge between teams and team members, educate newcomers quicker, have a shared knowledge base of technologies, best practices, known issues and more.
Analysis of the market shows that there are few established solutions that can assist with making new React apps. We specifically selected solutions with different nature in order to show all the pros and cons of each approach.
Custom solution parts
Aspects of modern app-making process
I wanted to make this list as full as possible, outlining all possible cases. Some of them have conflicts with others.
If you build your entire app into one JS file, then initial load will become too heavy, users will observe a loading page for quite long period of time. Studies show that users tend to leave the website if it loads for more than 3 seconds.
Next.js automatically creates a chunk for each page
Static files management
App should deliver static up-front to reduce the amount of roundtrips (styles, scripts, images), e.g. commons chunk with all vendor stuff, important CSS and so on. But at the same time it should deliver only what is needed for particular page.
Create React App does not allow to modify Webpack config, so you’re a bit locked here
Next.js, Electrode and custom has ability to customize Webpack config and manage chunk contents via Webpack plugins
Server Side Rendering
Pre-bake important data or even initial markup into the initial HTML so that when user opens the website there will be almost no delay between the request and the time when site is at least visible, not talking about “useable”, that’s a different story.
Google ranges websites based on response time too, also despite the fact that it can render an AJAX website, it will badly affect it’s position, so Search Engine friendly pages is a must for some cases.
There is one issue with any of the approaches: the entry point has to load not just own data, but also data of all involved widgets, and seems that there is no established way to automate this. In custom we kinda can traverse the React tree and use some static method likeof all involved components.
No such thing in Create React App, not even in roadmap
Next.js and Electrode have it by default as a core feature
For custom you have to build your own setup
There is another way of optimization: Relay + GraphQL, but after digging it for quite some time I figured that it is very verbose (in GraphQL definition and in client-side mutations especially). The complexity of code that you need to write his approach. Also it’s not SEO-friendly because initial HTML is pristine. But I have to admit that if you consume some GraphQL API and you don’t have to write one yourself, then take a closer look, it is a very promising technology, I hope guys will find a way to make it more friendly. I should also mention here.
by hand in order to make a simple ToDo list is so high that it practically ruins all benefits, just look at
, it’s just to save a ToDo. It will be super hard to explain to anyone else later. Also it requires a custom Babel transform, schema build process, etc. So I ruled out t
During this research I have made few open source libraries aimed to help with Server Side Rendering:
Performance of Server Side Rendering
Caching of rendered pages at some point becomes crucial under heavy load.
In custom you always can DIY, you will have to manually find a way to compile your server and client portions, save them somewhere and pick them up properly in proper places, by default assumes that you compile your server in runtime (which is fine because it just affects the startup time and eats a bit more memory in the beginning)
Create React App does not have SSR
Many people use LESS/SASS/Stylus/PostCSS to pre-process their stylesheets, this allows to use variables and mix-ins to keep the code cleaner.
Electrode and Next.js does not support them by default, but you can override it’s Webpack config, which is not recommended though
For custom you can make it via Webpack loaders
For any of the candidates you always can set up a separate SASS/LESS builder/watcher (just like in Create React App example), but you will have to manually include your resulting CSS somewhere in your app. In this case Critical CSS and Hot Module Reloading and Server-Side rendering of styles becomes your responsibility, e.g. DIY thing, so you loose benefits of non-custom solutions
Third party UI lib integration
In (your initial HTML markup), but then you need to put the actual file to Next.js you can include libraries’ CSS directly indirectory; if you use preprocessors then include from there (you should already have either custom and builder or additional loader in custom Webpack config)
Electrode provides support for CSS, you can directly include it in your JS; or add via custom HTML template (but then you also will have to add it to the build); or add custom Webpack loader
In Create React App just add with stylesheet to HTML template
Critical CSS / Above The Fold CSS
This feature allows to embed some of the CSS into HTML so that users will never see FOUC. Good to have, but not so important since modern networks have good bandwidth and with GZip all CSS can be less than 100k.
Next.js has CSS in JSX which is always embedded in component, so it’s always delivered along with JS
You can kinda DIY for others
Not required for everyone, but it may be required for branding or visual pleasure of users.
Next.js has CSS embedded in JS, so you can use JS approach and return CSS from a function, which takes variables as arguments
Electrode rely on CSS modules which does not have variables
Create React App does not support separate stylesheets because it extracts all CSS into one file
If you use CSS preprocessors and you have custom build/watch processes, then you can have your base styles stuffed with variables and have few style entry points with overrides (like in Twitter Bootstrap)
Ecosystem & Community
Live within the ecosystem and community, e.g. a framework, well-designed and well-documented by experienced nerds, is better than a ton of micro libraries, less dependency management, one vision, available solutions, etc., as said “if you don’t use a framework, you end up building one”.
In custom you are on your own, your communities are scattered across all packages that you will use, you have no established ecosystem, and you are basically the only one with knowledge of your solution which is bad for the company. You will have to write your own documentation (which most of us will never do).
Nobody would argue that tests nowadays are a must have feature of any development lifecycle.
Electrode has PhantomJS based tests along with server side tests
Create React App comes with Jest which is good, but does not test in browser
Next.js and custom does not offer anything
Boilerplate, Configuration, Setup Costs
Since we plan to create many projects based on the same standard we better have as less boilerplate and configs. The initial setup should be easy and straightforward.
Next.js and Create React App have zero configuration, just put your stuff in the right place and you’re good to go
Electrode has a Yeoman generator which produces a huge pile of scripts, you have to learn what is where get used to it, but the amount of boilerplate is huge, you got configs, server-side scripts, client-side scripts and it does not seem that you can get away from it.
In custom setup you will have some boilerplate anyway, but if you make dozens of projects you can abstract some repeated patterns and create your own templates/generators/packages that will speed up your initial setup. Frankly speaking you can do that for Electrode too.