Front-end development of a logic resource recording system

Provided services

Client

Telecom Software Development Company.

Product

The system of inventory and management of telephone numbers, IP addresses and international identifiers of mobile subscribers. The application is a single solution for recording equipment, phone numbers and SIM cards; execution of business processes of SIM cards manufacturing, defects assessment and removing from service; creation, cancellation and modification of starting kits parameters.

Business challenges

A customer selling SIM cards through an extensive distributor network across the country needed a unified system to keep track of logic resources and automate business processes for their preparation. JazzTeam specialists were involved in the development and testing of the system’s UI part. The process and technology challenge for our company was presented by the following factors: working in a distributed team, during which it was necessary to establish constant communication with the customer’s engineers (implementation of the system back-end part was performed in parallel with the UI development). The task had to be accomplished jointly within a tight timeframe, under strict technological requirements (including a quick learning of a wide stack of JavaScript tools) and the need to achieve a high level of code coverage by automated Unit tests.

Diagram of the CI/CD process used in the development of the project

Project features

Within the project, JazzTeam specialists became a part of an international distributed team. We were responsible for the development of the system’s frontend part (Angular component of the project), its manual and automated Unit-testing. Our team also had to integrate the application with the customer’s centralized business process management system, namely, to combine the UI of the developed system with the UI part of the completed application.

Develop the front-end part of the logic resource recording system from scratch and ensure its stable operation

Tight deadlines

Distributed team

Stack defined by the customer

High requirements for code coverage by Unit tests (85%)

1

Prompt development of the system's Ul part Using a proprietary UI component library Using a proprietary UI component library Using components (libraries, modules) already developed by the team
2

Automated Unit testing of JS code Application of the Karma code test coverage calculation utility Running autotests in the Jasmine testing environment
3

Scrum/Agile process organization Daily Scrum meetings (standups), regular demos and retrospectives for synchronization and effective communication of the distributed team
4

Engineering approach to development while combining the UI parts of two applications Refactoring the application code to develop the overall AnglarJS project structure Bringing the application code base to a common style
5

Manual testing of the application Load and functional testing of the application Developing and submitting test-case scenarios for automated Ul tests to the customer’s team

The project was completed on time with a distributed team, short iterations, and a tight time schedule
A big number of visual application interfaces were prepared
The UI part of the developed application was successfully combined with the customer's system interface
Improvements to increase the scope of some UI components were suggested
Automated unit testing best practices were retained and handed over to the customer

Front-end development of a logic resource recording system

Technological features

Development of the system’s UI part from scratch using the customer’s selected and approved technologies (JavaScript, AngularJS, RequireJS):

During the development, the requirements for the system’s UI part were constantly changing, as well as the back-end services specifications.
The project’s UI should have had a modular structure to ensure asynchronous communication with the back-end: for example, dynamic loading of new data into tables.

The JazzTeam specialists had to constantly be in sync with the customer’s back-end development team. To accelerate the work and ensure the independence of the teams, server-side emulators were constantly used on the front-end development side:

The customer’s requirements included a high (85%) percentage of Unit-test coverage of JavaScript code written by our engineers.

Creation of an interactive system interface using the SPA (single page application) approach. Data routing, loading and rendering should be performed within a single page.
After the UI part of the application is created, it should be integrated with the UI part of the customer’s centralized business process management system allowing to generate and track the execution of SIM cards manufacturing, defect assessing, decommissioning and other tasks.

Approaches and solutions

Prompt development of the system’s UI part based on the components already developed by the customer’s team. JazzTeam specialists used the components (libraries, modules, etc.) already developed by the customer’s team, which allowed to quickly learn the necessary stack and get the first results. Creating the application interface and business logic, our team was guided by the customer’s requirements: the web page system logic was developed in JavaScript using AngularJS framework based on the form layout (HTML/CSS) and the components library used for AngularJS. Using a proprietary UI components library and availability of documentation on their implementation greatly simplified and accelerated the application development process. All this allowed our specialists to quickly engage in the project and show good results: at some stages, the front-end team was ahead of the back-end team.
Automated Unit testing of JS code. The initial goal set by the customer was to achieve 70-75% code coverage by Unit tests in order to ensure the stable operation of the application’s UI part. To track the process of achieving this goal, our engineers used the Karma test coverage calculation utility, which allowed to constantly monitor the percentage of code coverage by Unit tests. The Jasmine testing environment was deployed to run autotests. As a result of the approach applied, the code coverage by Unit tests was more than 75%.
Scrum/Agile process organization. Due to frequently changing requirements, our manager initiated daily Scrum meetings (stand-ups). Every 2 weeks we were arranged demonstrations of new functionality, helping to establish a common understanding of the project’s current status among all team members. Also, we adopted regular sprint planning and retrospectives to discuss critical issues related to improving the development process. All of this contributed to the synchronization and effective communication among the distributed team, that allowed to achieve fairly rapid progress and mutual understanding among all project participants.
Engineering approach to development. To combine the application’s UI part created by our team with the UI part of the customer’s centralized business process management system, we performed refactoring, during which the overall AngularJS project structure was developed. In addition, the code base of the applications was aligned to a common style. In this task JazzTeam engineers applied their extensive experience and knowledge in legacy code re-engineering.
Application manual testing with careful preservation of scenarios and their reuse during autotests creation. Load testing was performed by generating numbers for SIM cards from different regions to a single server. We also performed functional testing of the system. In addition, we developed test case scenarios for writing automated UI tests. Later, these test cases were used by the customer’s automated testing specialists.

Results and achievements

The JazzTeam specialists successfully completed their tasks working in a distributed team in short iterations and a tight time schedule. Our professional management became the basis for organizing the effective development process on this project. Due to the competent approach to project management, the team was constantly in sync and promptly responded to changing requirements. JazzTeam specialists quickly mastered the technology stack defined by the customer at the beginning of work. All this made it possible to implement a complex long-term project with high quality and on time.
JazzTeam specialists prepared lots of visual interfaces for the application. Also, the two applications were successfully merged into a single system. It allowed to automate the entire cycle of business processes for the presale preparation of resources for the shipment of starter kits and exchange SIM cards to dealers, which fully satisfied the end customer’s goals.
The product’s UI part works stable. The team was able to achieve a high rate of code coverage with Unit tests due to good automated testing traditions: excellent knowledge and regular experience in Unit testing is the standard of everyday work of JazzTeam engineers.
Working on the project, JazzTeam specialists used a proactive approach adopted as a rule in the company. Our team suggested several improvements to increase the scope of some UI components, which were approved and implemented after discussion with the customer’s team. The automated Unit testing best practices were transferred to the customer and retained for use within our company: based on the results of the product stabilization work, we created a Software Development, which is used for training and immersion of new specialists in a project.