NEXT UI: evolution story

Maxim Milovanov, Lead Software Engineer

Cambridge, MA

August 29, 2018

NIBR INFORMATICS (NX)

NIBR INFORMATICS (NX)

Business use only

NIBR Informatics (NX)

Agenda

1. Team introduction

2. Project introduction

3. Migration to new NIBR style guide

4. Replacing Angular 1 to Angular 6

6. Typescript and it's benefits

7. Q/A

5. App structure

Business use only

NIBR Informatics (NX)

Project Team

Mike Tarselli, Scientific Lead

David Cotter, Technical Lead

Thomas Veith, Architect

Vimala Selvaraj, Business Analyst

Andreas Vallen, Application Service Manager

Maxim Milovanov, UI Developer

Andrei Listopadov, UI Developer

Olga Veith, QA Engineer

Mathias Asp, Project Manager

Keith Vedananda, UI Developer

Roman Bolshev, UI Developer

Anton Lunev, UI Developer

Business use only

NIBR Informatics (NX)

Project Information

Outsource chemistry processes

Trading and bidding system

Document exchange

Numbers

Purpose

450 people per day all around the world

30000 chemical reagents were delivered in last 4 years

90000 biological tests were ordered in last year

Help people to do better job

Business use only

NIBR Informatics (NX)

Project Information

Angular 1.3 => Angular 4 => Angular 5 => Angular 6

Grunt => Webpack => Angular-cli

Numbers

Tech stack

340 different UI components

230 modules

2 UI developers

82 lazy loaded chunks

530kb initial load

~650 *.ts files

143 different routes

Business use only

NIBR Informatics (NX)

NIBR Style guide update

September 2017

Business use only

NIBR Informatics (NX)

CSS variables

Business use only

NIBR Informatics (NX)

NIBR Style guide update

November 2017 - First production app in new style

Business use only

NIBR Informatics (NX)

Angular update

September 2016 - Angular 2 release

May 2017 - first commit with Angular 4 #87010

January 2018 - first commit without Angular 1 #90461

Business use only

NIBR Informatics (NX)

Update strategies

Vertical slicing

Horizontal slicing

Our approach

New framework introduction

Business use only

NIBR Informatics (NX)

Framework upgrade

Business use only

NIBR Informatics (NX)

NgUpgrade

Business use only

NIBR Informatics (NX)

Vertical slicing

Business use only

NIBR Informatics (NX)

Vertical slicing

Business use only

NIBR Informatics (NX)

Vertical slicing

Business use only

NIBR Informatics (NX)

Horizontal slicing

Business use only

NIBR Informatics (NX)

Horizontal slicing

Business use only

NIBR Informatics (NX)

Our update strategy

Business use only

NIBR Informatics (NX)

App structure

Business use only

NIBR Informatics (NX)

Type script

Intellisense(IDE support)

API contract

Documentation

Compilation time type checking

Easy refactoring

Business use only

NIBR Informatics (NX)

Questions?

Thank you!

Made with Slides.com