Document that explains steps to make Front End performance a part of Continuous Integration.

1. MAKING FEP TESTING
…..A PART OF CONTINUOUS INTEGRATION

2. XYZ – Making FEP testing a part of Continuous Integration
2
Contents
OBJECTIVE.................................................................................................................................................................................. 3
PROBLEM STATEMENT........................................................................................................................................................ 4
TOOLS/TECHNIQUES AVAILABLE FOR AUTOMATING FEP REPORT............................................................... 5
1) BROWSER-PERF .............................................................................................................................................................. 5
2) PERFJANKIE ..................................................................................................................................................................... 6
3) SAUCELABS...................................................................................................................................................................... 7
4) GOOGLE CLOSURE COMPILER....................................................................................................................................... 8
5) SPY JS............................................................................................................................................................................... 9
6) PHANTOMAS..................................................................................................................................................................11
7) WEBPAGETEST-API......................................................................................................................................................12
8) JSHINT + GRUNT..........................................................................................................................................................12
9) PHANTOMJS ..................................................................................................................................................................13
BEST PRACTICES AND CHECKLISTS.............................................................................................................................14
1) SINGLE PAGE APPLICATION........................................................................................................................................14
2) JAVASCRIPT/ JQUERY BEST PRACTICES...................................................................................................................14
MAPPING AVAILABLE TECHNIQUES AGAINST SDLC PHASES ..........................................................................15
REFERENCES...........................................................................................................................................................................16

3. XYZ – Making FEP testing a part of Continuous Integration
3
Objective
This document intends to make a case out of whether it’s possible to objectify the javascript
performance loopholes at every build – and that too automated.
The usual ones do tend to check for syntax, for best practices, but not many around for checking if
by profiling if JavaScript functions and methods do take longer to execute.
The document tries to list down some options available – and maybe stitch together a combination
of many to serve the need of future XYZ products, for the Site Dev team.

4. XYZ – Making FEP testing a part of Continuous Integration
4
Problem statement
1. Lesser or almost non-existent documentation of checklists for developers
2. Non adherence to checklists (when provided) due to ever changing team dynamics
3. Lack of automated Code Review process to call out code/development errors
4. Lack of developer skills to understand best (and performing) code practices

5. XYZ – Making FEP testing a part of Continuous Integration
5
Tools/techniques available for automating FEP report
1) browser-perf
http://nparashuram.com/perfslides/#presentation&10
Install browser-Perf from (NPM)
Run it from the (CMD) or add it to a CI system
like (Jenkins)
 Browser-perf is a NodeJS based tool
 For measuring browser performance metrics (like layout, paint, dom load or frame times)
 For Web pages, Cordova/Phonegap and other Hybrid applications.
 Metrics are measured when scrolling the web page, or during a Checkout workflow defined
using Selenium.
 Tool collects the metrics from sources like about:tracing, Chrome Devtools timeline, IE UI
Responsiveness tab, Xperf, etc.
 Monitor this information regularly by integrating the tool with continuous integration
systems.
https://github.com/axemclion/browser-perf
Screenshots for Browser-perf
From https://gist.github.com/axemclion/8620794

6. XYZ – Making FEP testing a part of Continuous Integration
6
2) perfjankie
http://nparashuram.com/perfslides/#presentation&10
Add perfjankie task into (GRUNT) build process.
All data and HTML/JS for the graphs are saved
in (CouchDB).
PerfJankie uses browser-perf to measure browser rendering performance metrics and tabulate
the results in a CouchDB database. It is a node module available as perfjankie and can be integrated
into any continuous integration system.
https://www.npmjs.org/package/perfjankie
Screenshot for perfjankie
From http://blog.nparashuram.com/2014/06/perfslides-demo-app-to-show-that.html

