Category Archives: Front End Development

Data-driven Design through A/B Testing

A/B testing is a simple way to test changes to a webpage against the current design and determine which ones produce positive results. Often, seemingly small tweaks to a product yield hugely different outcomes. Ask the Obama campaign, who received more than six times more donations by varying email subjects — and the office pool guessed wrong! When intuition falters, A/B testing allows you to try different variants and measure users’ responses. It takes the guesswork out of website optimization and enables data-backed decisions that shift business conversations from “we think” to “we know”.

During Data-driven Design through A/B Testing panel session, the panelists discussed the design of both basic and sophisticated A/B testing frameworks and their experiences on running the tests.

There are popular A/B testing tools, such as Google Analytics Content Experiments, which is a free tool and can test up to five full versions of a single page, each delivered to visitors from a separate URL. You can compare how different web pages perform using a random sample of your visitors.

Andrea Burbank from Pinterest talked about their customized A/B experimentation framework, which includes the ability assigning users to different experiences. The post-hoc analysis is performed segmentally. Jen Dolson from Facebook talked about using Google Analytics and her experiences on measuring the impact of UI, data, and search ranking changes on user engagement. Leslie Nguyen from Box talked about her experience implementing A/B tests on mobile apps, an area new to the A/B testing space due to the lengthy approval process and difficulty of real-time updates. Mona Gandh from AirBnB talked about designing and implementing frameworks that enable rapid testing and iteration of marketing messages, landing pages & conversion funnels. She also talked about building tracking and reporting infrastructure to measure the effectiveness of these A/B tests.

Things need to bear in mind when doing A/B testing

  • The smaller the change is, the more data is needed to be sure that the conclusion is statistically significant
  • Sample size should be set beforehand, and commit to not stop the test until the sample size has been exceeded
  • A better confidence metric to use is the G-test

 A/B testing requires some knowledge to perform properly.

Use Chrome DevTools as the Front End Development Environment

It is more efficient to use DevTools as the front end development environment than using Visual Studio.

If I choose to use IE 8 user agent under DevTools settings, which is equivalent to Mozilla 4, when viewing element’s user agent style in chrome, the -webkit- styles will be disabled, instead the selected user agent styles will be active. This means the selected user agent is not only what the browser tells the server and the browser also behaves as the selected user agent. In other words, you could stay in Chrome to check how your pages look like in different browsers.

Sources Panel

  1. for viewing and modifying css and js files, including pretty print minified js code
  2. ctrl + s can save a browser local modification
    • right mouse in source code can load local modifications”
    • time tag with modifications will show, to apply original or apply revision content
    • revert to original
  3. Image

  4. save as to save a hard copy or save to the workspace if it has been allowed
  5. setting break points and debugging js code

Image

