PR 9022

based on a true story ...

A Conversion Team Production ©

Once upon a time, there were happy devs

An evolution was requested

How hard could it be ?

Root of all evil

CMS

UserSpace

(Dev * 2) + (Test * 2) = Cost * 2

Encapsulate everything

Use anywhere

More maintainability

Web components

+

@angular/elements

Amounts

Projects

BusinessUnit

Continue

Inputs

Outputs

Tables

Restaurants

ProviderCode

Continue

ReservationForm

AreBigReservationsOn

Registering an element

<simulator [businessunit]='bu' [amounts]='amounts$ | async' [projects]='projects$ | async' (continue)='onContinue($event)'>
</simulator>

<simulator businessunit='@Model.Bu' amounts='@Model.Amounts' projects='@Model.Projects' continue='@Url.Action(onContinue)'>
</simulator>


<simulator businessunit='@Model.Bu' amounts='amounts$' projects='projects$'>
</simulator>

<script type="text/javascript">
  var amounts$ = @Html.ToJson(Model.Amounts);
  var projects$ = @Html.ToJson(Model.Projects);
  (function () {
    var sim = document.querySelector('simulator');
    sim.addEventListener('continue',
      (obj) => {
        $.ajax({
          type: "POST",
          data: {
            project: obj.detail.projectType,
            amount: obj.detail.projectAmount
          }
        }).then((resUrl) => document.location.href = resUrl);
      });
  }());
</script>

/* Because we can only pass strings to custom element attributes */
 
<simulator businessunit='@Model.Bu' amounts='@Model.Amounts' projects='@Model.Projects' continue='@Url.Action(onContinue)'>
</simulator>

Web components

Reusing our code

Micro-frontends

String attributes

Poor documentation

Lack of tooling