7. XYZ – Making FEP testing a part of Continuous Integration
7
3) SauceLabs
https://saucelabs.com/javascript/?dmr=0801f3fc4276057257c2237525fc69da0a6063f5d84aa20548a87bd
da763
Get better test coverage
Reliable access to the browsers you need, with 99.5% uptime. Test your JavaScript on 350+
browsers/OS platforms on mobile and web.
Run your existing tests
Convenient REST API runs your existing unit tests in the cloud. Integrate JavaScript unit testing
with your CI system.
Test details and history
Cross-browser testing made easier. See all your JavaScript test results conveniently organized by
browser, and access historical results any time.
https://docs.saucelabs.com/tutorials/js-unit-testing/
https://github.com/axemclion/grunt-saucelabs (Grunt Plugin)
(contd..)
Screenshots for SauceLabs usage
From http://blog.revolunet.com/blog/2013/12/05/unit-testing-angularjs-directive/

8. XYZ – Making FEP testing a part of Continuous Integration
8
4) Google Closure Compiler
https://developers.google.com/closure/
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler
for JavaScript. Instead of compiling from a source language to machine code, it compiles from
JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and
rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns
about common JavaScript pitfalls.
http://www.normalesup.org/~simonet/soft/ow/eclipse-closure-javascript.en.html (Eclipse Plugin)
https://www.npmjs.org/package/grunt-google-closure-compiler (Grunt Plugin)
https://github.com/gmarty/grunt-closure-compiler (Grunt Plugin)
Screenshots for Google Closure Compiler
From https://developers.google.com/speed/articles/compressing-javascript

9. XYZ – Making FEP testing a part of Continuous Integration
9
5) Spy JS
http://spy-js.com/
Architecturally spy-js is a web application powered by node.js web server and browser client. How
it works: browser/system with the page that you’d like to trace scripts for is configured to connect
to proxy server (which is node.js app). Node server acts as a proxy and retrieves the page and other
requested resources by originally requested URLs. If the resource is a JavaScript, server modifies it
before sending it back to browser. The modification doesn’t affect your code logic and is just code
instrumentation instructions to perform execution tracing. When modified JavaScript code executes
in browser, it sends runtime information back to server that processes it and sends it to spy-js UI,
where you can see occurring events with details almost in a real-time.
http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging-and-profiling-node-js-with-spy-js/
Screenshots for SpyJS
From https://github.com/spy-js/spy-js

10. XYZ – Making FEP testing a part of Continuous Integration
10
From http://spy-js.com/

11. XYZ – Making FEP testing a part of Continuous Integration
11
6) Phantomas
https://www.npmjs.org/package/phantomas
Phantomas is a PhantomJS-based web performance metrics collector.
It features,
 modular approach - each metric is generated by a separate "module"
 phantomas "core" acts as an events emitter that each module can hook into
 in-depth metrics such as: number of events bound via jQuery, calls to window.writeor
complex and duplicated CSS selectors (via analyze-css)
 JSON and CSV as available output formats for easy integration with automated reporting /
monitoring tools
 easy integration with Continuous Integration tools via TAP format and assertions handling
 metrics can be sent via StatsD or stored in elasticsearch
 easy integration with other nodejs projects via CommonJS module (see API docs)
 metrics can be emitted from JavaScript code of the page phantomas is run against (thanks to
helper functions available in window.__phantomas)
 device profiles allow phantomas to emulate mobile or tablet (by setting a proper user agent
and viewport)
 ability to run phantomas using WebKit (PhantomJS) or Gecko (SlimerJS) engine
(experimental)
https://www.npmjs.org/package/grunt-phantomas (Grunt Plugin)
This grunt plugin executes phantomas and visualizes the returned metrics in a generated
index.html. It keeps track of history, so it can be set up to check reports after every deployment of
your site. To learn how to setup history tracking in different CI systems read the OPTIONS section.
Screenshots for Phantomas
From http://stefanjudis.github.io/phantomas-custom-metrics-tryout/metrics/