Console Panel

  1. log and command line
  2. the command line allows any JavaScript commands
  3. console.log(‘createEvent called’); console.log(console);
  4. to get the console commands: https://developers.google.com/chrome-developer-tools/docs/console-api
    • console.log(“I can’t wait to run my 5K”)
    • console.log(document.getElementById(“events”))
    • calendar.countEvents()
    • console.assert(Calendar.countEvents() == 3)
    • console.warn(“Watch out!”)
  5. inspect($(“#date”)[0]) to find where is the element inside the DOM
  6. $0, $1, $2 … to find the select history from the most recent (i.e., select an element in element penal, then $0 in the console points that same element)

References
http://developer.chrome.com/extensions/samples.html#devtools
https://developers.google.com/chrome-developer-tools/docs/shortcuts
https://developers.google.com/chrome-developer-tools/docs/settings
https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks
http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
https://plainaveragemind.wordpress.com/2013/10/12/chrome-devtools-a-pictoral/

Understand V8 to Make JavaScript Run Faster

V8 is Google’s open source high-performance JavaScript engine and it is also what Node.js based on. V8 is written in C++ and can run standalone, or can be embedded into any C++ application. V8 compiles JavaScript to native machine code (IA-32, x86-64, ARM, or MIPS CPUs) before executing it. Daniel Clifford’s great Google IO talk provides an in-depth explanation on how V8 works and how to avoid the speed traps.

V8 has two compilers, a base or “full” compiler and an optimizing compiler. The base compiler directly generates execution code without performing any type analysis. During runtime V8 creates hidden classes for fast property access and uses Inline Caching (IC) to refine knowledge about types. The optimizing compiler re-compiles hot functions based on heuristics of the code’s execution profile after the type information is collected from ICs. The efficient garbage collection ensures fast object allocation, short garbage collection pauses, and no memory fragmentation.Image

Tips and tricks to avoid the speed trap and improve JavaScript performance in V8

  1. Initialize all object members in constructor functions (fixed object layout simplifies property access; an object changes its hidden class when a new property is added)
  2. Initialize object members in the same order (to avoid different trees of hidden classes)V8-hidden class
  3. Prefer numeric values that can be represented as 31-bit signed integers (to avoid conversion to a boxed double from SMI – SMall Integer)V8-tagging
  4. Use contiguous keys starting at 0 for Arrays (there two types of array storage in V8, fast elements use linear storage, dictionary elements use hash table storage, sparse arrays will make V8 to switch to dictionary element mode)
  5. Don’t pre-allocate large Arrays (e.g. > 64K elements) to their maximum size, instead grow as you go
  6. Don’t delete elements in arrays (to avoid making key sets sparse ), especially numeric arrays
  7. Don’t load uninitialized or deleted elementsV8-2
  8. Pre-allocate small arrays to correct size before using themImage
  9. Don’t store non-numeric values (objects) in numeric arrays (to avoid re-boxing)
  10. Initialize using array literals for small fixed-sized arraysV8-Array literal
  11. Prefer monomorphic over polymorphic whenever possible
  12. Avoid hidden class changes in functions in the late time running of the code, i.e., after they are optimized
  13. Avoid de-optimization or bail-outV8-bailout workaround
  14. Reduce to pure JavaScript (no DOM, V8 is only for JavaScript)

Helpful resources

Node.js – AngularJS Learning Notes (A Tangent Edition)

While reading through AngularJS source code, I found that the nice code comments looked very familiar, I felt I had read them on the AngularJS documentation site. I was curious and opened up AngularJS API ng scope $watch document and compared to the code comments of $watch function under Scope.prototype. I could tell that {@link ng.$rootScope.Scope#$digest $digest()} was translated into hyper link  $digest() and the sections started with “-“ were translated into html unordered list items. What a brilliant idea! I was amazed. But it didn’t take me any time to find out that the actual credit of automated document generation should go to Node.js:

I have been working on the .NET platform since it was born. IIS was about the only web server that I had worked with until I learned Python and Node.js a year ago. Setting up IIS could be tricky. I like the simple http server in Python. I like to create simple http or https servers using Node.js even better. Node.js has made the front end development so much easier with the simple and flexible way to build an http server.

Node.js plays an important role in developing AngularJS applications. Node.js is used to generate AngularJS documentation, run a development web server, run tests, and to create build. Yo, Bower, and Grunt are built on Node.js.

The more I use Node.js, the more I love it. I watched quite a few Node.js videos on YouTube and here are some highly recommended ones:

Node.js tutorial by ebin paulosep

Note that lesson 03 and 08 were mislabeled originally.

Google tech talk:

Setting Up Yeoman on Windows — AngularJS Development Notes

Yeoman is a great starting point if you create an AngularJS project from scratch. Setting up Yeoman on Windows machine for MS developers is not as straightforward. I have read through Preparing a Windows Machine to use Yeoman and Installing Yeoman Front-end Development Stack in Windows, eventually I came up with my own set of steps:

1. Setup Node.js

  • Have node.js installed
  • Modify the path environment variable to include the path to node.exe and npm.cmd
  • Start a new command prompt and test to make sure npm and node can be started anywhere

2. Setup Yeoman for webapp or angular specifically

  • Run npm in command prompt to install modules
      • npm install -g yo (bower and grunt are automatically installed)

                Yo scaffolds out a new application
                Grunt is used to build, preview and test the project
                Bower is for dependency management like NuGet

  • npm install -g generator-webapp
  • npm install -g generator-angular
  • Modify the path environment variable to include AppData\Roaming\npm

3. Setup Ruby (this is only needed if you will use SCSS in your AngularJS app)

  • Install Windows 64 bit Ruby
  • Start Ruby command prompt
    • gem install sass
    • gem install compass
  • Modify the path environment variable to include the path to Ruby.exe and Compass.bat

*Path setting example:
PATH=%NODEJS%;%APPDATA_NPM%;%RUBY%;%PATH%
NODEJS=G:\Program Files\nodejs\
APPDATA_NPM=%USERPROFILE%\AppData\Roaming\npm
RUBY=G:\Ruby200-x64\bin

If you need to choose some good front end dev tools, I highly recommend Sublime Text 3.

Follow Kickstart Your AngularJS Development with Yeoman, Grunt and Bower, and replace process.env.LOCALAPPDATA in ..\node_modules\karma-chrome-launcher\index.js by the actual chrome.exe path on your machine (can’t simply fix through environment variables), off you go! You will get a taste of real AngularJS project and some great karma test features! Very cool!

Handy Yeoman commands

  • yo angular
  • yo angular:app myAppName
  • yo angular:controller myControllerName
  • yo angular:directive myDirectiveName
  • yo angular:filter myFilterName
  • yo angular:route myRouteName
  • yo angular:service myServiceName
  • yo angular:view myViewName