Post on 15-Jan-2015
description
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)