WordPress is a very powerful blogging platform, but it has its limitations when it comes to using it to build powerful custom applications. Different approaches are available to solve this problem – creating custom applications (PHP, Ruby on Rails) that would be accessible from another url (usually a subdomain) or using an iframe to embed the custom application can be solutions.  Users are then taken to two different applications depending on what they’re trying to achieve. This is not the best user experience and it involves having to maintain the look and feel of two different applications.

This post presents a possible architecture allowing you to embed a custom web application inside WordPress which is transparent to the end user using powerful javascript such as Angular JS in our case.

Technologies and their usage

• WordPress:WordPress is the end user front-facing site and powers static pages, user sessions, SEO, etc etc… Also one template is responsible for loading a small snippet of html and a link to a javascript file from a Ruby on Rails application and serving it back to the end user. This content is cached in Wordpress as it will stay static. By doing this, the Rails application will provide the basic but necessary Angular JS HTML structure as well as the link to the AngularJS script to WordPress. Note that only HTML and Javascript is provided by external resources, all the CSS that will be used by the Angular Js application is served by the WordPress site.

• Ruby on Rails:The RoR (Ruby on Rails) application powers an API to store/retrieve data generated by the Angular JS application to a MongoDB. The application is an OAuth client to sync user sessions between the WordPress and RoR.

• MongoDB:MongoDB is a NoSQL type of database and is used here to remove the need to maintain complex data schema on the server side, allowing Angular JS to generate complex and custom data structures and be sure they’ll be stored.

• Angular JS:The custom application itself, it powers all the custom functionalities, interacts with theAPI (the RoR application) to store and retrieve necessary data.

• Amazon S3:Amazon S3, a CDN, hosts all the static assets: AngularJS templates and Javascript files allowing us to serve static files much faster.

In action

1) WordPress loads a specific template that brings up a small HTML snippet and includes a Javascript file.

2) Included in the JS file, a call to start the Angular JS Application that will then load templates and interact with the server to retrieve user data

3) After templates and data are loaded, the application is now started

User is now seeing content pulled from a ruby on rails server, displayed thanks to template stored on Amazon S3 but is still on the WordPress site.