Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

About order form improvements

4,784 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

About order form improvements

  1. 1. About Order Form Page Improvements Toshiaki Takahashi (06/09/2013)
  2. 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. 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. 4. Also I really like Steve Ballmer. please watch this movie! http://youtu.be/wvsboPUjrGc
  5. 5. About Order Form Page
  6. 6. About Order form page ● All replaced current pages (from PHP to Python) ● using decanter framework ● using Gengo API ● DEMO contributers
  7. 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. 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. 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. 10. Efforts for speed up
  11. 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. 12. use socket.io for API returns decanter RabbitMQ node.js Redis session management push by websocket/http http async
  13. 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. 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)

×