Bentley CEM Portal, a Multi-lingual Single-Page Application built using Angular 2 used by dealers across the globe

An application I worked on at Mosaique Creative & Marketing where I developed the front-end with HTML5 and SCSS using BEM (block, element, modifier) approach. During the pitch stage after some initial designs I created a prototype of the Single-Page Application (SPA) using vanilla JavaScript that helped us to quickly present the design to the client in a more interactive way. When I started building the application and Angular 2 was past the RC stage, I then picked a stable release and started creating various facets of the application infrastructure, data service, error handling service etc. Angular 2 allowed us to build the SPA embracing a component based architecture, creating well encapsulated, loosely coupled reusable components. The advantage of this approach is re-usability, testability and readability.

Using TypeScript with Angular 2 helped us:

• Apply OOP (object oriented programming),
• Strongly typing made our code base less prone to errors.
• Encapsulation, Inheritance.
• Access to ES6 and ES7 features, before they become supported by major browsers.

The application is composed of a series of widgets that visualise data in various chart formats, linking up to a detailed view that displays it in more depth. The user can filter the data displayed on the widgets using a global filter, that is persistent throughout the application life-cycle. All parts that compose the application are loaded dynamically from handcrafted Web API. The SPA has multilingual support using internationalisation i18n. This helps us make our application available across 7 languages, with the user able to pre-select the language from the user browser agent. As Arabic and Chinese were one of the required languages, we have built the application an RTL support which required extra CSS crafting and the charts required to respond to it. I have used Highcharts for the data visualization; its rich API allowed us to customise beyond what any other library could do. We completed with a dash of suitable animation and transitions using CSS3 keeping the user focused on the UI (user-interface).

Update: Since the project has been released, the SPA has been upgraded from Angular 2, to 4, to Angular 6.