Frontend Tools

Build tools are commonly used to package CSS and Javascript in to bundles. These bundles means that only one or two payloads of data need to be downloaded by a browser.

Task Runners

  • Gulp
  • Webpack
  • Grunt
  • Compass

We primarily use Gulp in conjunction with NodeSass to compile source SCSS stylesheets in to browser compatible CSS payloads.

Whilst Compass does this out of the box, the compile times are terrible and we recommend against using it in favour of using NodeSASS with a Compass shim.

Stylesheets (CSS)

There are a few different pre-processed variants of CSS: We primarily use Scss for Magento 1 and other projects and Less for Magento 2.

Stylesheet Frameworks

We rarely start from scratch when working with stylesheets, here is a list of some of the frameworks we work with day to day.

Javascript

There are different versions and flavours of Javascript, to maintain backwards compatibility all non ES5 javascript is compiled/transpiled to ES5

  • ES6/7 Javascript
  • Typescript
  • VueJs Components

Javascript Frameworks

JS frameworks appear every other day but we have boiled our favourites down to a select few that have remained present and stable.

  • VueJS 2.x
  • React
  • KnockoutJS (for Magento 2)