RAD on SaaS platforms: Django, Django Rest Framework and…

… a catch

Marco Montanari @ingmmo,

Modal Nodes @mnorchestra

Who am I?

Marco Montanari@ingmmo, marco.montanari@gmail.com, http://www.ingmmo.com/

• Python architect, Django fanatic, Tastypie appreciator, Django Rest Framework conoisseur, pandas cuddler, GIS lifestyler

Who are we?

Modal Nodes – The Software Orchestra• Lorenzo Gigli, Android + web front end dev

• Leonardo Montecchiari, iOS + IoT dev

• Jacopo Carletti, Full stack Web dev (the wrong stack starting with P...)

• Riccardo Biavati, Designer (the one that really does the heavy lifting)

• Me (Marco), Full stack dev (the right stack)

The Issue

• As coders• We love to code NEW STUFF

• We hate routine

The Issue

• As coders• We love to code NEW STUFF

• We hate routine

• (We would love to write our code once and have the designers changing the UI settings N+1 times)

Backend Frontend

A wise man's question contains half the answer.Solomon Ibn Gabirol

What does the Issue express?

• We don’t want to explain the APIs we write. • We would love them to be self documenting

What does the Issue express?

• We don’t want to explain the APIs we write• We would love them to be self documenting

• We would love to have simple standard rules• Standard rules mean standard APIs

• Standard APIs mean standard libraries• Standard libraries mean more time

• More time means possibility to create the tool for the designer

• The time to create the tool means more time!!!

• Win!!

• It’s a matter of describing the world

Backend API Frontend

How do we describe our API driven world?

• Django Class based views?

• Swagger?

• Django Rest Framework?

• WSDL 2.0?

• RAML?

• WhateverML?

• WhateverON?

• UML?

• XDI?

Cool! Uhm…

How do we describe our API driven world?

• Django Class based views?

• Swagger?

• Django Rest Framework?

• WSDL 2.0?

• RAML?

• WhateverML?

• WhateverON?

• UML?

• XDI?

Let’s go back to the basics

• Django• Class based views for APIs?

• Very loose

• Cool, but it means defining an adapter from Django to the outside world and that bringsus back to the standards slide.

• Django Rest Framework • Quite strict

• Descriptive on the actions and not as much as it could be on the data structures

• <3 OPTIONS method… what’s not to love there??

Backend API FrontendDesigner

Frontend

Ok cool, but…

We added 2 layers between our app and our front end…• Not cool

• Not maintainable…

UNLESS…

…unless we can find a nice tool or library

• Angular4 could be a nice tool to provide a structured and meta-levelapproach to the code we are describing• Does not work well with Angular-driven editors, as of now… (we have a library

for non-drag-drop editors)

…unless we can find a nice tool or library

• Angular4 could be a nice tool to provide a structured and meta-levelapproach to the code we are describing• Does not work well with Angular-driven editors

• GrapesJS

GrapesJS

Pros

• Extensible

• Flexible

• Beautiful

• Easy to use for the designer

• Fun to work with for the dev

Cons

GrapesJS

Pros

• Extensible

• Flexible

• Beautiful

• Easy to use for the designer

• Fun to work with for the dev

Cons

• Pure JS…

• The drag-drop elements are pure html+css (no js)

GrapesJS

Pros

• Extensible

• Flexible

• Beautiful

• Easy to use for the designer

• Fun to work with for the dev

Cons

• Pure JS…

• The drag-drop elements are pure html+css (no js)

Some magic required

DRF Metadata… what if…

• What if we could generate GrapesJS components from ourstandardized metadata?• A list component

• A list item component

• A detail view component

• A create/edit component

Backend API FrontendDesigner

Frontend

Contributions!

• Django Rest Framework Metadata Transformer

• GrapesJS data-attribute animator• (which is not bound to GrapesJS, just aptly structured to be useful with…)

• http://cdn.modal-nodes.com/libs/js/mn-grapesjs-animator.js

• Angular2+ mn-bms (Backend Management Service)• Not discussed, but it relies on the metadata to provide a set of RESTful APIs

directly to the UI

FrontendBackend API FrontendDesigner

DEMOIf we have time. Else, you can find a usable version on our post on Medium

Thanks!

• Questions?

Follow us on Medium: https://medium.com/modal-nodes

Follow us on twitter: https://twitter.com/mnorchestra

Follow us on github: https://github.com/modal-nodes

Follow me on Medium: https://medium.com/sirmmo

Follow me on twitter: https://twitter.com/ingmmo

Follow me on github: https://github.com/sirmmo