XHRdjango Forms in an API World          http://www.northwesternflipside.com/2011/01/10/2011-where-are-the-flying-cars/
Lets talk about me            Tareque Hossain             Lead Software Engineer
Lets talk about formsdjango FormsAnd how we can use them inthis day & age of APIs!
What can you expect…• What’s wrong with forms as it is• How we use forms• Issues using form in an API  world• Approaches f...
The good old days..• Write up some HTML• Throw some fancy template tags in  there       {{ my_awesome_form.as_p }}• WIN
Fast forward a few years..    You really dig APIs
Your setup looks like this:                    Me likey!                                I give youNo $#!7.                ...
Nuevo mundo..• Django forms live on API server  – Validates/ saves API requests  – Doesn’t get rendered via template• You’...
API Clients• Your website no longer lives on the same  application space as the API• Common API clients  – A JavaScript MV...
Forms on API Clients
The Issue• You can serve most platforms with an  HTML app  – Write form in HTML on your webapp• If you write native applic...
The Issue• These interfaces you write  – Don’t have any idea about the django    forms residing on the API server  – Only ...
Houston we have a problem..                  http://epicdemotivational.com/tag/beer/page/2/
Lets take a step back  What is a form?
Lets take a step backˈ rm (noun)fȯ a printed or typed document with blank spaces for insertion of required or requested i...
In the world of HTMLPart of an HTML document with inputinterfaces for inserting required orrequested information
In the world of web apps• A form is the interface we provide the  application user to collect information• It’s essential ...
In the world of django
django Forms• A construct that:  – Binds data (request.POST)  – Validates data (clean)  – Processes data (save)  – Renders...
django Forms• ModelForm  – Turns your model into a form  – Easiest way to get an interface for your    data• Widgets  – De...
Why not just render via template?You can’t if:  – You only use django to power your API and    the consumers are arbitrary...
Think about this architecture                   Profile API                                   Analytics APIContent API    ...
Your services are distributed• Web applications we design are  increasingly becoming:  – Separated between presentation an...
Your services are distributed• Your site content is retrieved using the  Content API  – You collect user feedback on conte...
Your services are distributed• Information for users are stored and  retrieved using Profile API  – You allow log in, crea...
Your services are distributed• Site performance and user traffic is  recorded to Analytics API  – You provide admin interf...
Think again.                            Profile API                                            Analytics APIContent API   ...
The Issue (contd.)• At WiserTogether we love APIs & have  a similar distributed setup• We’ve been hardcoding forms in the ...
The Issue (contd.)• Whenever a data point in the backend  changed, we had to update the form• We have multiple clients who...
It was a mess                $#^*!
What to do..• django forms is used to validate and  process our API data• We wanted django forms to  determine our fronten...
What to do..• Deliver form definition over API• Render interface in the frontend from  the retrieved definition  – No more...
What to do..• Adjust form in whatever way  necessary  – Add/ remove fields from registration    form  – Frontend renders f...
What to do..• Contain form definition in one spot• Allow a single central point to control  interface on all applications•...
3 step solution
Step 1Serialize form with all informationnecessary for reproduction at frontend
Step 2• Devise methods to handle the  following over API:  – Deliver form definition  – Receive form data  – Validate form...
Step 3• Handle forms in the frontend using  API data  – Render form  – Submit data  – If not valid, then display errors  –...
Step 1Serialize form with all informationnecessary for reproduction at frontend
django Remote Forms• Extracts all information from a given  django form or model form instance• Goes through each field & ...
As easy as π
A JSON form
Step 2• Devise methods to handle the  following over API:  – Deliver form definition  – Receive form data  – Validate form...
Points to Ponder• Handle CSRF yourself of using X-  CSRFToken  – django CSRF middleware is not JSON    friendly• Encapsula...
Step 3• Handle forms in the frontend using  API data  – Render form  – Submit data  – If not valid, then display errors  –...
HTML/JS/CSS Implementation• We created a set of rendering and  data handling tools for the frontend  using:• In future, we...
Backbone Form Handler• Renders forms based on definition  received over API• Uses Handlebars template for  rendering:  – C...
Backbone Form Handler• Allows instant validation  – Similar to autocomplete  – Field can be validated as soon as you    mo...
Handlebars Templates                   Handlebars                    Widgets
Sample Backbone View                                  Instantiate                                 form model              ...
django Remote Admin• A reviewer expressed interest  – Use remote forms to expose django admin    interface over API• So I ...
Goals of django Remote Admin• Allow administration of django  projects over API• No more ties to the same old  interface!•...
How does it work?• Cycle through admin site registry  – Extract app/model info and expose over    API• Create ModelForm fr...
Further Work• django Remote Forms  – Implement file/ image uploading over    API• django Remote Admin  – Load form/widget ...
Demo• Ask me about WiserTogether  – github.com/WiserTogether/django-remote-forms  – github.com/tarequeh/django-remote-admi...
Q/A• Ask me about WiserTogether  – github.com/WiserTogether/django-remote-forms  – github.com/tarequeh/django-remote-admin...
django Forms in a Web API World
django Forms in a Web API World
Upcoming SlideShare
Loading in...5
×

django Forms in a Web API World

6,572

Published on

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.

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
  • Thank you, exactly what I have been looking for!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,572
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
68
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide
  • 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
  • django Forms in a Web API World

    1. 1. XHRdjango Forms in an API World http://www.northwesternflipside.com/2011/01/10/2011-where-are-the-flying-cars/
    2. 2. Lets talk about me Tareque Hossain Lead Software Engineer
    3. 3. Lets talk about formsdjango FormsAnd how we can use them inthis day & age of APIs!
    4. 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. 5. The good old days..• Write up some HTML• Throw some fancy template tags in there {{ my_awesome_form.as_p }}• WIN
    6. 6. Fast forward a few years.. You really dig APIs
    7. 7. Your setup looks like this: Me likey! I give youNo $#!7. API
    8. 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. 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
    10. 10. Forms on API Clients
    11. 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. 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. 13. Houston we have a problem.. http://epicdemotivational.com/tag/beer/page/2/
    14. 14. Lets take a step back What is a form?
    15. 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. 16. In the world of HTMLPart of an HTML document with inputinterfaces for inserting required orrequested information
    17. 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
    18. 18. In the world of django
    19. 19. django Forms• A construct that: – Binds data (request.POST) – Validates data (clean) – Processes data (save) – Renders interface (as_p)
    20. 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. 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. 22. Think about this architecture Profile API Analytics APIContent API Admin App User App
    23. 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. 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. 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. 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. 27. Think again. Profile API Analytics APIContent API Admin App User App
    28. 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. 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
    30. 30. It was a mess $#^*!
    31. 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. 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. 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. 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
    35. 35. 3 step solution
    36. 36. Step 1Serialize form with all informationnecessary for reproduction at frontend
    37. 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. 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
    39. 39. Step 1Serialize form with all informationnecessary for reproduction at frontend
    40. 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
    41. 41. As easy as π
    42. 42. A JSON form
    43. 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. 44. 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
    45. 45. 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
    46. 46. 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
    47. 47. 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
    48. 48. 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)
    49. 49. Handlebars Templates Handlebars Widgets
    50. 50. Sample Backbone View Instantiate form model Instantiate form view Initiate rendering by fetching the form definition
    51. 51. 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
    52. 52. 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
    53. 53. 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
    54. 54. 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
    55. 55. 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
    56. 56. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×