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

D74c365206652832a56fd9ba1fb61d99?s=128

dirtystylus

May 04, 2016
Tweet

Transcript

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

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

  3. Outline • Decoupled Development Intro • Fully Decoupled Examples •

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

  5. Introduction to Decoupled Development

  6. Just what are we talking about here?

  7. Static Generator

  8. CMS on CMS

  9. Single Page App

  10. Native Mobile App

  11. Hybrid

  12. Story Time

  13. Native American Voices

  14. Native American Voices • 15-foot touch towers • 12 kiosk

    touchscreens matching artifact cases • 300+ artifacts, images, videos • Static XML + media assets
  15. Editing XML by hand http://littlepawz.tumblr.com/post/113859078234/lifes-oh-sht-moment-44

  16. Pain = Signal

  17. Connecting the dots • Web stuff over here, lots of

    CMS/website builds • Applications over there (iOS, Android, Cinder, JS)
  18. Baby Steps © Kristina Alexanderson (https://www.flickr.com/photos/45940879@N04/6218038832)

  19. James Ensor

  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
  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
  22. Field Museum: Digital Orientation Stations

  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
  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)
  25. Slavery at Monticello

  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
  27. • WordPress + JSON API • Swift (iOS) + Java

    (Android) Slavery at Monticello
  28. Van Gogh’s Bedrooms

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

    Bedrooms
  30. • WordPress + JSON API (originally) • Cinder (C++ http://libcinder.org)

    • Drupal 7, Services module, custom modules (refactor) Van Gogh’s Bedrooms
  31. • Decoupled architecture means you can swap out your CMS

    Van Gogh’s Bedrooms
  32. Pause.

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

  34. • Promote, preserve public art throughout Philadelphia • “Museum Without

    Walls” Association for Public Art
  35. • WordPress + JSON API • RiotJS (http://riotjs.com) • Hybrid—using

    RiotJS as a component Association for Public Art
  36. BRIC http://www.bricartsmedia.org

  37. • Community arts organization in Brooklyn • Classes, events, Celebrate

    Brooklyn • Calendar was a big challenge BRIC
  38. • Drupal 7 + custom module • Menu hook for

    calendar JSON output • React renders calendar • List, enhanced to monthly view • Blog prototype BRIC
  39. Recipes

  40. • WP-API Plugin • Advanced Custom Fields Plugin • ACF

    to WP-API Plugin • Better REST API Featured Images Plugin WordPress
  41. • Drupal 7 • Services Module • Services Views (simple

    output) • Custom module for API endpoints (sometimes) • This is all available in Drupal 8 core! Drupal
  42. • Touch, multi-screen: Cinder • Touch, single-screen: AngularJS • Web

    hybrids: AngularJS, RiotJS, React • Prototypes: Unity, AngularJS, React Front-end
  43. Suggestions

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

  45. • Boredom vs Value • Giant Steps vs Incremental Progress

    • Don’t go looking for trouble Solve Your Problem
  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
  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?
  48. Thank you.

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