Digital transformation of industry leading graphic design application

Challenge

The client’s flagship application was a web based digital designer that enabled students to collaborate and build digital media publications. The core functionality allowed multiple student teams design and contribute content that ultimately would be published and shared with the student body. Unfortunately, the existing system’s underlying technology had become aged, and lacked the necessary capabilities to scale and support new features. A new, modern application was needed to support the business’s growing feature and to eliminate technology deficiencies.

Solutions

Both the current and future state of the application was evaluated to determine the approach to best meet the clients needs. In addition to redesigning the application, several challenges needed to be addressed including browser support, visual displays (monitors, Chromebooks, etc.), multiuser collaboration, and graphical design capabilities. With these challenges in mind, a new application architecture and design was implemented, which achieved the following:

User Interface -
• A completely new, state of the art User Interface was created utilizing modern HTML5 and Angular features. Since the application provided graphic design capabilities, advanced User Interface/User Experience (UI/UX) approaches were used in conjunction with Canvas.js, Fabric.js, Cascading Style Sheets (CSS) frameworks to provide a superior user experience.
• A “reactive” model was implemented within the user interface in order to synchronize updates by multiple users – leveraging the Reactive Extensions for JavaScript (RxJS) framework.

Business Services -
• A new micro-service RESTful architecture was designed to replace the monolithic business logic tier. The microservices were implemented using Java and Spring Boot – managed within AWS via Docker Containers.
• AWS Lambda serverless technology was used to convert native JSON publication data and create preview images and thumbnail images for various graphical presentations within the application.
• Replaced web sockets implementation with Server-Sent Events (SSE) – employing a design which filtered messages down to the publication in-use, leading to a significant performance gain.
• Moved formerly client-based functionality to back-end asynchronous processes. This created a reduction in the time required to handle heavy-processing tasks, which in turn improved user experience.
• Remaining legacy services were modernized to run within the Spring Boot based Docker containers within AWS. Application code was optimized to eliminate memory leaks, functional bugs, and incomplete workarounds.

This application was built leveraging AWS cloud services. Due to the high graphical nature of the site, performance and latency were of primary concern during implementation. AWS CloudFront, along with S3 services, were used to deliver web-based content along with Lambda and Elastic Container Services (ECS) for microservices. The overall solution provided the performance and scalability needed by the client for seasonal peaks in usage.

Results & Additional Info

• “State of the Art” graphical design and publishing capabilities. Entirely web-based, supporting thousands of concurrent users.
• Completely modern application that meets the needs of the customer.
• Notable performance improvements throughout the application.
• Accelerated ability to release features due to the microservice architecture.
• Well defined and simplified technology footprint allowing for improved supportability.
• Operational improvements including scalability, reliability, reduction in infrastructure (70%), improved provision cycle times (48 hours to 1 hour).

Continuous Integration/Continuous Delivery (CI/CD) practices were introduced to incorporate unit and integration test coverage. This improved code quality and reduced delivery cycle times by approximately 20%. As a result of a successful release, we have been engaged in multiple follow-up phases to continue to provide value added features.