Monthly Archives: September 2013

The Chinese Moon Festival

Today is the Chinese Moon Festival, it is the 15th of the 8th lunar month in lunar year. The Chinese Moon Festival is also known as the Mid-autumn Festival. It is the time to celebrate the harvest and also the time for family reunions. When the full moon rises, families get together to watch the full moon, eat moon cakes, and sing moon poems. It’s like a perfect world. The Moon Festival is the second grandest festival after the Spring Festival, which is also known as Chinese New Year.

I have seen numerous, stylish, yet fresh moon cakes in The Great Wall, our local Chinese grocery store, in the past few weeks. I have tried a few kind and they all taste good!! It is hard to find the old Beijing traditional moon cakes though. They are called “自来红” or “Naturally Red”. I feel I really miss them 😦

Image

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