Switchable Map APIs with Drupal
-
Upload
ranel-padon -
Category
Technology
-
view
823 -
download
1
Transcript of Switchable Map APIs with Drupal
Engr. Ranel O. Padon
[email protected] | 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.