Rapid Prototyping and Drupal

Feargal O'Kane

bt48.com

feargal@bt48.com

BT48 & Drupal

• Used it on the first project we worked on together

• Primary development platform 6 years later

• Sponsor camps

• Involved in Drupal Belfast meetups

Why use Drupal?

• Drupal is powerful
• Drupal has:
  • Views
  • Taxonomy
  • Rules
  • References
• Drupal is free
• Drupal is great at rapid prototyping web and mobile apps for us

Why we need prototyping 

• We can't be inefficient
• Prototyping suits our workflow
• We didn't always prototype and it caused us problems

What does it actually mean

• Detailed discovery phase
• Interactive, clickable wireframes
• Working web app or mobile app after two weeks of development for user feedback
• Standard Agile approach

Our prototyping tools

• Patternlab - atomic design framework for interactive wireframes
• Drupal - easy input and export of data as well as building web apps
• Ionic - easy build of hybrid mobile applications

Our prototyping tools

• Patternlab - atomic design framework for interactive wireframes
• Drupal - easy input and export of data as well as building web apps
• Ionic - easy build of hybrid mobile applications

Why Drupal?

• Drupal is a key part of our prototyping toolkit
• We know it well
• It gets us what we need quickly
• We don't just build Drupal web apps we build Node apps, Angular apps, WordPress sites, Bootstrap sites
• If we are prototyping with data then we use Drupal

What I'll cover today

• Drupal as a prototyping tool to get feedback on a web app
• Short look at Ionic as a framework and as a platform for hybrid apps
• Drupal as a tool to deliver content for an Ionic Hybrid App

Prototyping a web app

Reasons we didn't do it when we started:

1. Setting up the same environment on all our machines was a hassle
2. It would waste time on a project
3. Clients wanted to see the 'finished' site
4. It wouldn't look like the photoshop comp

Prototyping a web site

What's changed:

1. Developer friendly environments are freely available
2. We were having the discussions and debates with clients at the end of the project rather than the beginning
3. We spend more time educating our clients on the process
4. Responsive design killed design comps

Prototyping a web site

Case Study: Dementia Review Site

1. Lengthy text document to be translated into a searchable online resource
2. Range of content types
3. Range of ways to search for content
   1. Author
   2. Publisher
   3. Theme

Wireframes & Style tiles

Why Drupal?

• There was a lot of content
• We needed to give user access to change the content
• Views could handle display and searching of content
• Taxonomy could handle categorisation of content
• Possibility of using SOLR to increase search performance
• Prototyping would prove the issues before production

Live Demo

• Content added
  
• Search functionality test
  
• Issues raised by the prototype:
  • Number of authors on book could be an issue
  • SOLR and Facet API integration testing
    • How users will actually search for content

Key points

• Three days to build functioning prototype for testing in total
  • Half a day to create content types and taxonomies
  • Half a day to configure SOLR
  • Half a day to add basic theme
  • Day and a half to add content
• Now in a position to get real feedback, from real users, about real functionality and the real design

What I'll cover today

• Drupal as a prototyping tool to get feedback on a web app
• Short look at Ionic as a framework and as a platform for hybrid apps
• Drupal as a tool to deliver content for an Ionic Hybrid App

App development

Adventures with App development go back over four years:

1. Appcelerator
2. PhoneGap
3. Native Android
4. Native iOS
5. jQuery Mobile
6. Hand-rolled Node/Angular/Cordova applications

Ionic

Now settled on the Ionic platform for our app development as:

One hub for building & scaling incredible apps. Build apps for all major platforms with the Ionic SDK. 

From frontend to backend, Ionic has it all.

Ionic

More than code. Ionic is an ecosystem.

You'll find a suite of mobile development tools and resources at your disposal that make 
Ionic the complete mobile dev package.

 

It's the best way to build apps. Period.

Ionic

Ionic gives us a single place to:

1. Create hybrid apps using CSS, JS and HTML5
2. Package them for deployment - locally and through app stores
3. Get analytics on the published apps
4. Update the apps without doing an app store resubmission
5. Push notifications

Ionic

We really chose Ionic because:

1. Cordova based so access to device capabilities
2. Based on Angular
3. Solid UI out of the box
4. Simple to setup for testing on any development environment
5. Good community support
6. Free and Ionicons

Ionic UI

Easy to setup a basic prototype app using the style library that Ionic comes with. 

http://ionicframework.com/docs/components/#header

And there are a range of plugins and marketplace options available as well

What I'll cover today

• Drupal as a prototyping tool to get feedback on a web app
• Short look at Ionic as a framework and as a platform for hybrid apps
• Drupal as a tool to deliver content for an Ionic Hybrid App

Drupal & Ionic

• Full integration with Drupal and Ionic - https://github.com/kevinblanco/drupal-ionic
  • Uses Services
  • Really useful for full applications
• For prototyping we don't need login/logout for most of our clients
• Usually just want to display information from Drupal install in an app

Our approach

• Keep it simple
• Views to handle the output of data for the app
• Views Datasource to export as JSON
• Use JSON to populate the app
• Custom libraries for managing JSON
• Basic Ionic framework to get feedback on devices

PORTICO App

• Site and App for a new cultural centre
• Drupal as single point for entering content
  • Taxonomy to handle relationships
  • Media to handle imagery and multiple image sizes
  • Familiar with the interface so less training required
  • Views Datasource to output JSON

PORTICO App

• JSON and files are bundled with the app for the prototype
• This app is only available on specific devices under PORTICO's control
• No check for web updates

Live Demo

• Backend functionality
  • Views
  • Views Datasource
• Front end
  • Header
  • Ionic menu
  • Ionic lists

Benefits of Ionic

• Quicker to get to device in hand testing
• Solid UI framework to build from but flexible to allow custom designs
• Based on Angular so lots of directives available
• Based on Cordova so easy to get access to the device's capabilities
• Can be easily shared using Ionic platform

Drawbacks of Ionic

• It's not native
• It's based on Angular

Our lessons

• It's not a magic bullet - but it does help massively with getting client feedback on an app
• Even if you're not sure about the final product getting feedback on the hybrid version can help - especially if you're not a native app developer
• Using Drupal to handle the content for the app allows rapid iterations of content
• If you want more functionality then Services/RestWS in D7 and core in D8 make this relatively straightforward
• You have to test on devices

Final points

• Nothing here that you couldn't do with other systems
• Drupal's flexibility and the combination of Views/Taxonomy/References in particular make it easier to model content quickly
• Drupal handles content really well
• Drupal deals with all the user login stuff so you don't have to

What I'll cover today

• Drupal as a prototyping tool to get feedback on a web app
• Short look at Ionic as a framework and as a platform for hybrid apps
• Drupal as a tool to deliver content for an Ionic Hybrid App

Feargal O'Kane

bt48.com

feargal@bt48.com