This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.

1. About
Order Form Page
Improvements
Toshiaki Takahashi (06/09/2013)

2. Index
● About me
● About Order Form pages
● Architecture
○ decanter (Python)
○ chaplin.js (JavaScript)
○ express (node.js)
● Efforts for speed up
○ use socket.io to return API
○ cache in Redis to return API
○ use grunt.js for development efficiency

3. About me
Toshiaki Takahashi
@toshipon
I work for Gengo as a front-end engineer
since April 2013
I’m interested in..
CoffeeScript
Go lang
Rubymotion

4. Also
I really like Steve Ballmer.
please watch this movie!
http://youtu.be/wvsboPUjrGc

5. About Order Form Page

6. About Order form page
● All replaced current pages (from PHP to
Python)
● using decanter framework
● using Gengo API
● DEMO
contributers

7. Using Libraries
● Back-end
○ decanter (python web app framework)
○ express (node.js) for use socket.io
○ RabbitMQ
(connect from python to node.js has redundancy)
○ Redis (cache session)
○ Gengo API (gengo-python client libray)
● Front-end
○ chaplin.js (javascript mvc framework)
○ handlebars (template engine)
○ compass (build sass files)
○ RequireJS (optimize js files)
○ grunt.js (for builder)

8. decanter
● decanter is a python-base micro web
framework
● Extended the bottle framework
● Feature
○ Simple and Small
○ Has directory structure
○ jsonvalidator (use jsonschema)
○ Session management using Redis
● http://gengo.github.io/decanter/
please fork it!

9. chaplin.js
● JavaScript MVC framework for single-page
web app.
● http://chaplinjs.org/
● Extended backbone.js
● Features
○ written in CoffeeScript (very readable code!)
○ memory managements
■ can dispose js events automatically.
■ backbone.js have to dispose events manually.
● chaplin.js can use Brunch as builder quickly.

10. Efforts for speed up

11. use socket.io for API
returns
● this time, i wanted to achieve a multi-file upload.
● but, word counting of files by gengo API takes time.
● There is a simultaneous connection limit browser...
● so we change to return in the websocket to
asynchronously return of the API.

12. use socket.io for API
returns
decanter RabbitMQ node.js Redis
session
management
push by websocket/http
http
async

13. cache in Redis
● Increasing http requests is evil
● so some API request datas cache in Redis
at first, and put to HTML as json.
● on front-end, parase json datas and cache js
models at first.

14. use grunt.js
● using libraries mainly
○ grunt-contrib-coffee
○ grunt-contrib-compass
(build SASS files and make sprite images)
○ grunt-requirejs
● environment
○ development
■ compile coffeescript/sass files
○ production
■ compile coffeescript/sass files
■ optimize by RequireJS (grunt-requirejs)
■ compress by uglify (grunt-contrib-uglify)