front end performance as a continuous integration - part1
TRANSCRIPT
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
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.
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
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
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
XYZ – Making FEP testing a part of Continuous Integration
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/
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
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
XYZ – Making FEP testing a part of Continuous Integration
10
From http://spy-js.com/
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/
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
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)
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-Practices.docx
This document lists down the best practices for basic JS and JQuery development.
XYZ – Making FEP testing a part of Continuous Integration
15
Mapping available Techniques against SDLC phases
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