about order form improvements
TRANSCRIPT
![Page 1: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/1.jpg)
About Order Form Page ImprovementsToshiaki Takahashi (06/09/2013)
![Page 2: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/2.jpg)
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
![Page 3: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/3.jpg)
About me
Toshiaki Takahashi@toshipon
I work for Gengo as a front-end engineersince April 2013
I’m interested in..CoffeeScript
Go langRubymotion
![Page 4: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/4.jpg)
AlsoI really like Steve Ballmer.please watch this movie!
http://youtu.be/wvsboPUjrGc
![Page 5: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/5.jpg)
About Order Form Page
![Page 6: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/6.jpg)
About Order form page● All replaced current pages (from PHP to
Python)● using decanter framework● using Gengo API● DEMO
contributers
![Page 7: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/7.jpg)
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)
![Page 8: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/8.jpg)
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!
![Page 9: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/9.jpg)
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.
![Page 10: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/10.jpg)
Efforts for speed up
![Page 11: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/11.jpg)
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.
![Page 12: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/12.jpg)
use socket.io for API returns
decanter RabbitMQ node.js Redis
sessionmanagement
push by websocket/http
http
async
![Page 13: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/13.jpg)
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.
![Page 14: About order form improvements](https://reader034.vdocuments.us/reader034/viewer/2022052504/554a0f2cb4c9055c598b49c0/html5/thumbnails/14.jpg)
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)