Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Philly Tech Week 2016: Decoupled Development: Feeding Your Application with Off-the-Shelf Tools

Philly Tech Week 2016: Decoupled Development: Feeding Your Application with Off-the-Shelf Tools

dirtystylus

May 04, 2016
Tweet

More Decks by dirtystylus

Other Decks in Technology

Transcript

  1. Decoupled Development: Feeding Your
    Application with Off-the-Shelf Tools
    Philly Tech Week 2016

    View Slide

  2. Mark Llobrera (@dirtystylus)
    Technology Director, Bluecadet

    View Slide

  3. Outline
    ● Decoupled Development Intro
    ● Fully Decoupled Examples
    ● Hybrid Examples
    ● Recipes
    ● Suggestions

    View Slide

  4. Introduction to Decoupled Development
    © Elvis Kennedy (https://www.flickr.com/photos/39734516@N00/6784130978)

    View Slide

  5. Introduction to Decoupled Development

    View Slide

  6. Just what are we
    talking about here?

    View Slide

  7. Static Generator

    View Slide

  8. CMS on CMS

    View Slide

  9. Single Page App

    View Slide

  10. Native Mobile App

    View Slide

  11. Hybrid

    View Slide

  12. Story Time

    View Slide

  13. Native American Voices

    View Slide

  14. Native American Voices
    ● 15-foot touch towers
    ● 12 kiosk touchscreens matching artifact cases
    ● 300+ artifacts, images, videos
    ● Static XML + media assets

    View Slide

  15. Editing XML by hand
    http://littlepawz.tumblr.com/post/113859078234/lifes-oh-sht-moment-44

    View Slide

  16. Pain = Signal

    View Slide

  17. Connecting the dots
    ● Web stuff over here, lots of CMS/website builds
    ● Applications over there (iOS, Android, Cinder, JS)

    View Slide

  18. Baby Steps
    © Kristina Alexanderson (https://www.flickr.com/photos/45940879@N04/6218038832)

    View Slide

  19. James Ensor

    View Slide

  20. James Ensor
    ● Interactive kiosks to explore The Temptation of
    Saint Anthony by James Ensor
    ● Smaller scope than NAV on the content side,
    opportunity to prototype

    View Slide

  21. James Ensor
    ● WordPress + JSON API (https://wordpress.
    org/plugins/json-api/),
    ● Cinder (C++) for touchscreen application
    ● JSON, not XML
    ● Preprocessor, not “live”—static output bundled
    with application

    View Slide

  22. Field Museum: Digital Orientation Stations

    View Slide

  23. Field Museum: Digital Orientation Stations
    ● Digital Orientation Screens for finding out
    information on Exhibits, Events, Amenities
    ● Twelve 55" screens throughout the Museum
    ● Client team was familiar with Drupal, so we
    looked into what we could do with Drupal
    ● Screens needed to download content locally

    View Slide

  24. Field Museum: Digital Orientation Stations
    ● Drupal 7, Services module plus Services Views
    ● bash scripts to rsync JSON and images from
    server to local network.
    ● AngularJS
    ● TweenMax (http://greensock.com/tweenmax)

    View Slide

  25. Slavery at Monticello

    View Slide

  26. ● Android/iOS app to tell stories of the slaves who
    worked on Mulberry Row
    ● Bluetooth LE beacons for location-awareness
    ● Audio as storytelling tool
    Slavery at Monticello

    View Slide

  27. ● WordPress + JSON API
    ● Swift (iOS) + Java (Android)
    Slavery at Monticello

    View Slide

  28. Van Gogh’s Bedrooms

    View Slide

  29. ● Physical exhibit, video projection, interactive
    touchscreen application
    Van Gogh’s Bedrooms

    View Slide

  30. ● WordPress + JSON API (originally)
    ● Cinder (C++ http://libcinder.org)
    ● Drupal 7, Services module, custom modules
    (refactor)
    Van Gogh’s Bedrooms

    View Slide

  31. ● Decoupled architecture means you can swap out
    your CMS
    Van Gogh’s Bedrooms

    View Slide

  32. Pause.

    View Slide

  33. Association for Public Art
    http://www.associationforpublicart.org

    View Slide

  34. ● Promote, preserve public art throughout
    Philadelphia
    ● “Museum Without Walls”
    Association for Public Art

    View Slide

  35. ● WordPress + JSON API
    ● RiotJS (http://riotjs.com)
    ● Hybrid—using RiotJS as a component
    Association for Public Art

    View Slide

  36. BRIC
    http://www.bricartsmedia.org

    View Slide

  37. ● Community arts organization in Brooklyn
    ● Classes, events, Celebrate Brooklyn
    ● Calendar was a big challenge
    BRIC

    View Slide

  38. ● Drupal 7 + custom module
    ● Menu hook for calendar JSON output
    ● React renders calendar
    ● List, enhanced to monthly view
    ● Blog prototype
    BRIC

    View Slide

  39. Recipes

    View Slide

  40. ● WP-API Plugin
    ● Advanced Custom Fields Plugin
    ● ACF to WP-API Plugin
    ● Better REST API Featured Images Plugin
    WordPress

    View Slide

  41. ● Drupal 7
    ● Services Module
    ● Services Views (simple output)
    ● Custom module for API endpoints (sometimes)
    ● This is all available in Drupal 8 core!
    Drupal

    View Slide

  42. ● Touch, multi-screen: Cinder
    ● Touch, single-screen: AngularJS
    ● Web hybrids: AngularJS, RiotJS, React
    ● Prototypes: Unity, AngularJS, React
    Front-end

    View Slide

  43. Suggestions

    View Slide

  44. Solve Your Problem
    https://twitter.com/tomdale/status/717330678505947136

    View Slide

  45. ● Boredom vs Value
    ● Giant Steps vs Incremental Progress
    ● Don’t go looking for trouble
    Solve Your Problem

    View Slide

  46. ● Problems are often upstream from visual design
    and code
    ● Orbital Content (http://alistapart.
    com/article/orbital-content)
    ● Content Everywhere by Sara Wachter-Boettcher
    Invest in Content Strategy

    View Slide

  47. ● Use what you have
    ● Prototype—manage your risk
    ● Prototype != final production build
    ● Familiar tools lower technical debt, ease client
    acceptance
    ● You can probably already do this with your team
    What’s on Hand?

    View Slide

  48. Thank you.

    View Slide

  49. Mark Llobrera (@dirtystylus)
    Technology Director, Bluecadet

    View Slide