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

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