creating a crowdsourced contraband reporting web app with a headless drupal
TRANSCRIPT
Mercadoilegal.com
A crowdsourced reporting web app based on a Headless Drupal
Web Agency
Context
Case Study Video
https://www.youtube.com/watch?v=UJjD6F8ss6g
The Project
Challenges
Customizable sites, different domains
Decoupled responsive front end on a different server
Drupal as a back end for multiple, multilingual sites
Architecture
Shareable content
Easy to use front end
Maps
Others
Easy customizations from the backend
Very specific interactions
Heavily modified back end
Surprises
Backend customization
Inline editing
Dialog boxes
“Undo”
How does the site work?
Expansion to Latin America
Headless technology
appreciations
Speed#yolo
The workflow of a decoupled front end is VERY REFRESHING
[Insert very refreshing image here]
When you go mobile first you go speed first.
Data download:
642 KB
Team members flexibility
Rely on non drupal developers
Distribution platform
Publish anywhere with web services!
API
Having fun on the front end
Grunt
Libsass
Yeoman
… in a non drupalized way!
A site that builds itself
One application to rule them all
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...
}
Enhancements on user interaction
ng-animate
(https://docs.angularjs.org/guide/animations)
angular-google-maps
(http://angular-ui.github.io/angular-google-maps/)
angucomplete-alt
(https://github.com/ghiden/angucomplete-alt)
angular-translate
(https://github.com/angular-translate/angular-translate)
Social sharing
mini reverse proxy, without cache
php
Lessons learned
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.
Should you go headless?
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
Final thoughts
The things you’re used to will work only on the backend
Your front end is still going to have an overhead if it’s
complex
Performance still needs a plan on both ends
• Further reading:Manatí & Mercado Ilegal: Contraband Reporting on a Decoupled Sitehttps://pantheon.io/resources/manati-mercado-ilegal-decoupled-drupal-case-study
15
DR
U P A L C A M P CR
29 al 31 de julioUniversidad de Costa Rica
¡Gracias!
@betovarg @cienvaras www.estudiomanati.com
Feedback: www.bit.ly/manatidrupalconla