Switchable Map APIs with Drupal

Engr. Ranel O. Padon

ranel.padon@gmail.com | https://github.com/ranelpadon

Switchable Map APIs with Drupal

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

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

Background

•  we want to inject maps and custom texts in ournode 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.

Mapstraction JS Library

Mapstraction JS Library

Mapstraction JS Library

Mapstraction Drupal Module

Mapstraction Drupal Module

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.”

Mapstraction

•  codebase is huge/heavy and complex

•  outdated or not well-maintained

•  we decided to create a custom library/module for our needs

Design Patterns

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

Design Patterns

•  “Identify what is common and what varies, find a way to isolate the common stuff from thevariations, then remove the redundancy in the

common stuff.”

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.”

Design Patterns

•  they are language-agnostic (Java, PHP, Python, …)

•  usually in the context of OOP

(Object-Oriented Programming)

Design Patterns

Design Patterns

Design Patterns

Design Patterns

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.

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.

Strategy Design Pattern

Strategy Design Pattern

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.

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.

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.

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).

Typical Use Case/Construct

Strategy Design Pattern

better, extendable solution

Strategy Design Pattern

OOP solution

Strategy Design Pattern

Strategy Design Pattern

Strategy Design Pattern

CNN Travel Maps System

CNN Travel Maps | Markup

CNN Travel Maps | HERE Maps

CNN Travel Maps | GMaps

CNN Travel Maps | Mapbox

CNN Travel Maps | Service Info

CNN Travel Maps | Service Info

CNN Travel Maps | Service Info

Partner Hotel

CNN Travel Maps | Service Info

Partner Hotel

CNN Travel Maps | Service Info

TripAdvisor Reviews

CNN Travel Maps | Service Info

TripAdvisor Photos

CNN Travel Maps JS

CNN Travel Maps | Form API

CNN Travel Maps System

CNN Travel Maps System

CNN Travel Maps System

CNN Travel Maps System

Recommendation

•  One of the best resources about Design Patterns:•  https://sourcemaking.com/design_patterns•  https://sourcemaking.com/design-patterns-book

Special Thanks

•  CNN Travel (http://travel.cnn.com) for the ideas and inspiration for this presentation.