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)