Modern day applications also have a supporting structure that involves using automatic testing, version control, code linting, and continuous integration. Let's start small and build our way up.
Planning out your application
A complex application involves several items:
- A templating language or language that renders and eventually serves HTML
- Some sort of state management
- Browsers an application should support
- A way of compiling or loading modules
- Any type of preprocessing
- Uses a build process
State refers to anything that needs to be stored and then referenced later. The old way of doing this was with
data- attributes in HTML, or referencing current state within the
Nowadays, we have some better solutions that don't rely on mutating the
You need to know what browsers your application should run on. Browserslist can be used to allow your build process to build against certain browser versions.
Tying Code Together
Often code in one file needs to reuse code in another. We can do this through a module loader. There are several ways of doing this:
Preprocessing in this case refers to optimizing images and compiling a stylesheet language into pure CSS. Usually, this will be done in the build process, but basically, we want a way to minimize the footprint of our assets, so that they're smaller and load faster in a user's browser.
The build process should hopefully handle this all in one place, so that on the other end, you have a folder of optimized assets ready to go.
These are some of the most important considerations to keep in mind when first planning out your application. Ultimately, we want an application that is fast to develop on and keeps us productive. If we're building for a team, we want something that will be familiar to members, or easy to pick up.
Planning is the most important phase for architecting a front end application. There is often a lot of nuance that is unforeseen, so expect roadblocks to happen.
Photo by Sergey Zolkin