django Forms in a Web API World
Download as PPTX, PDF17 likes17,346 views
The document discusses the challenges of using Django forms in an API-centric world, highlighting the disconnect between frontend user interfaces and backend form data. It outlines a three-step solution to integrate Django forms with frontend applications, enabling dynamic form rendering without hardcoding. The proposed approach allows for centralized form definition management, ensuring consistent interfaces across different platforms and applications.
django Forms in a Web API World
- 1. XHR django Forms in an API World http://www.northwesternflipside.com/2011/01/10/2011-where-are-the-flying-cars/
- 2. Lets talk about me Tareque Hossain Lead Software Engineer
- 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
- 6. Fast forward a few years.. You really dig APIs
- 7. Your setup looks like this: Me likey! I give you No $#!7. API
- 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
- 10. Forms on API Clients
- 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/
- 14. Lets take a step back What is a form?
- 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
- 18. In the world of django
- 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
- 30. It was a mess $#^*!
- 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
- 35. 3 step solution
- 36. Step 1 Serialize form with all information necessary for reproduction at frontend
- 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
- 39. Step 1 Serialize form with all information necessary for reproduction at frontend
- 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. As easy as π
- 42. A JSON form
- 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
- 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)
- 50. Handlebars Templates Handlebars Widgets
- 51. Sample Backbone View Instantiate form model Instantiate form view Initiate rendering by fetching the form definition
- 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
- #3: We are a small health care startup and we provide a platform through which users can make better decisions about their healthcare options
- #4: But we are here today to talk about forms, particularly django forms.
- #5: I’ll discuss the following things..
- #6: Remember the times when the only form on your site was a comments page?
- #8: Here we see He-Man riding warrior pony serving API using django and says I give you API! And all the consumers love it
- #9: But the problem of reproducing forms on the frontend is much more than not being able to render it via django template
- #11: 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!
- #12: So let’s get back to the issue of form rendering
- #19: 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
- #20: LOVE django forms
- #21: ModelForms and Widgets are two great aspect of django, one promotes DRY and the other provides separation of logic
- #22: And much more
- #23: 3 independent django projects and 2 independent webapps
- #24: And much more
- #25: And much more
- #26: And much more
- #27: And much more
- #29: And much more
- #30: More hardcoding to accommodate different versions of the same form
- #31: More hardcoding to accommodate different versions of the same form
- #35: More hardcoding to accommodate different versions of the same form
- #39: Let’s go over each of the steps in detail..
- #40: And our solution…
- #43: 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
- #44: Lets take a look at what a view capable of providing such API functionalities look like. I promise it’s not too complex.
- #46: Finally step 3
- #47: So we went ahead and implemented a solution for the web applications
- #49: 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
- #50: Lets take a look at the handelbars part of this solution
- #51: As you can see, we are using little snippets of Handlebars for different form fields. Similar to form widgets.
- #53: More hardcoding to accommodate different versions of the same form
- #58: 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
- #59: 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