Introduction
The art of frontend software development lies in the ability to transform visions and ideas into functioning systems that utilise the most accurate technologies. For one of our medical projects, we had an opportunity to test AngularJS
Here’s a bit about the project story and our impressions.
Our customer was a company from the medical sector, and the project presented a mix of ideas from the medical and HR fields. Our goal was to create a place where people connected with the medical field could check how their salaries (and other benefits) compare in different parts of the world.
In the beginning, we thought that this is not entirely our branch and our speciality, but this couldn’t stop us from creating something new and interesting.
Why we used AngularJS
After analysing the project, it became clear to us that the application will be divided into two main sections – the form, which will be used to collect the data about the respondents, and the report, which should present the collected data accurately. From the very beginning, we knew that the entire report page cannot be generated at once, just after the user visits it, even if that page is the most crucial part for him. Why?
Firstly, it’s all about the performance – in that scenario, the server would have to prepare and send a lot of data about respondents at once, which could be a difficult task for the machine.
Secondly, our client wanted the report page to be visually attractive, so he expected us to put in a lot of animations to attract the user’s attention along with the numbers and presented statistics. AngularJS made it easy for us to meet those expectations.
How it helped?
Angular JS and the application created with this framework is unlike typical SPA applications which we can find all around the web. Initially, the app played the role of a test. We wanted to see whether Angular JS can fit this project if we set the bounds of the app inside one single page, but without the routing and views changing. Is it possible? Now we can surely confirm – yes! For this project, we combined Angular JS and Laravel frameworks, which proved to be a very good match.
The decision was made that a report page for a respondent will be divided into sections and each section will display different information: salary, working hours, emigration level etc. Additionally, the data will be presented in different forms – various charts, maps, and others.
Each section has its own endpoint where it can load data. The data for a specific section loads not when the user enters the page, but when the section appears on the screen – this indicated that the user really needs the info to load. That’s why we created a directive that allowed us to add some lazy-loading to our report page:
appReport.directive('lazyload', ['$window', ‘$document’, ‘chart’, function ($window, $document, chart) {
return {
link: function ($scope, element, attributes) {
var $document = angular.element($document)
windowInnerHeight = $window.innerHeight;
angular.element($window).bind("scroll", _.throttle(function () {
var documentScrollTop = $document.scrollTop(),
elementOffset = parseInt(windowInnerHeight / 8, 10);
$scope.$apply(function() {
if (element.visible(true) && chart.STATE_WAITING === $scope.state
&& (documentScrollTop + windowInnerHeight - elementOffset) >= $reportElement.offset().top) {
$scope.load();
}
});
}, 350));
// ...
}
};
}]);
Each of the sections can be found in one of the four states:
- waiting for the visit,
- loading data,
- loaded data and displaying it,
- loaded data and there is no data to show.
Thanks to this solution, we are able to detect the time to start the animations for specific sections.
When one of the sections appears in the user’s sight, the directive calls the load function of a specific controller. That starts the process of collecting data and sets the state to “loading”. When a response comes back, the state is also changed (it depends on data availability). The change of the state triggers the CSS class change in the current container. Also, we’ve set the “loading” and “no data” states to show the users the proper messages – “please wait while data is loading” or “sorry, but data is not available”.
The report page is not the only place where we used the Angular JS framework. We implemented it also on the admin dashboard page in the form of a statistics module. Filtering by date, changing data limits and presentation modes – all those functionalities turned out to be a piece of cake.
We used CSS code to start animations.
The tricky parts of Angular JS
Like any tool, AngularJS has its positive and negative sides. I don’t want to focus on the solutions we can find in the core, but on the problems that we found out during the frontend software development process.
One would think that Angular JS is very easy to start with, mainly because there are many tutorials to read on the web. However, problems arose when we had to decide which of the standards/methods of creating the applications are correct and generally used.
We’ve also encountered another problem – examples presented on AngularJS’s official documentation are good and quite clear, but those are only short demos. What should come next? How do you cope with problems appearing in more complex cases?
Another issue is that AngularJS has many built-in components that are really worth using, but at the beginning, it might create some confusion. Sometimes we wondered if a particular solution has already been implemented inside the framework or if we should write that on our own. We didn’t want to waste time reinventing the wheel.
There is also an entire dictionary that you need to learn if you want to build a quite fast application with AngularJS. You have the $scope (which has a fairly long definition by itself), directives, services, providers, factories, data binding, filters, expressions and many, many more.
Nevertheless, working with AngularJS seems to be quite… natural. You become familiar with the concept quickly, and the use of the framework components makes you feel like you are building with toy blocks. The framework elements fit one another, they communicate easily and interact to create a single unit.
In addition to creating your own modules, there are many more available options to download, for example, by using a bower repository. We’ve also taken advantage of this solution – we’ve used a module for the Google Charts library and successfully injected it into our app.
What’s next?
We found Angular JS as a very useful frontend software development framework for other projects – we have a couple of such works under our belt. We love how powerful this framework is and how much potential it carries. There are many, and because each project is quite different and requires a new approach and solutions, there will certainly be a chance for us to explore Angular JS functionalities and to develop them.
