The document discusses using the Strategy Design Pattern to create a modular maps system for CNN Travel that allows switching between different map APIs. It presents the Mapstraction library as an existing approach but notes issues. The Strategy pattern is applied to create a custom Drupal module that isolates map logic from specific APIs (Google, HERE, Mapbox), enabling flexible switching. The system provides map widgets and services info for partner sites via a common interface regardless of the underlying API in use.
How to Troubleshoot Apps for the Modern Connected Worker
Switchable Map APIs with Drupal
1. Engr. Ranel O. Padon
ranel.padon@gmail.com | https://github.com/ranelpadon
Switchable Map APIs with Drupal
2. About Me
• Software Engineer at Kite Systems (Hong Kong-based company)
– full-time Drupal developer for CNN Travel (our client)
• part-time Python lecturer in University of the Philippines
• involved with programming for 9 years (Python, Java, etc)
• involved in Drupal for the last 4 years
• projects: http://github.com/ranelpadon
• plays competitive football/futsal
3. Topics
• Background
– Use Case
– Mapstraction JS Library and Drupal Module
– Design Patterns
• Strategy Design Pattern
• CNN Travel Maps System
– APIs: Google Maps, HERE Maps, MapBox
– Map Widget
– Service Info
4. Background
• we want to inject maps and custom texts in our
node pages (via CKEditor)
and term pages (via Drupal blocks)
• we will need to have a modular/flexible architecture
for integrating maps since our partners will vary
from time to time.
10. Mapstraction
• “Mapstraction is a Javascript library that provides a
single, common interface for a wide variety of
Javascript map APIs.”
• “It’s designed to enable a developer to switch from
one maps API to another as smoothly and as quickly
as possible.”
11. Mapstraction
• codebase is huge/heavy and complex
• outdated or not well-maintained
• we decided to create a custom library/module
for our needs
13. Design Patterns
• “I’ve been struck by one of the underlying principles
that leads to better designs: remove duplication.
So, avoiding repetition is a simple principle
that leads to good design.”
– Martin Fowler
– http://martinfowler.com/ieeeSoftware/repetition.pdf
14. Design Patterns
• “Identify what is common and what varies,
find a way to isolate the common stuff from the
variations, then remove the redundancy in the
common stuff.”
15. Design Patterns
• Software design patterns are proven/reusable
solutions for usual programming problems
• “.. are formalized best practices that the programmer
can use to solve common problems when designing
an application or system.”
• “.. can speed up the development process
by providing tested, proven development paradigms.”
16. Design Patterns
• they are language-agnostic (Java, PHP, Python, …)
• usually in the context of OOP
(Object-Oriented Programming)
21. Strategy Design Pattern
• We used the Strategy Design Pattern before using
PHP in our advertisement blocks rendering.
• Advertisement content changes dynamically
depending on its region info/context in the page.
• This design pattern is used in some parts of jQuery
core components and in the Controller components/
mechanisms of MVC JavaScript frameworks like
AngularJS.
22. Strategy Design Pattern
• enables an algorithm's behavior to be selected at
runtime:
– defines a family of algorithms,
– encapsulates each algorithm, and
– makes the algorithms interchangeable within that family.
25. Strategy Design Pattern
• test the performance of different sorting algorithms
to an array of numbers: shell sort, heap sort, bubble
sort, quicksort, etc.
• Strategy pattern allows the test program to loop
through all algorithms, simply by changing them at
runtime and test each of these against the array.
• All method signatures must be the same so that they
can vary without the client program knowing about
it.
26. Strategy Design Pattern
• product order that needs to be shipped from a
warehouse to a customer.
• Shipping is the Context and the 3 shipping companies
UPS, USPS, and Fedex are the Strategies.
27. Strategy Design Pattern
• The map code logic will not not be tightly coupled to
the TripAdvisor/Booking.com data for better
modularity.
• We could easily switch between HERE Maps API and
Google Maps API and other APIs.
• We could add/remove Map APIs as needed with
minimal code adjustments.
28. Strategy Design Pattern
• Likewise, the same Strategy Design Pattern could be
applied when we expand later our data/content
partners/providers (TripAdvisor, Booking.com, etc).
55. Recommendation
• One of the best resources about Design Patterns:
• https://sourcemaking.com/design_patterns
• https://sourcemaking.com/design-patterns-book
56. Special Thanks
• CNN Travel (http://travel.cnn.com) for the
ideas and inspiration for this presentation.