The Github repository for this application is publically available here: https://github.com/listingslab/knockout
First we used Red Hat's excellent and free OpenShift PaaS to spin up a publically accessible, working Symfony App in a couple of minutes. OpenShift applications are automatically created as Git repos, meaning we simply clone the repo locally, develop it and then push the master branch to the repo's origin on OpenShift to deploy the live application.
After cloning the repo, we needed to install the Symfony dependencies to get the App running locally. See this link for info on how to use composer. Once we had installed our dependencies, we pointed the root directory of our Apache webserver running PHP 5.6.2 to php/web to complete the setup of our Symfony development environment.
We wanted Symfony to do 2 things.
- To provide a basic API-like data source for our application on the url /api/
- To render our front end Single Page App on the root URL
To this end, we created a new Bundle to handle it; Listingslab/Bundle using the Symfony2 bundle generator (php app/console generate:bundle) There are 3 files to look at.
- routing.yml
Handles routing to give us an API endpoint and a SPA on the root URL - index.html.twig
The template for the Single Page App served from the root URl. - DefaultController.php
PHP code to create a fake API response.
The front end is a combination of third party JavaScript libraries (Knockout, Chart.js, jQuery) and Twitter's Boostrap to provide a simple, quick but responsive & moderen layout. The intention was to create a chart of the data from the API and then update the data with new values every few seconds. Making the chart data Observable Arrays allows knockout to handle the UI update and we decided to extend that to create a table of constantly updating values and averages for the changing data. The resulting app is a very rough working prototype for a real time sensor monitoring frontend.
To facilitate the development of the frontend, we kept all development assets in a folder called 'frontend' and use Gulp to watch for any changes and to copy the files to the right places in the Symfony app. Alongside Gulp we also used Bower to manage our front end dependencies such as Bootstrap & Knockout etc. When developing the fontend, we simply run 'gulp' in the commandline and let the automation take care of itself.
The main.js
Once the SPA was set up, we could finally concentrate on the JavaScript to connect everything up and create the App. On Document Ready, we load the data using $.getJSON( '/api'). When the loading is complete we set up our knockout observables.