Web: too many options
Starting a new web project demands a choice of front-end framework. You may object, but the truth is that going with vanilla web APIs is also a choice. And yet this is fine, it is a follow up option to choosing the web as your platform.
Tooling options pop up. Should you go with
npm? Hopefully your starter kit makes this choice for you, so let’s pick
create-react-app as an example. Keep in mind that every starter kit will make these choices, though they will likely choose something different.
First of all: you will use a project bundler. Webpack is the default choice for
create-react-app, but it’s also the default in
vue init and
ng new. You could have gone with
pika. Let’s not dwell.
create-react-app will use it to allow for modern yet-to-be-released syntax. But what about Typescript? CRA supports it, but won’t use it by default. It is a choice, nonetheless.
While we’re at it – what about CSS extensions? CSS-in-JS is a popular trend with built-in optional support for CSS Modules, but maybe you’re into
emotion. Auto-prefixing (for backwards compatibility) is on by default, but any more PostCSS or Sass is up to you.
postcss-normalize is available by default, but opt-in to use. You may go for a full-fledged styles library such as Bootstrap or Material UI. Not going is a choice, though.
There is tooling for linting,
eslint with some recommended rules by default. You may add
prettier or enforce styles manually. There are also testing tools:
jest provides a test runner, an assertion API and a mocking API;
@testing-library/react provides some testing utilities, but you may find the need to reach for
enzyme. There’s no end-to-end tooling in the kit, you will have to choose between
playwright (headless browser runner) or
cypress (in-browser test runner) or both.
Are we done? Well, React itself offers class-based components with life cycle methods or function-based components with hooks. And there is state management (
redux) and client-side routing (
react-router), both optional. Oh, keep in mind that CRA hints at file organization (tests, styles and components in the same folder) but does not enforce it. Following it is a choice too.
To sum up, here’s a numbered list of choices:
- Package Manager?
- Starter kit?
- JS Backwards compatibility?
- Pre or Post processing CSS?
- CSS Reset or Normalize?
- Style libraries?
- Code linting?
- Code formatting?
- Test runner?
- Asserting library?
- Mocking library?
- Testing utilities?
- End-to-end (E2E) test runner?
- Class-based or function based components?
- State management?
- Client-side routing?
- Codebase organization?
Ask a new developer to start a new project and you’re bound to see
????????????????????? above his head. That’s why.