About Order Form Page ImprovementsToshiaki Takahashi (06/09/2013)

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

About me

Toshiaki Takahashi@toshipon

I work for Gengo as a front-end engineersince April 2013

I’m interested in..CoffeeScript

Go langRubymotion

AlsoI really like Steve Ballmer.please watch this movie!

http://youtu.be/wvsboPUjrGc

About Order Form Page

About Order form page● All replaced current pages (from PHP to

Python)● using decanter framework● using Gengo API● DEMO

contributers

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)

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!

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.

Efforts for speed up

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.

use socket.io for API returns

decanter RabbitMQ node.js Redis

sessionmanagement

push by websocket/http

http

async

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.

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)