Creating a crowdsourced contraband reporting web app with a headless Drupal
1 like584 views
The document discusses a crowdsourced reporting web application called mercadoilegal.com, built on a headless Drupal architecture. It highlights challenges and enhancements in user interaction, emphasizing the importance of a decoupled front end for flexibility and speed. Key lessons are shared regarding performance and the complexities of integrating various functionalities, with recommendations for further reading on the project's experiences.
![The workflow of a
decoupled front end is
VERY REFRESHING
[Insert very refreshing image here]](https://image.slidesharecdn.com/drupalcon-pdf-150514214403-lva1-app6892/85/Creating-a-crowdsourced-contraband-reporting-web-app-with-a-headless-Drupal-28-320.jpg)
Creating a crowdsourced contraband reporting web app with a headless Drupal
- 1. Mercadoilegal.com A crowdsourced reporting web app based on a Headless Drupal
- 4. Web Agency
- 7. Context
- 10. The Project
- 11. Challenges
- 12. Customizable sites, different domains Decoupled responsive front end on a different server Drupal as a back end for multiple, multilingual sites Architecture
- 13. Shareable content Easy to use front end Maps Others Easy customizations from the backend
- 14. Very specific interactions Heavily modified back end Surprises
- 17. Inline editing
- 18. Dialog boxes
- 19. “Undo”
- 20. How does the site work?
- 27. Speed #yolo
- 28. The workflow of a decoupled front end is VERY REFRESHING [Insert very refreshing image here]
- 29. When you go mobile first you go speed first.
- 32. Rely on non drupal developers
- 34. Publish anywhere with web services! API
- 35. Having fun on the front end
- 36. Grunt Libsass Yeoman … in a non drupalized way!
- 37. A site that builds itself
- 38. One application to rule them all
- 39. Parameters { "logo": "http://admin.mercadoilegal.com/sites/ default/files/styles/site_logo/public/ logomer.png", "color": "#ed1c24", "language": "es", "country": "Costa Rica", "countryCode": "CR", "shareFacebook": 1 ... }
- 50. Social sharing mini reverse proxy, without cache php
- 51. Lessons learned
- 52. Would preferred to use OpenStreetMap but a lot of research would be needed. Adding content inside the map is not trivial. Crazy AJAX is crazy. Google maps does not support windows touch events, for Internet Explorer on mobile.
- 54. You need heavy front end interaction. You need to have a publishing platform (more apps, more platforms). You want more flexibility with the front end architecture. You should if
- 55. Final thoughts
- 56. The things you’re used to will work only on the backend
- 57. Your front end is still going to have an overhead if it’s complex
- 58. Performance still needs a plan on both ends
- 59. • Further reading: Manatí & Mercado Ilegal: Contraband Reporting on a Decoupled Site https://pantheon.io/resources/manati-mercado-ilegal- decoupled-drupal-case-study
- 60. 15 D R U P A L C A M P C R 29 al 31 de julio Universidad de Costa Rica