Front End performance as a Continuous Integration - Part1

MAKING FEP TESTING

…..A PART OF CONTINUOUS INTEGRATION

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

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

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

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


https://github.com/axemclion/browser-perf


6

2) perfjankie


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

3) SauceLabs

https://saucelabs.com/javascript/?dmr=0801f3fc4276057257c2237525fc69da0a6063f5d84aa20548a87bdda763

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

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

https://developers.google.com/closure/

http://www.normalesup.org/~simonet/soft/ow/eclipse-closure-javascript.en.html

https://www.npmjs.org/package/grunt-google-closure-compiler


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

http://spy-js.com/

http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging-and-profiling-node-js-with-spy-js/


10

From http://spy-js.com/


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/

https://www.npmjs.org/package/phantomas

https://www.npmjs.org/package/grunt-phantomas


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



https://github.com/WPO-Foundation/webpagetest

https://github.com/marcelduran/webpagetest-api/wiki/Test-Specs

https://github.com/gruntjs/grunt-contrib-jshint


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)

http://www.impossiblesiebel.com/2014/09/open-ui-grunt-and-jshint.html

http://phantomjs.org/


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-Practices.docx

This document lists down the best practices for basic JS and JQuery development.


15

Mapping available Techniques against SDLC phases


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

https://www.npmjs.org/package/browser-perf

Software

Front End performance as a Continuous Integration - Part1