About order form improvements
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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)