abandonclosediscoverdisruptionfacebookgoogle-plus instagram linkedinmap-markerphonepinterestsearchtwittervimeo-squareyoutube email

Front-End Development Workflow at The Team

Front end dev

In the last few years we have seen greater importance on front-end user interface performance and development workflow. Gone are the days when you started off with just an empty project structure and a few blank HTML and CSS files. As user interfaces become larger in scale and more complex there has been a greater need for better organisation and scalability of a front-end project structure.

Tools like HTML5 Boilerplate, went out to promote best practice and provide a starting point for developing a solid website user interface. Later came the popularity of full user interface frameworks such as Bootstrap and Foundation plus countless others.

Website performance is now the big thing, as it should be, with the aim being to produce the leanest, most lightweight and responsive user interfaces as possible to work across multiple devices. This is where a proper development workflow solution can help you optimise and automate many repetitive tasks that are needed during development to achieve this.

Here at The Team we use a set of industry standard tools to optimise our development workflow from development through to deployment. Our workflow is based around tools such as Grunt  to automate repetitive tasks, Yeoman to scaffold out a web project structure and Bower to manage project dependencies/plugins.

Grunt is used to automate repetitive tasks such as optimising images, concatenating multiple files into a single file, compressing file sizes, compiling CSS and testing code to name just a few. When a project is ready for deployment Grunt can run all necessary tasks to optimise the project to produce a production ready version. Grunt has been around a couple of years now and still appears to be the most popular but there are similar tools gaining traction such as Gulp and no doubt more are on their way.

Bower is used to manage project dependencies such as third party plugins or frameworks such as jQuery and Angular.js . Most websites use third party plugins or components of some kind, managing these manually can be time consuming and this is where Bower comes in. It takes the hassle out of installing and updating these dependencies, instead of manually going to a website and downloading the plugin, Bower allows you to search and install dependencies from your command line.

Yeoman is used to generate project structures, so you don’t have to start your project from scratch each time, this gives you a head start and also means you can be consistent across similar projects. There are many Yeoman ‘generators’ available that you can use depending on the type of project for example, a webapp using Angular.js or website using a specific UI framework. Here at The Team we’ve used some of the standard generators available but we also have our own specific set up that we use to start a project. One example being one that generates an Assemble.io  project, which is a static site generator which has been invaluable when producing large scale user interfaces as it allows the use of partial/include files and JSON data feeds.

Throughout development projects we use Bitbucket for our GIT code repository and JIRA for issue tracking software. Using these tools we can track all issues and code deliveries throughout the length of the project.

We recently used this workflow on a large -scale project where we built 2 sites that shared a lot of common assets (CSS, Javascript, HTML Modules), we configured our project so we could generate out the 2 sites separately but also share the common assets without needlessly duplicating code. Although the initial configuration took some time to get right in the long term it was a huge benefit for the development and maintainability of the sites.

There is a learning curve to using these tools and setting up a workflow, but the benefits of using these tools when in place is well worth the effort.

You might also like: