An Ember.js adapter for Django

Connecting django-tastypie to the ember-data component

Transcript

1. An Ember.js adapter for Django Diego Muñoz Escalante PyCon Canada 2012
2. JS? This is PyCon! The Shining. 1980. Stanley Kubrick
3. Business is business
4. The API Features (from http://tastypieapi.org): • Full GET/POST/PUT/DELETE/PATCH support • Reasonable defaults • Designed to be extended at every turn • Includes a variety of serialization formats (JSON/XML/YAML/bplist) • HATEOAS by default • Well-tested & well-documented
5. The API: Django Models
6. The API: Tastypie Resources
7. Choosing a client • Gift oriented application ◦ Smartphone client ◦ Tablet in associated venues • Requirements ◦ Share as much code as possible ◦ Multiplatform ◦ Have fun (web open technologies)
8. Choosing a client • Gift oriented application ◦ Smartphone client ◦ Tablet in associated venues • Requirements ◦ Share as much code as possible ◦ Multiplatform ◦ Have fun (web open technologies)
9. The client: Ember.js Features: • More productive out of the box • Conventions and idioms • Data bindings • "Magic" templates • Computed properties • Router • Handlebars • Persistence • Classes, inheritance, mixins • Community http://emberjs.com
10. ember-data http://github.com/emberjs/data • Easy way to: ◦ Read models from persistence layer ◦ Create, update and delete them • Perfect option to connect to Tastypie ◦ Create models in ember-data ◦ Connect with the API
11. ember-data: models Plain Javascript models? Backbone models?
12. ember-data: models
13. ember-data: REST adapter • find() • createRecord() • updateRecord() • deleteRecord() Everything is REST Problem solved!
14. ember-data: REST adapter • find() • createRecord() • updateRecord() • deleteRecord() Everything is REST Problem solved! NO :(
15. ember-data & tastypie problems Tastypie Ember-Data expects {"name": "Test the stress machine", "person_id": "/api/v1/person/1"} {"name": "Test the stress machine", "person_id": "1"} {"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 1}, "objects": [{"id": "1", "name": "Task1", "person_id": "/api/v1/person/1/", "resource_uri": "/api/v1/task/1/"]} {"tasks": [ {"id": "1", "name": "Task1", "person_id": "1"] } /api/v1/task /tasks No data returned by default Requires data returned
16. ember-data & tastypie problems http://nooooooooooooooo.com/
17. ember-data & tastypie problems What should I change? 1. Tastypie settings a. What about other clients connected to the API? b. It is already working, I don't want to modify it 2. Ember-data a. I love Python. Ember is a really complex piece of JS b. Breaking the conventions is a bad idea
18. ember-data & tastypie problems What should I change? 1. Tastypie settings a. What about other clients connected to the API? b. It is already working, I don't want to modify it 2. Ember-data a. I love Python. Ember is a really complex piece of JS b. Breaking the conventions is a bad idea Answer: I shouldn't change anything
19. ember-data-tastypie-adapter https://github.com/escalant3/ember-data-tastypie-adapter It does all the dirty work. Overrides: • Adapter: init, createRecord, updateRecord, deleteRecord, didCreateRecord, didUpdateRecord, didDeleteRecord, didFindRecord, findMany, didFindMany, didFindAll, didFindQuery, buildURL, pluralize • Serializer: keyForBelongsTo, keyForAttributeName, addBelongsTo, addHasMany, extractHasMany, extractBelongsTo
20. ember-data-tastypie-adapter How do I use this?
21. ember-data-tastypie-adapter Configuring the Python side
22. ember-data-tastypie-adapter Configuring the client
23. Examples
24. Examples
25. Examples
26. Examples
27. Examples Advanced features: - Transactions - Since (not available yet) - Handlebars ready - Customizable queries - Accesible record states - As advanced as you want
28. Things to do Ember community • Ember.js 1.0 • ember-data is an external component (yet) • ember-data is under heavy development • Missing features: ◦ Error handling ◦ Embedded data ◦ ManyToMany https://github.com/emberjs/ember.js https://github.com/emberjs/data #emberjs
29. Things to do ember-data-tastypie-adapter • Deletion of objects with associated data • ManyToMany workaround • Missing functionalities from RESTAdapter • Community ◦ Are you using the adapter? ◦ Did you have problems? ◦ Share your hacks
30. That's all! Project: https://github.com/escalant3/ember-data-tastypie-adapter https://github.com/escalant3/django-ember-example Contact: @escalant3 Thanks!