Tinkering with Django and Ember.js

Published byGoogle on

Hi everyone. Recently I have been looking around at the various JavaScript frameworks that have been blooming out recently. Three came in front of the others, namely BackboneJs, AngularJs and EmberJs.

After looking at all 3 of them, EmberJs is the one which appeals to me the most. But if you hadn't guessed from the tutorials on this blog, I also like Django a lot and most tutorials out there talking about EmberJs and actually using a data backend are using Ruby on Rails and the few that I could find that were talking about Django were based on TastyPie while I like Django-REST-Framework better... So I decided to dive in and go full speed ahead and learn the hard way.

The result of which is Djember-CMS.

The idea behind this project came from someone who is far from computer-savvy who asked me to build her a manageable website.
Now while Django admin can easily be customized to suite the need of most semi-advanced computer users, this person is clearly not one of them. So I needed something really easy to manage with edit-in-place's everywhere.
While this can be achieved by using only Django, the user experience can be higly improved by using a frontend framework.

Since my eyes had been set on EmberJs for a little while now, this is a great opportunity to learn. I also think this kind of project can be of use to many people, so even if it is still in it's very early stages, I've decided to open-source it. Please, remember I am learning EmberJs through this project and right now it is probably full of beginner's mistake.

What has been achieved so far?

So far the project is able to display a simple menu and some polymorphic pages based on different "Page metas" which are defined through Django admin.
By polymorphic page I mean that you define in Django a page type with an arbitrary number of fields. Every page, so far, is stored inside the same database table using an hstore field to store the different kinds of fields.
The pages are rendered differently using a template corresponding to their type. Currently the template <-> type relationship is hard-coded but is meant to be dynamic in the future.

The project has been using Bootstrap 3 from the start so that it can be easily themable.

It isn't much but it looks like a promissing start.

What has not been done so far and will not be done in the near future?

The project doesn't use any minification or precompilation, which makes it rather slow to load. This is intentional! Since the project is still very far from V1 and since it makes it easier to debug, things will stay that way until we reach the first stable release. Also, as explained further in this article some of the js files which are static right now wil be generated by Django in the future. 

What are the next steps towards V1?

The next thing to be implemented will be authentication because it is something every CMS needs.

Once authentication works, the following step will be to implement in-place editing of the current "simple" page model. This will require refining the backend-model to provide field types. When I say field-types, I  mean types corresponding to different frontend components like input-text, textarea, richedit, croppable-picture and so on.

After that we will try to have multi-dynamic-model pages. This may sound complicated so here is an example of what I mean by multi-dynamic-model pages:
Let's take the contact page as a basic example. A contact page is basically a polymorphic page as described above whith a contact form linked to an extra model (forms are saved into the databse every time someone submits a contact request). This page thus need to access and understand an extra model.
Another example is the homepage of this project which is also a "basic" polymorphic page (having an introductory text) which will have to access the list of pictures used by the gallery.

Now when I say multi-dynamic-model pages, I could simply define my extra models by hand and use them inside the appropriate templates but that wouldn't be very dynamic. What I'd like to achieve is to have Django build the EmberJS models dynamically through something similar to Model Forms.

Another part of V1 will be to make those multi-dynamic-model pages fully editable as well (like managing the list of pictures displayed by the carousel and being able to upload some new ones).

And last but not least: having the dynamically generated js files pre-compiled/minified and cached by Django.

What's after V1?

The various V1.x releases will aim at adding common features like a blog with comments and multi-templatedBlock-based  pages to try to fullfill the needs of most "basic" websites.

As far as V2 is concerned I am not entirely sure yet but I'd really like to have that system running on a multi-dynamic-site base to make things easier for people maintaining several websites.

If you find the project appealing, make sure to come check its progress regularly on its homepage. In the mean time I'll see you in a few days for another Django tutorial about making your applications re-usable.

Have a great few days until then everyone Smile

JavaScript Bootstrap Ember.js Framework Django


Djember-CMS has not been continued but if this article has been of any interest to you, you might want to check out the cc_django_ember_app cookiecutter template from https://bitbucket.org/levit_scs/django_project_template

By Emmanuelle Delescolle - 2¬†years, 3¬†months ago Reply 

Post a comment