Looks at building interactive application type websites with WordPress, BuddyPress, and Foundation from Zurb.
Presentation for the Newcastle WordPress meet up 5th September 2013
Roger Coathup from 21 Applications / 21 Inspired - Been building with BuddyPress since the early days of the plugin. Build rich sites. Clients in the UK and overseas. Found the sites we build are getting increasingly application like. In this presentation I'll discuss how we are using WordPress and BuddyPress to help us rapidly build those sites, some of the benefits and some of the shortcomings. We're fairly constrained for time, so the talk will be overview, but more than happy to take questions and discuss further.
I’ll be talking about web sites with application functionality, rather than mobile apps.... and what’s in the toolkit that’ll let us build them on WordPress. Mobile apps is also exciting, but that's for another talk. The sort of apps range from familiar SaaS applications - Clearbooks, Basecamp, Beanstalk, Evernote - through community pooling sites -- Like Kickstarter, Vitanna -- to strong user generated content sites like Architype which we helped Immersion Media build. Other application sites include jobs boards, directories, and even dating sites like Match and so on. Ok, so the talk will concentrate on how WordPress and BuddyPress can help us build these types of application site.
So, it’s not the portfolio and brochure sites for companies, nor the news, magazine, blog ones where content is pushed at the user. It’s the sites where users interact heavily with the site -- creating and manipulating information, and typically getting the site to perform some sort of service on it. One typical characteristic of these sites is that they are the business -- they are not marketing -- they are actual application of the business, they are online and they make money. They are highly interactive, users have accounts, they generate content, they pay for the service. Behind the scenes we need to store custom data types (e.g. Modelling projects in Basecamp, notes in Evernote, funding pitches in Kickstarter), keep audit trails and so on. Now, traditionally this wasn’t the realm for WordPress -- it came from blogging, it was adapted to news and magazines, and some nice plugins extended it into e-commerce and so on. However, when we dig beneath the surface, it actually offers us a rich set of tools with which we can rapidly build application type sites...
So, what’s in my toolkit, and what do they give us for application building. Well alongside BP and WP, I'm building the front ends with Foundation, a great responsive framework from Zurb -- it's powerful, it's semantic (we do everything via SASS), and it lets us build front ends very quickly. On the other end we are starting to look at libraries / frameworks such as backbone and angular to add dynamic interactions... Controlling and structuring our JavaScript / Ajax. Interestingly WP are starting to use backbone in wp-admin. BP and WP are the core of our toolkit -- BP is generally known for DIY Facebook and community sites, but actually provides a set of components / APIs that are very useful to us... Providing user profiles and accounts support for our apps, messaging, and an extensible activity stream that we adapt to handling audit trails in our app. WP is providing us with custom types to model data, validation and sanitisation routines to help handle user generated content, a mechanism to let our Ajax routines interact with the server, and URL rewrites. Also, we can throw in support for mashups, payments, subscriptions as elements in the toolkit. Ok, so lets take a look at a few examples..
Englancer is a fully interactive application for outsourcing engineering design -- clients can post projects, manage bids, take projects live, administer payments, and organise their freelancers. Under the hood -- it’s BuddyPress modelling profiles, BP groups for companies, and an enhanced activity stream providing audit trails. Projects and tenders are modelled with WordPress custom post types; there’s heavy action programming, AJAX, and Zurb Foundation for the mobile first responsive front end.
This a simple but effective WordPress based app, and another site that we helped Immersion Media in California build. It runs a series of survey questions past the user, analyses their input, presents the results as graphs and intelligently directs the user to further resources. We're using Formidable Pro to handle the survey forms. [For those not familiar with Formidable Pro, it’s a competitor to Gravity -- it’s not as established, and has a smaller range of extensions, but provides a stronger statistics engine and API]. We then apply a little maths magic, and integrate a JS library to display the graphs. Turnaround time using these technologies was remarkable.
Architype.org is a big user generated content site serving the architecture and design community. Magazine articles and interviews are backed up by a vast library of user generated content about firms, projects, products and connections. Sophisticated forms combine with AJAX to give an immersive experience where users can enter content about design projects, upload images, and cross link to the individuals (designers, architects, project managers, etc) and firms who worked on them. Perhaps not an application in the true sense, but it certainly uses a number of the same underlying WordPress & BuddyPress APIs, and demonstrates how they can be used to create an highly interactive website.
There are pros and cons to building these application type sites on WordPress / BuddyPress. On the downside, they can provide unnecessary overhead when we only want to use limited aspects. The BuddyPress APIs in particular, can be a fight sometimes -- perhaps reflecting that they were implemented to support a very specific front end, rather than being designed to provide access to generic profile, group, activity and messaging functions. On the flip side however, there is a huge set of very useful functions and classes once you learn to navigate them, and deal with the occasional embedded markup. From a client perspective (and our own) -- using the underlying toolset from WP and BP can allow us to build sites quickly and at a lower cost. With Foundation we can rapidly prototype interfaces and take them in to production. From a developer perspective, it’s great because we are using those WP APIs, backend, classes, and programming paradigms that we are familiar with.
I want to conclude with a few thoughts about the future and what I want in my toolkit. Having started the talk by saying it’s not about mobile applications, well actually, I think that’s where we need to be heading. I want WordPress to be providing me with APIs that let me access the my data from a remote application. Using a REST interface to let a mobile application pull and push data for a server that’s hosting my WordPress database. So, I can have a traditional WP website, and separate mobile / tablet apps all working efficiently with the same underlying data. A REST JSON interface has been available for a while on WordPress.com, but given little attention on self hosted sites. There was some work but the Interfaces aren’t mature / complete, and authentication -- users logging in and out -- given scant or zero coverage. It’s possible but you’d have to develop your own Oauth2 handling. However, I read today about a new project [part of the Google summer of code] that aims to introduce a REST interface in to the WordPress core product. Which is great news. Other than that, it will be interesting to see how integration / use of application frameworks with WordPress develops -- as we come to use the APIs in a purer sense, how it will fit not only with the front end AJAX frameworks, but also with server side frameworks.