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