Four Key Reasons to Learn Markdown
Back-End Leveling UpWriting documentation is fun—really, really fun. I know some engineers may disagree with me, but as a technical writer, creating quality documentation that will...
JavaScript developers don’t have the benefit of frameworks with common structures like Ruby on Rails or Django. This can lead to inconsistent projects which reduces the ability of a team to onboard new members or find critical code. So if you’re looking for ideas and best practices for JavaScript projects look no further, the Big Nerd Ranch code wranglers are here to help!
Before we begin it helps to understand the main schools of thought seen in most major web frameworks.
Keep folder nesting to the minimum, and name folders in a general manner. Most notably seen in the Ruby on Rails web framework.
Pros:
Cons:
Checkout this example Rails application to see it in action.
Group similar components or resources together in nested folders. Most notably seen in the Django web application framework.
Pros:
Cons:
Here’s an example Django application if you want to learn more.
As linear styled projects grow in size and complexity group similar resources together in well-named folders that contain at least 3+ files.
Pros:
Cons:
Frontends tend to lend themselves to an adaptive fractal structure depending on what framework you use. Because frontends usually involve React or Vue at the time of this writing we will focus on those. The recent release of Webpack v4 made the src
and dist
folders the defaults to run webpack without a configuration file so we’ll accept those as our starting point. Here is a general overview:
src/
components/
services/
store/
views/
Keep reusable components separate from components used a single time as a page with components
and views
folders. The store/
folder is used if your application needs a state management tool like Vuex or Redux. The services
folder is less common but could help separate your request logic from your application.
In React projects, especially ones involving Redux, the src/components folder complements the fractal style. For each component you probably want a folder with the Redux container, React component and styling file. It should look something like this:
src/
components/
Navbar/
Navbar.js
NavbarContainer.js (more commonly index.js)
Navbar.spec.js
main.css
services/
user.js
admin.js
store/
actions.js
configureStore.js
reducers/
rootReducer.js
user.js
admin.js
views/
Home.js
Admin.js
Login.js
App.js
main.js
This style works well with React and Redux because it helps keep the container logic separate from the component. Even the store works well with fractal as it keeps complex configuration files and reducers separate from the rest of the application.
For Vue projects, a more adaptive fractal style is preferred. Because Vue’s single file components can easily take advantage of scoped styles and a Vuex store is easily mapped to a component our project structure should reflect this:
src/
components/
Navbar.vue
mixins/
plugins/
services/
user.js
admin.js
login.js
store/
user.js
admin.js
views/
TheHome.vue
TheAdmin.vue
TheLogin.vue
App.vue
main.js
In Vue, components used only once are named with ‘The’ before it. Vue uniquely also has mixins and plugins so this structure reflects this, just as the React example had container files for reduxed components.
Backends are usually great candidates for linear project structures, especially JavaScript backends serving Single Page applications. Because there is no entanglement of controllers and views like in Ruby on Rails the backend is simply Models and Controllers that serve JSON data to be manipulated by the frontend.
The backend should be separated from the rest of the application similar to src/
on the frontend. The naming of this folder is debatable but most people settle on app/
, backend/
, or server/
. Because modern JavaScript projects typically don’t use the MVC style I’d advise against naming it app
as this conveys that the folder encapsulates both the front and back end. I personally choose server
. Within this folder should be a file named either server.js or index.js as well as a routes.js file to keep all routes in one place. In a linear project the backend structure should look something like this:
server/
models/
controllers/
helpers/
routes.js
server.js
A fractal backend structure tends to look like this:
server/
user/
model.js
controller.js
routes.js
helpers/
routes.js
server.js
I find the fractal structure tends to lead to repetition in a backend context. As you can see in the above example for a large scale project there needs to be more than one routes file and within each resource, you have to repeat the few lines to configure the express.Router. And because it’s fractal you have to search extensively through the server to find routes and discover relationships they may have with other parts of the application. This is not ideal and forces developers to globally search for that route while guessing its name.
Additionally here are some pretty common folders. The assets/
folder is for stying assets like logos to be served via the backend. A scripts/
folder holds any automated build tasks or generators your team may have created. And finally, the test/
folder contains unit, integration, and end to end tests.
assets/ (or sometimes called public/)
scripts/
test/
A fullstack JavaScript application with an adaptive fractal style may look something like this:
assets/
dist/
scripts/
server/
controllers/
helpers/
models/
routes.js
server.js
src/
components/
services/
store/
views/
test/
backend/
unit/
frontend/
unit/
e2e/
In summary, due to the complex nature of progressive web applications, you’ll likely find that starting with a linear structure for your frontend and slowly making it fractal will go a long way. For your backend stick with a linear structure until your application grows so massive that you have to start grouping files. Most importantly, go with what works best for your team. JavaScript changes, don’t get stuck with conventions that aren’t working and think carefully before using ideas from other languages or frameworks in your project.
Writing documentation is fun—really, really fun. I know some engineers may disagree with me, but as a technical writer, creating quality documentation that will...
Humanity has come a long way in its technological journey. We have reached the cusp of an age in which the concepts we have...
Go 1.18 has finally landed, and with it comes its own flavor of generics. In a previous post, we went over the accepted proposal and dove...