Gradual migration to ngular

by Olga Kichewko & Maciek Małecki

SPA

Harold is asked to migrate an old style web app into modern cutting edge Angular something...

  • we want to have complex dynamics on our pages
  • we can easily test UI written in Angular
  • server-generated HTML pages are no longer "sexy"

Possibilities

Big bang

  • clean sheet design
  • no impact on production during dev
  • huge effort before it's ready
  • "chase the rabbit"
  • necessity to use two apps

"Big bang approach fails by definition for bigger projects."

Anonymous Architect

if only we could migrate gradually...
  • we could deliver small chunks on regular basis
  • compatible with CI/CD
  • no cancellation risk: code is already there
  • two technologies mixed for some (long) time

Let's complicate our case

CI/CD

  • Working (almost) always on short living branches
  • Kanban - no sprints
  • Automatic deployment on test environment
  • Production releases at least once per week

Our approach

Spring MVC

  • server side rendering
  • template engine
  • maybe some standalone JS
  • maybe some AJAX calls
rght

Hybrid

  • Angular as JS library
  • Manages just portion of the page
  • No routing
  • One by one migration
rght

SPA

  • All pages are Angular components
  • Router introduced
  • Routings defined

Demo time

Summary

uHappy parts

  • It works!
  • Very effective for good source architecture

s Tricky parts

  • Communication between Thymeleaf and Angular
  • Root component
  • Angular resources versioning
  • Developers' mode

Find us on GitHub

https://github.com/kiczelkoo/miniAngular