Embedded web-application using AngularJs
Web development has changed a lot over the past few years. Actually, it has always been a rollercoaster with ever increasing demands and new frameworks popping up promising to sort out the spaghetti code. While we were heavily investing in server-side rendering using Asp.Net (MVC), nowadays at Narato we include client side frameworks like AngularJs and Aurelia in combination with a descent API. This architecture offers the flexibility to enable new consumers along the way such as mobile apps, other websites,…
A while ago we started a new project to build a front-end application to register some sort of legal applications. At the kickoff our client explained that they were in a transition phase moving to the cloud using Azure. The new application had to be architected for the cloud, no wonder they contacted Narato with their request :-). Another big requirement was to fully integrate with their current corporate website, created with Drupal, while still hosting the application on Azure, of course. They wanted the application to behave fully responsive within a Drupal webpage.
While we were discussing our options, we had to take these constraints into account:
– The application must have as little friction in Drupal as possible.
– The updates to the application must be possible without touching Drupal.
– It must be possible to take the application offline in case of emergency.
This approach might seem a bit different, but it looked like our default architecture was already very compatible with those requirements. We still introduced an API to be future proof and an AngularJs application. The only difference was how the AngularJs application would be hosted. While developing, our separate frontend website would have a page including all the styles and scripts to load the application independently, like we always do.
Solution – Embedding with AngularJs
For the Drupal hosting of the AngularJs application we wanted to have the least friction we could have. So we minimized the integration requirements to 3 steps:
– reference a style bundle
– reference a scripts bundle
– add one html element for bootstrapping the application: <div data-ng-app=”ourApplicationX”></div>
We started our project by introducing Infrastructure as Code by creating an ARM template to provision our API website, front website and sql database. Next, we used Visual Studio Team Services to configure our continuous integration including continuous deployment. For each environment we created an according Drupal page.
Taking a website offline is very easy if you configure a nice replacement page that explains the high level offline cause (planned maintenance, technical issues,…). But wait, we didn’t want to break our embedded application. If we replaced all http requests with an offline message, our AngularJs application would not know how to handle this. Therefore we created a configuration within the AngularJs application, switching from a full blown application to a very small application with only 1 view: the offline view. This way the Drupal page would still have something to embed and will show a nice offline message to the end user.
This approach worked out nicely and only required us to minimize our dependencies. Our knowledge of Azure and Visual Studio Team Services allowed us to jump-start this project in no time and focus on the functional side of the application, giving it the attention it required. So, there you have it: another cool project developed by Narato! If you’re an enthousiastic developer and also want to create cool applications just contact us and we’ll have a chat !
I’m practising my visual facilitator training by drawing my own visuals for this blogpost. Hope you like them so far, be kind 😉