Intro to Front End Ops
Ryan McVeigh
Watch as we go @:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Ryan McVeigh
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
What is Front-End Ops?
“Front-End Ops is the collection of things you can do to make serving web pages easier.”
-Alex Sexton
Make the computers do the work.
So you can focus on your product.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Speed is the Metric that we measure by.
- Speed of the application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1153905/photo-1418662589339-364ad47f98a2.jpeg)
- Speed of the tools
- Speed of the development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Why do FEOps on top of your regular job?
- Mature FEOps benefits the people who don't have time to think about this stuff.
- The less work you have to do when performing repetitive tasks the easier your job becomes and the fewer mistakes you’ll make performing these tasks yourself.
- If done well FEOps will increase your app and development performance.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Front-end Tooling is on The Rise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159386/moduleCounts.jpg)
npm
254 modules per day
133831 modules
(as of 03/20/15)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
FEOps Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159605/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Basic Automation Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159613/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Yeoman
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159625/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Yeoman
generator-drupal-theme
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159631/pasted-from-clipboard.png)
A Yeoman generator to create Drupal themes. This is also built to create sub-themes of Zen, Omega, Aurora, Mothership, or your own custom theme.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159650/pasted-from-clipboard.png)
iamcarrico
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Yeoman
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159631/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Basic Automation Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159613/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Grunt
The JavaScript Task Runner
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182456/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Grunt
With 4,430* registered plugins to choose from, you can use Grunt to automate just about anything with a minimum amount of effort.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182456/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182483/pasted-from-clipboard.png)
*as of 03/20/15
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Grunt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182456/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Basic Automation Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159613/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Gulp
The streaming build system
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182508/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Gulp
A newer nodejs based task runner with 1401* plugins. Gulp uses streams that pipe your files through a series of actions then outputs it in a specified location.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182483/pasted-from-clipboard.png)
*as of 03/18/15
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182508/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Gulp
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182508/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Basic Automation Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159613/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Bower
A package manager for the web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182539/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Bower
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182539/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
FEOps Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159605/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Common Testing Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182558/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
CasperJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182622/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Common Testing Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182635/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
FEOps Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1159605/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Performance Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182650/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182674/pasted-from-clipboard.png)
High Performance Browser Networking
By Ilya Grigorik
What every web developer should know about networking and web performance
Performance Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Performance Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182674/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Performance Tools
High Performance Drupal
By Jeff Sheltren, Naraya Newton & Nathaniel Catchpole
This comprehensive guide provides best practices, examples, and in-depth explanations for solving several performance and scalability issues.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1182705/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Handy Modules
Fastclick Speedy Picture Assetic
CDN CSS Embedded Images Purge
Borealis Varnish Expire Cache Actions
CacheTags MemCache Views Cache Bully
and many many more.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
More Resources
Videos from Front End Ops Conf 2014
Automating Frontend Workflow by @addyosmani
Grunt/Gulp tasks for Performance Optimization
Grunt for People Who Think Things Like Grunt are Weird and Hard by @ChrisCoyier
Frontend Ops by @SlexAxton
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Ryan McVeigh
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rymcveigh/images/1186099/logo.png)
#midcamp
Intro to front end ops
By Ryan McVeigh
Intro to front end ops
- 3,641