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>
1
2
3
4
Web components
Reusing our code
Micro-frontends
String attributes
Poor documentation
Lack of tooling
PR 9022
By skible
PR 9022
- 190