Front-end Development Workflow in 2019

It’s a fast-paced industry 🏃🏼

Modern front-end development workflow is a tricky beast. Sit down and prepare for the never-ending story. When you think you are almost there, there is a better and faster framework or tool published. Let’s begin our journey.


The Front End Developer’s Dilemma 🍽

What to choose?

Photo by Paul Hanaoka on Unsplash

Welcome to the front-end development world 👨🏻‍💻

Package Managers:
Yarn, NPM, pnpm …

CSS Preprocessors:
Sass, PostCSS, Less, Stylus …

CSS Framework (optional):
Bootstrap, Foundation, Bulma …

CSS Methodology / Architecture / Naming Convention:
OOCSS, SMACSS, ITCSS, Functional CSS, BEM, SUITCSS, Atomic …

Task Runners:
NPM Scripts, Gulp, Grunt …

Javascript Module Loader:
Webpack, Require.js, Browserify, Rollup, Parcel …

JavaScript Transpiler:
Babel, Typescript, Flow …

JS Code Linting:
JSLint, JSHint, ESLint …

JS Frameworks:
React, Angular, Vue.js …

CSS in JS:
Styled Components, CSS Modules, Radium …

Automated Testing:
Mocha, Jest, Enzyme, Chai, Ava, Karma, Jasmine …

HTML Template Languages:
Nunjucks, Mustache, Handlebars, Pug, Twig.js …

Progressive Web Apps, Static Site Generators … and many many more.

Arghhh!! Please stop it.

Photo by Sheldon Nunes on Unsplash

So, what’s the best setup? 🚀

We — front-end developers — are always looking for tools that help us get more work done in less time. Trying to build that ideal workflow is an important part of our daily routine as we learn a lot in the meantime.

There are many approaches depending on the project type and size. Anything from a small business site, user interfaces, progressive web apps, jamstack solutions, e-commerce themes development to complex projects heavily focused on JS.


My Boilerplate 🥳

Gulp 4 + Webpack 4 + Babel + Sass + ITCSS Architecture + BEM Methodology + Twig.js

GitHub: https://github.com/tomaszbujnowicz/frontie-webpack

Package Manager: Yarn
Fast and it works as it should.

CSS Preprocessors: Sass
It has everything that I need. PostCSS is also a fantastic piece of art but the truth is that at the end of the day — it’s a matter of personal preference.

CSS Framework:
I like to have the full control over my code and that’s why I only use some small parts from the latest version of Bootstrap 4: Grid System and Responsive Breakpoints

CSS Architecture / Methodology: ITCSS
Inverted Triangle CSS architecture helps me to organize my CSS files in the most effective and structured way. It also increasing maintainability and reducing complexity.

CSS Naming Convention: BEM
The BEM naming convention gives me a lot more transparency and clarity in my markup. The cool visual explanation can be found here Explaining BEM to a 5 year Old

CSS Matchup: ITCSS + BEM
They work perfectly fine with each other.

Task Runner: Gulp 4
You can adjust almost everything with Gulp 4, I like that flexibility.

Javascript Module Loader: Webpack
It’s hard to configure but it does the job very nicely.
Next step: Parcel is blazing fast and what is more important, zero config declaration also seems to be true (it’s not Webpack). It looks really promising and it makes sense to give it a try.

JavaScript Transpiler: Babel

HTML Template Languages: Twig.js
It works just fine and it’s easy to handle.

Photo by NeONBRAND on Unsplash

Why another boilerplate? There is so many of them out there.

Research, discovery, development, and improving my own skills is the main reason. Making the development phase and the integration process smoother for people I am working with is also an important part of it.

Is there a best front-end development workflow?

It depends but I would say there isn’t just one. All of them are made by awesome people who spent so much time giving back to the community.

Keep exploring 👀