django forms are becoming disconnected form the frontend as we move towards API heavy systems. We attempt to bridge the gap by delivering form definition over API, render it in the frontend dynamically using Backbone & Handlebars, provide mechanism for submitting & validating forms over API.
3. Lets talk about forms
django Forms
And how we can use them in
this day & age of APIs!
4. What can you expect…
• What’s wrong with forms as it is
• How we use forms
• Issues using form in an API
world
• Approaches for tackling the
issues
• The solution
5. The good old days..
• Write up some HTML
• Throw some fancy template tags in
there
{{ my_awesome_form.as_p }}
• WIN
8. Nuevo mundo..
• Django forms live on API server
– Validates/ saves API requests
– Doesn’t get rendered via template
• You’ve been writing forms in the
frontend
– Hardcoded HTML
– Trying to match up data that API expects
9. API Clients
• Your website no longer lives on the same
application space as the API
• Common API clients
– A JavaScript MVC powered website
– An android app
– An iOS app
11. The Issue
• You can serve most platforms with an
HTML app
– Write form in HTML on your webapp
• If you write native application for mobile
– You recreate forms using the interfaces
available
12. The Issue
• These interfaces you write
– Don’t have any idea about the django
forms residing on the API server
– Only know what data to collect when you
explicitly code them on each device
• There’s a disconnect
13. Houston we have a problem..
http://epicdemotivational.com/tag/beer/page/2/
15. Lets take a step back
ˈ rm (noun)
fȯ
a printed or typed document with
blank spaces for insertion of
required or requested information
Entry #4 at http://www.merriam-webster.com/dictionary/form
16. In the world of HTML
Part of an HTML document with input
interfaces for inserting required or
requested information
17. In the world of web apps
• A form is the interface we provide the
application user to collect information
• It’s essential to any application where we
collect data
19. django Forms
• A construct that:
– Binds data (request.POST)
– Validates data (clean)
– Processes data (save)
– Renders interface (as_p)
20. django Forms
• ModelForm
– Turns your model into a form
– Easiest way to get an interface for your
data
• Widgets
– Define specific properties for interface
element
– Separates presentation from data types
21. Why not just render via template?
You can’t if:
– You only use django to power your API and
the consumers are arbitrary
– You run several django API servers each
dealing with different data space
22. Think about this architecture
Profile API
Analytics API
Content API
Admin App
User App
23. Your services are distributed
• Web applications we design are
increasingly becoming:
– Separated between presentation and data
layer via API
– Dependent on multiple API endpoints
– Rich and complex in interface
24. Your services are distributed
• Your site content is retrieved using the
Content API
– You collect user feedback on content using
forms
– You provide admin interface to manage
content using forms
25. Your services are distributed
• Information for users are stored and
retrieved using Profile API
– You allow log in, creation and update of
profiles using forms
– You provide admin interface to manage
profiles using forms
26. Your services are distributed
• Site performance and user traffic is
recorded to Analytics API
– You provide admin interface to access and
create custom reports using forms
27. Think again.
Profile API
Analytics API
Content API
Admin App
User App
28. The Issue (contd.)
• At WiserTogether we love APIs & have
a similar distributed setup
• We’ve been hardcoding forms in the
frontend, collecting data and sending to
API
29. The Issue (contd.)
• Whenever a data point in the backend
changed, we had to update the form
• We have multiple clients who require
different set of fields present on
registration forms
– Again, hardcoding in frontend
31. What to do..
• django forms is used to validate and
process our API data
• We wanted django forms to
determine our frontend interface
– But it was completely agnostic about
backend forms!
32. What to do..
• Deliver form definition over API
• Render interface in the frontend from
the retrieved definition
– No more hardcoding
– Forms in the user facing application
changes as soon as backend form
changes
33. What to do..
• Adjust form in whatever way
necessary
– Add/ remove fields from registration
form
– Frontend renders form exactly the way
you want
– No code change necessary in frontend
34. What to do..
• Contain form definition in one spot
• Allow a single central point to control
interface on all applications
• Allow different API consumers to
retrieve form definition
– And render interface appropriate for the
platform or device
37. Step 2
• Devise methods to handle the
following over API:
– Deliver form definition
– Receive form data
– Validate form and deliver errors
– If valid save the form
38. Step 3
• Handle forms in the frontend using
API data
– Render form
– Submit data
– If not valid, then display errors
– If valid, then display success
message, reload page or redirect as
necessary
40. django Remote Forms
• Extracts all information from a given
django form or model form instance
• Goes through each field & widget to
extract all necessary information
• Presents the information as
dictionary for further manipulation &
easy serialization into JSON
43. Step 2
• Devise methods to handle the
following over API:
– Deliver form definition
– Receive form data
– Validate form and deliver errors
– If valid save the form
44.
45. Points to Ponder
• Handle CSRF yourself of using X-
CSRFToken
– django CSRF middleware is not JSON
friendly
• Encapsulate form processing in save
method, similar to Model Form
46. Step 3
• Handle forms in the frontend using
API data
– Render form
– Submit data
– If not valid, then display errors
– If valid, then display success
message, reload page or redirect as
necessary
47. HTML/JS/CSS Implementation
• We created a set of rendering and
data handling tools for the frontend
using:
• In future, we’ll be working towards
iOS implementations as well
48. Backbone Form Handler
• Renders forms based on definition
received over API
• Uses Handlebars template for
rendering:
– Core form structure (form tag, fields
container, global errors)
– Field & widget structure (help text, errors)
• Error rendering
49. Backbone Form Handler
• Allows instant validation
– Similar to autocomplete
– Field can be validated as soon as you
move to next one
• Allows preloading of data
• Disallow editing of fields
– Including selects, radio and checkboxes
• Provide submit buttons (if not supplied)
51. Sample Backbone View
Instantiate
form model
Instantiate
form view
Initiate rendering
by fetching the
form definition
52.
53. django Remote Admin
• A reviewer expressed interest
– Use remote forms to expose django admin
interface over API
• So I implemented a set of API endpoints
– Exposes django admin app/model/instance
data
– Exposes admin forms
• And wrote a backbone app implementing
django admin
54. Goals of django Remote Admin
• Allow administration of django
projects over API
• No more ties to the same old
interface!
• Use awesome Handlebars snippets of
your own to spice up the interface
55. How does it work?
• Cycle through admin site registry
– Extract app/model info and expose over
API
• Create ModelForm from the model
– Expose over API using django remote
forms
• The backbone app calls the API
– Allows browsing apps/ models
– Allows creating/editing model instances
56. Further Work
• django Remote Forms
– Implement file/ image uploading over
API
• django Remote Admin
– Load form/widget customizations from
Admin classes
– Implement pagination for foreign key
loader
57. Demo
• Ask me about WiserTogether
– github.com/WiserTogether/django-remote-forms
– github.com/tarequeh/django-remote-admin
• Follow my tweets @tarequeh
• Shout out to Carlo Costino
• ind this presentation
– slideshare.net/tarequeh
58. Q/A
• Ask me about WiserTogether
– github.com/WiserTogether/django-remote-forms
– github.com/tarequeh/django-remote-admin
• Follow my tweets @tarequeh
• Shout out to Carlo Costino
• ind this presentation
– slideshare.net/tarequeh
Editor's Notes
We are a small health care startup and we provide a platform through which users can make better decisions about their healthcare options
But we are here today to talk about forms, particularly django forms.
I’ll discuss the following things..
Remember the times when the only form on your site was a comments page?
Here we see He-Man riding warrior pony serving API using django and says I give you API! And all the consumers love it
But the problem of reproducing forms on the frontend is much more than not being able to render it via django template
Here’s a clear manifestation of forms on different platforms. On the far right we have the login/registration form on Twitter’s homepage, which is strikingly similar to the interfaces on these devices!
So let’s get back to the issue of form rendering
This is a simple authentication form that asks for your email and password, has a few clean methods to distill the data and some additional helper methods
LOVE django forms
ModelForms and Widgets are two great aspect of django, one promotes DRY and the other provides separation of logic
And much more
3 independent django projects and 2 independent webapps
And much more
And much more
And much more
And much more
And much more
More hardcoding to accommodate different versions of the same form
More hardcoding to accommodate different versions of the same form
More hardcoding to accommodate different versions of the same form
Let’s go over each of the steps in detail..
And our solution…
I want to emphasize on the fact that I’m not a big fan of sending HTML over API. Particularly not for forms, since the consumer of the API may or may not render the form using HTML
Lets take a look at what a view capable of providing such API functionalities look like. I promise it’s not too complex.
Finally step 3
So we went ahead and implemented a solution for the web applications
The primary construct that’s responsible for managing the remote forms is a special Backbone model/view combo that we call the Backbone Form Handler
Lets take a look at the handelbars part of this solution
As you can see, we are using little snippets of Handlebars for different form fields. Similar to form widgets.
More hardcoding to accommodate different versions of the same form
Please feel free to use the examples in any way that suits your needs. They are not meant to be out of the box solution and currently doesn’t have much documentation
Please feel free to use the examples in any way that suits your needs. They are not meant to be out of the box solution and currently doesn’t have much documentation