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)