Alex Sexton was one of the first people to define the role of front-end operations in an article for Smashing Magazine. In it he defined the need for someone to take on the role of the front-end operations engineer: a master for all front-end development processes.
There has been a recent explosion in the number of tools available for use in front-end development and it is difficult to keep up with all of them. The front-end ops engineer is the one who ensures the company is keeping abreast of the latest changes and adopts those that are useful, helping developers to focus on their jobs more effectively and ensure the code they produce is high quality and performs well.
The term DevOps has been around for a while and focuses on unifying the back-end server systems with the development processes and quality assurance. This includes defining a work flow for how code is developed, tested and deployed to the live environment. A lot of the focus for those involved in DevOps is defining the tools and processes used by the development team and ensuring everyone knows how to use them. The front-end ops role has lots of similarities to this, but the focus is on front-end technologies rather than back-end code and server systems. Both roles need to ensure that the right tools are deployed to the developers and that they are educated in how to use them.
Increased front-end performance
One of the jobs of front-end ops is to monitor front-end performance and ensure that it doesn't suffer. There are number of things that can effect how fast a page loads when focusing on the front-end. In Drupal a lot of the focus is put on the back-end, and there has been a lot of effort put in to speed things up by reducing database bottlenecks, but there has been less focus on speeding up the front-end.
Key methods for increasing performance are minimising HTTP requests and reducing file sizes. Drupal 7 can be configured to combine and compress CSS and JavaScript files out of the box, but it in a rather basic way. Using the Advanced CSS/JS Aggregation module it is possible to have much more control over how assets are combined and compressed, but many of the things it does can be added to the developers' tool chain and automated, ensuring that such optimisation always occurs and the results are well tested.
Some of the largest assets that make up a webpage are images. The Drupal Picture module allows the optimizing of images according to breakpoints in the CSS and the ImageAPI Optimize module works with server-side image libraries to ensure that images delivered have been suitably compressed and stripped of any remaining metadata. There are also tools that developers can use to compress the images that come as part of the theme, such as logos and icons, and combine them into a single sprite to further reduce the number HTTP requests needed to display the page. The use SVG images can also help here as they are vector format and so display perfectly at all resolutions.
With the use of continuous integration it is possible to test and monitor the number of HTTP requests a web page needs to make to display properly and alert the team if this rises over an acceptable threshold. It is also possible to monitor the size of the assets (CSS, JavaScript and images) that are required by the page and ensure these don't suddenly balloon. With the use of Sass it is possible to massively increase the size of the compiled CSS by the inefficient use of mixins; catching such problems is vital.
Easier development
Code compiled for a production environment should be as efficient as possible, but while in development we can sacrifice some of that efficiency to allow easier development; code introspection and debugging is important while producing it, but is not necessary once the code is live.
All recent web browsers contain developer tools and without them it would be virtually impossible to find out how certain parts of the page get their styling, but they also contain views for displaying a timeline of HTTP requests and JavaScript profiling, and knowledge on using these should be at the core of any front-end developer's tool set.
When using Sass, source maps allow a browser's development tools to map the compiled CSS back to the original Sass file. This allows you to see where in the Sass a certain element is getting its styles from, even though the browser is loading the compiled CSS. This is clearly a great help for developers, but increases file sizes and so should be stripped out for the live site.
Other tools that can help developers are:
- Sass and JavaScript linters ensure that developers stick to the coding standards of the project and help prevent cross-browser bugs creeping in.
- Code profilers ensure produced code doesn't exceed acceptable parameters.
- Tools such as GhostLab and BrowserSync allow the testing a site on multiple devices.
The tool chain
There has been a recent proliferation of front-end tools, but the main ones are:
App scaffolding - Yeoman
Yeoman is a tool to automate the creation of new projects or parts of projects. In Drupal, this is not so useful as so much is provided out of the box, but Yoeman generators exist for creating new themes and projects.
Dependency management - Bower and npm
When you want to share your project with others or multiple developers are working on the same project it is important that everyone uses the same set of tools and libraries. This is were dependency managers come into play, they automatically install all the required packages needed by a project and can install specific versions of those packages; ensuring eveyone is using the same versions and avoiding dependency hell.
There are a number of dependency managers but the main ones used for front-end development are Bower and npm (a.k.a. Node Package Manager). Bower can install all sorts of packages, downloading packages from GitHub, any Git repository, a URL and more. Npm is used for managing JavaScript packages. It can be used to install Node applications like Yoeman, Grunt and Gulp or the local packages required by a specific application. Used together, Bower is used to install project libraries while npm is used for installing the tools used by the project and any plugins required by those tools.
Task runners - Grunt, Gulp and Broccoli
The job of automating the actual development process is done by a task runner. These are applications that are configured to run specific tasks, such as compiling Sass or compressing images. There are two dominant task runners, Grunt (which was one of the first task runners to receive wide scale adoption) and Gulp, although youngster Broccoli has also been getting some publicity recently. All three are simple JavaScript Node applications that are extended though plugins to do the actual tasks required as part of project development. Which task runner is chosen largely comes down to personal preference. All three have a wide range of plugins and are likely to be able to fulfil the needs of a front-end development team. At Agile Collective we currently use Gulp. It is easier to write tasks for than Grunt and more stable than Broccoli, but Googling 'grunt gulp broccoli' brings up numerous pages comparing the three tools.
Tools and plugins
This is a list of tools and plugins that we are using, would like to use or just look interesting.
- LibSass is a port of the original Ruby Sass to the C language, giving it greater portability and speed. The Gulp plugin is called gulp-sass.
- SassDoc is a convention for documenting Sass files. The Gulp plugin automatically scans your Sass file and creates HTML documentation.
- BrowserSync automatically refreshes your browser when it detects changes to files and recent versions allow the control and debugging of remote devices; enabling the ability to debug an iPhone from a Linux computer.
- JSLint checks the JavaScript produced by developers is error free.
- gulp-strip-debug will strip console and debugger statements from JavaScript code.
- gulp-concat combines your CSS and JavaScript files helping to minimise the number HTTP requests for a page.
- gulp-minify-css removes comments and unnecessary whitespace from CSS files.
- gulp-uncss helps to remove unused CSS selectors and so reduce the size of CSS files.
- gulp-uglify minifies JavaScript files by removing whitespace and reducing variable names.
- gulp-imagemin compresses images, including SVG files.
- critical helps to produce the CSS that is only required for the initial page load. This can then be inlined in to the webpage, speeding up the initial page load time.
- phantomas uses the PhantomJS web browser to collect performance metrics for a page.
Do you have any interesting tools and plugins that are useful in front-end development? Let me know in the comments below.
