Building Web Apps with WordPress


Let’s start by defining what a web app is and how it differs from a website or a web service.

In reality, this book will help you build anything with WordPress: websites, themes, plugins, web services, and web apps. We chose to focus on web apps because they can be seen as super websites that make use of all of the techniques we’ll cover.

There are many people who believe that WordPress isn’t powerful enough or meant for building web apps, and we’ll get into that more later. We’ve been building web apps with WordPress for many years and know that it absolutely is possible to build scalable applications using WordPress.

In this chapter, we’ll cover why WordPress is a great framework for building web apps. We’ll also cover some situations where using WordPress wouldn’t be the best way to build your web app.

What Is a Website?
You know what a website is. A website is a set of one or more web pages, containing information, accessed via a web browser.

What Is an App?
We like the Wikipedia definition: “Application software, also known as an application or an app, is computer software designed to help the user to perform specific tasks.”

What Is a Web App?
A web app is just an app run through a web browser.

Please note that with some web apps, the browser technology is hidden, for example, when integrating your web app into a native Android or iOS app, running a website as an application in Google Chrome, or running an app using Adobe AIR. However, on the inside of these applications is still a system parsing HTML, CSS, and JavaScript.

You can also think of a web app as a website, plus more application-like stuff.

There is no exact line where a website becomes a web app. It’s one of those things where you know it when you see it.

What we can do is explain some of the features of a web app, give you some examples, and then try to come up with a shorthand definition so you know generally what we are talking about as we use the term throughout the book.

You will see references to SchoolPress while reading this book. SchoolPress is a web application we are building to help schools and educators manage their students and curricula. All of the code examples are geared toward functionality that may exist in SchoolPress. We will talk more about the overall concept of SchoolPress later in this chapter.

Features of a Web App
The following are some features generally associated with web apps and applications in general. The more of these features present in a website, the more appropriate it is to upgrade its label to a web app.[1]

Interactive elements
A typical website experience involves navigating through page loads, scrolling, and clicking hyperlinks. Web apps can have links and scrolling as well, but will tend to use other methods of navigating through the app.

Websites with forms offer transactional experiences. An example would be a contact form on a website or an application form on the careers page of a company website. Forms allow users to interact with a site using something more than a click.

Web apps will have even more interactive UI elements. Examples include toolbars, drag and drop elements, rich text editors, and sliders.

Tasks rather than content
Remember, web apps are “designed to help the user to perform specific tasks.” Google Maps users get driving directions. Gmail users write emails. Trello users manage lists. SchoolPress users comment on class discussions.

Some apps are still content focused. A typical session with a Facebook or Twitter app involves about 90% reading. However, the apps themselves present a way of browsing content different from the typical web browsing experience.

Logins and accounts allow a web app to save information about its users. This information is used to facilitate the main tasks of the app and enable a persistent experience. When logged in, SchoolPress users can see which discussions are unread. They also have a username that identifies their activity within the app.

Web apps can also have tiers of users. SchoolPress will have admins controlling the inner workings of the app, teachers setting up classes, and students participating in class discussions.

Device capabilities
Web apps running on your phone can access your camera, your address book, internal storage, and GPS location information. Web apps running on the desktop may access a webcam or a local hard drive. The same web app may respond differently depending on the device accessing it. Web apps will adjust to different screen sizes, resolutions, and capabilities.

Work offline
Whenever possible, it’s a good idea to make your web apps work offline. Sure, the interactivity of the Internet is what defines that “web” part of web app, but a site that doesn’t stop working when someone drives through a tunnel will feel more like an app.

Emails can be drafted offline in Gmail. Evernote will allow you to create and edit notes offline and sync them to the Internet when connectivity comes back.

Web apps can tie one or more web apps together. A web app can utilize various web services and APIs to push and pull data. You could have a web app that pulls location-based information like longitude and latitude from Twitter and Foursquare and posts it to a Google Map.
Why Use WordPress?
No single programming language or software tool will be right for every job. We’ll cover why you may not want to use WordPress in a bit, but for now, let’s go over some situations where using WordPress to build your web app would be a good choice.

You Are Already Using WordPress
If you are already using WordPress for your main site, you might just be a quick plugin away from adding the functionality you need. WordPress has great plugins for ecommerce (Jigoshop), forums (bbPress), membership sites (Paid Memberships Pro), social networking functionality (BuddyPress), and gamification (BadgeOS).

Building your app into your existing WordPress site will save you time and make things easier on your users. So if your application is fairly straightforward, you can create a custom plugin on your WordPress site to program the functionality of your web app.

If you are happy with WordPress for your existing site, don’t be confused if people say that you need to upgrade to something else to add certain functionality to your site. It’s probably not true. You don’t have to throw out all of the work you’ve done on WordPress already, and all of the following are great reasons to stick with WordPress.


Posted in