Introduction to front-end ops
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.
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.
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.
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:
- 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. Drupal Theme Generator works with a number of different base themes and can help when creating a new theme.
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.
Task runners - Grunt, Gulp and Broccoli
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.
- 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-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.