12. XYZ – Making FEP testing a part of Continuous Integration
12
7) Webpagetest-api
https://github.com/marcelduran/webpagetest-api
WebPageTest API Wrapper is a NPM package that wraps WebPageTest API for NodeJS as a module
and a command-line tool.
WebPageTest API Wrapper provides a simple seamless way to integrate WebPageTest with
Continuous Integration tools. The dedicated page is provided at,
https://github.com/marcelduran/webpagetest-api/wiki/Test-Specs
8) JSHint + Grunt
https://github.com/gruntjs/grunt-contrib-jshint

13. XYZ – Making FEP testing a part of Continuous Integration
13
JSHint is a code quality tool. It can help debug JS and catch any little mistakes being made.
It can also do lots of nice things like tell you when you have unused variables.
# examples/grunt/jshint
$ npm install
# usage
$ grunt watch
# show all errors without stopping
$ grunt watch --force
http://www.impossiblesiebel.com/2014/09/open-ui-grunt-and-jshint.html
Screenshots for JShint
From http://embersherpa.com/articles/introduction-to-ember-app-kit/
9) PhantomJS
http://phantomjs.org/
 Headless instance of WebKit
 Phantom does everything a webkit browser can do, except there's no monitor.
It CAN produce visual pages on command.
 It's an indispensable tool for automating tasks that require loading up a web page and doing
something (screenshots, window resizes, clicking things, etc)

14. XYZ – Making FEP testing a part of Continuous Integration
14
Best Practices and checklists
1) Single Page Application
Target-SPA-BesPrax.
docx
This (constantly evolving) document lists down the best practices
for Single Page Applications
2) JavaScript/ JQuery Best Practices
Target-JS-Best-Pract
ices.docx
This document lists down the best practices for basic JS and JQuery
development.

15. XYZ – Making FEP testing a part of Continuous Integration
15
Mapping available Techniques against SDLC phases

16. XYZ – Making FEP testing a part of Continuous Integration
16
References
1. http://4waisenkinder.de/blog/2013/12/22/how-to-measure-frontend-performance-with-
phantomas-and-grunt/
2. http://aaron.jorb.in/blog/2012/07/automating-your-front-end-development-workflow/
3. http://blog.maxcdn.com/behind-scenes-tools-maxcdn-com/
4. http://blog.revolunet.com/blog/2013/12/05/unit-testing-angularjs-directive/
5. http://calendar.perfplanet.com/2013/phantomas/
6. http://embersherpa.com/articles/introduction-to-ember-app-kit/
7. http://fourword.fourkitchens.com/article/automated-frontend-tools
8. http://fourword.fourkitchens.com/article/performance-design-budget-and-test
9. http://internetmarketing-readme.pricemaniacs.com/category/website-performance/
10. http://isobar-idev.github.io/code-standards/
11. http://jeremyckahn.github.io/blog/2012/07/01/treating-javascript-like-a-30-year-old-
language/
12. http://nparashuram.com/perfslides/
13. http://rupl.github.io/frontend-ops
14. http://rupl.github.io/frontend-perf
15. http://rupl.github.io/frontend-testing
16. http://spy-js.com/why.html
17. http://updates.html5rocks.com/2013/11/The-Landscape-Of-Front-end-Development-
Automation-Slides
18. http://www.slideshare.net/ArtemGovorov/spyjs
19. http://www.smashingmagazine.com/2013/06/11/front-end-ops/
20. https://austin2014.drupal.org/session/automated-frontend-testing
21. https://gist.github.com/axemclion/8620794
22. https://github.com/axemclion/browser-perf
23. https://github.com/axemclion/perfjankie/
24. https://hacks.mozilla.org/2012/12/fantastic-front-end-performance-part-1-concatenate-
compress-cache-a-node-js-holiday-season-part-4/
25. https://www.npmjs.org/package/browser-perf
26. https://github.com/marcelduran/webpagetest-api