0

I am in the process of refactoring a Django web app. It is written in the usual MVT style, and I would like to change this for a REST + frontend approach. In my first iteration I would like to do as little changes as possible. My plan is:

  • split backend into REST API and a simple, client facing Django application (the new "frontend")
  • business logic in the REST API
  • the Django "frontend" would talk to the REST API to perform operations and gather data
  • REST API with Django REST Framework (DRF), keeping the current models and with little changes to the views.
  • keep as much as possible of the Django templates for the frontend. That is, I do not want to introduce any new technology for the frontend (no Javascript SPA framework ala AngularJs, EmberJs or React)

Later iterationns of the refactoring would probably move to a React SPA backed by the DRF application.

Is it possible to have a Django "frontend" talk to a REST api?

Improve this question
6
  • I admit I'm not too familiar with Django, but I remind you that it is always possible to communciate to a REST backend through native javascript in any case.. If it is the "Django" way is debatable, but I'm not sure if that is even so important if your question is "Can I make it work somehow?"
    – Neil
    Commented Feb 28, 2018 at 7:13
  • @Neil my plan is to avoid using javascript frameworks in the first iteration: I want the "frontend" to be django based, since I already have this. In a second phase, once the REST api has stabilized, I will rewrite the frontend as SPA (React, Angular or Ember). I nevertheless doubt that I can keep the django frontend and have it talk to a generic REST API (in this case also django based), hence my question.
    – blueFast
    Commented Feb 28, 2018 at 7:26
  • Why so complicated? What's the gain of doing this instead of implementing the client side with browser's native technologies (directly)?
    – Laiv
    Commented Feb 28, 2018 at 19:18
  • @Laiv 1) reuse existing code 2) "just" is a bit optimistic: introducing a fully new technology is not an easy matter. I will do it, but I want to avoid this in the first iteration.
    – blueFast
    Commented Feb 28, 2018 at 21:44
  • Missusing a technology for the wrong reason is even worse since you are going to be in no man's land. Basically your first iteration is going to be (partially) wasted time. IMO.
    – Laiv
    Commented Feb 28, 2018 at 21:53

1 Answer 1

Reset to default
1

Is it possible to have a Django "frontend" talk to a REST api?

First, move the data to a headless CMS. Then, add an API token to the headless CMS in your settings.py:

/webapp/settings.py
# Storyblok configuration for your own space
STORYBLOK_CONFIGURATION = {
  'PRIVATE_TOKEN': 'YOUR_PREVIEW_TOKEN',
  'HOME_SLUG': 'home'
}

Then structure your Django view layer so that each template maps to an API endpoint. Separate static assets on a separate server and proxy requests to it. For example:

/webapp/views/ All your layouts and components at one space - if you add a new or change an existing Jinja2 component (.html.j2) the gulp build will trigger an instant reload for you in the browser - also each component is a representation of a storyblok component. If you create a headline component in storyblok - make sure to create a headline.html.j2 as well - so the django application knows which component to render.

The counter part to the component in Storyblok is right in your already downloaded python project. you can find the teaser.html.j2 in the /webapp/views/components/ folder. We’re using jinja2 for the templates - you can, of course, change this with any other templating engine you want. For this example that's how the teaser.html.j2 looks like:

<div class="teaser">
  <!--
  The _editable attribute makes the next
  DOM-element clickable so the sidebar can
  show the right component.
  -->
  {{ blok._editable|safe }}
  <div class="teaser__inner">
    <h1>
      <!--
      You can access every attribute you
      define in the schema in the blok variable
      -->
    {{ blok.headline }}
    </h1>
    <h2>
        You can create new components like this, to create your own set of components.
    </h2>
  </div>
</div>

References

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.