Download as PDF, PPTX
Uploaded byGengo
About order form improvements
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 ToshiakiTakahashi (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 Iwork for Gengo as a front-end engineer since April 2013 I’m interested in.. CoffeeScript Go lang Rubymotion
- 4. Also I really likeSteve Ballmer. please watch this movie! http://youtu.be/wvsboPUjrGc
- 5. About Order FormPage
- 6. About Order formpage ● 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 isa 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 MVCframework 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.
- 11. use socket.io forAPI 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 forAPI 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 ● usinglibraries 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)