About order form improvements
0 likes4,996 views
This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.
About order form improvements
- 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)