Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Migrating from a Django Template to Ember.js

Matt
May 05, 2015

Migrating from a Django Template to Ember.js

This presentation will help people who are semi-technical understand why Ember.js is a good front-end framework and why we migrated from a Django template to Ember.js in order to scale.

Matt

May 05, 2015
Tweet

More Decks by Matt

Other Decks in Technology

Transcript

  1. Summary 1. Why Django Is Not Ideal 2. What is

    Ember ? 3. Implementation 4. Future 5. References
  2. 1/ Why Django is not Ideal • Code is tied

    to backend! ‣ Bypass to easily public API Endpoint ‣ AJAX endpoints are not in the Public API • Hard to maintain while scaling the app • Not optimized for front-end testing
  3. 2.1/ We chose Ember • Powerful Framework • It is

    not a beta project! ‣ “Stability without Stagnation” • Ember community getting bigger ‣ More tutorials / Issues resolved • Optimized for frontend testing
  4. 2.2/ What is Ember.js ? • Javascript is a MVC

    (Model-View-Controller) web application framework • Designed for Single Page Applications! • Open Source
  5. 2.3/ What Ember offers • Two-way data binding ‣ Customer

    never see inaccurate data! • Web template (Handlebars) ‣ easy to learn and read • Library to manage model data (Ember-Data) ‣ Structured for ease of use ‣ No need to reinvent the wheel ( AJAX handle)
  6. 3.1/ Migration • Move page per page • Steps: 1.

    List needed data, mock them with http-mock. 2. Move the page to Ember & create the API endpoint 3. Switch from mock-server to real endpoint • Redirection between two websites: ‣ goshippo.com/user/connect/ ‣ app.goshippo.com/#/connect/
  7. 3.2/ Security • Authentication handled by Django • Transform session

    id into JSON Web Token (JWT) ‣ Fast authentication (no Db call) ‣ Expire every 12h • HTTPS
  8. 3.3/ Hosting • Use AWS solution: s3 + Cloudfront (CDN)

    • Redis as key/value store • Cloudflare has a DNS server • ember-cli deploy ‣ Fast deployment ‣ Rollback ‣ Preview on production of the release
  9. 4/ Future • Public endpoints ‣ Content regulation with privileges

    ‣ Mobile app • 100% test coverage! • Extreme Programming Method
  10. 5/ References • http://emberjs.com/ • http://ember-cli.com • http://discuss.emberjs.com/t/how-i-use-ember-cli-with-http-mock/7403 • Packages:

    ‣ https://www.npmjs.com/package/ember-deploy-s3 ‣ https://github.com/GetBlimp/django-rest-framework-jwt