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?
Welcome to the front-end development world 👨🏻💻
Yarn, NPM, pnpm …
Sass, PostCSS, Less, Stylus …
CSS Framework (optional):
Bootstrap, Foundation, Bulma …
CSS Methodology / Architecture / Naming Convention:
OOCSS, SMACSS, ITCSS, Functional CSS, BEM, SUITCSS, Atomic …
NPM Scripts, Gulp, Grunt …
Webpack, Require.js, Browserify, Rollup, Parcel …
Babel, Typescript, Flow …
JS Code Linting:
JSLint, JSHint, ESLint …
React, Angular, Vue.js …
CSS in JS:
Styled Components, CSS Modules, Radium …
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.
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
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 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.
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.
HTML Template Languages: Twig.js
It works just fine and it’s easy to handle.
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.