Historia de una App migrada de Angular.js a blazor en un ambiente real y productivo

1. <1/>
Moving from Angular.js
to Blazor
<br>
//-
@Mteheran

2. <2/>
General Info
Project for managing employees, regions
and bonus
Users: 2-5
Age: 6 years
C# - .NET Framework
Angular.js - 1.4
01 Bootstrap 3.5
Styles
LESS
02 DB Sql server
Store procedures
Views
03

3. <3/>
Blazor Migration
Project for managing employees, regions
and bonus
Users: 2-5
C# - .NET Core - Net5
Blazor
01 Bootstrap 4.x
Styles
SAAS
02 EF Core - CodeFirst
DB Sql server
Store procedures
Views
03

4. <4/>
Project first steps
1. POC - Blazor
2. First module migrated
3. Authentication process (AAD)
4. Main Modules
5. Configuration modules
6. Improvements

5. <5/>
Blazor-
.NET Core
Hosted
Small project, easy to deploy, less
configuration and infrastructure

6. <6/>
Configurar LESS en proyectos Blazor
con Visual studio – Mteheran's Blog
Moving static files
Update Bootstrap components
Css - Styles
Adding new classes
Moving a new folder
Images
Web compiler
LESS CSS
Visual studio generator
Removing unnecessary
data
Updating classes

7. <7/>
<div class="widget wlightblue">
<div data-cc-widget-header
title="{{element}}">
</div>
<div class="widget-content text-center
text-info">
Example Angular.js
<div class="widget wlightblue">
1. <div title="@element"class="widget-
head">
2. </div>
3. <div class="widget-content text-center
text-info">
Example Blazor

8. <8/>
Copy and
Paste UI code in
blazor
component
Replace ng- tag to
C# statement
Replace javascript
code to C# code
Process to move UI
01 02 03

9. <9/>
1. <a href="admin" data-ng-bind-
html="r.config.settings.content"
class="ng-binding">
2. <i class="fa fa-cogs"></i>Admin
3. </a>
Example Angular.js
1. <li class="@GetTabModule("admin")">
2. <NavLink href="pool-admin">
3. <i class="fa fa-cogs"></i>Admin
4. </NavLink>
5. </li>
Example Blazor

10. <10/>
1. <select id="pool-select"
style="width:150px"
2. class="form-control"
3. ng-model="vm.poolId"
ng-options="poolRole.poolId as
poolRole.pool for poolRole in vm.pools |
filter:vm.filterActivePool()"
ng-change="vm.changePool()"
ng-hide="!vm.pools || vm.pools.length ==
0">
4. <option value="">Select a Pool</option>
5. </select>
Example Angular.js
@if (vm.regions?.Count() > 0)
{
<select id="region-select"
style="width:150px" @onchange="ChangeRegion"
class="form-control">
<option value="-1">Select a Region</option>
@foreach
(var item in vm.regions)
{
if (item.RegionId == vm.regionId)
{
<option value="@item.RegionId"
selected>@item.Name</option>
}
else
{
<option
value="@item.RegionId">@item.Name</option>
}
}
</select>
}
Example Blazor

11. <11/>
<table class="table table-condensed">
<thead>
<tr>
<th>Allocation %</th>
<th>Property Id</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in vm.propertyEmployees">
<td>{{o.allocationPercentage | number:6 |
number}}%</td>
<td>{{o.rmrPropertyId}}</td>
<td>{{o.displayName}}</td>
<td><button type="button" class="btn btn-
inverse" style="padding: 0 5px;" ng-
click="vm.deletePropertyAllocation(o)"
confirm="Are you sure you want to DELETE
allocation?" ng-
disabled="!vm.hasAllocationRights">
X</button></td>
</tr>
</tbody>
</table>
Example Angular.js
<table class="table table-condensed">
<thead>
<tr>
<th>Allocation %</th>
<th>Property Id</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
@if (vm.AllocationPropertyDetail?.Count() > 0)
{
@foreach (var item in
vm.AllocationPropertyDetail.Where(p =>
p.AllocationPercentage > 0))
{
<tr>
<td>@FormatHelper.GetFormattedNumber(item.AllocationPer
centage, 6) %</td>
<td>@item.RMRPropertyId</td>
<td>@item.DisplayName</td>
<td><button type="button" class="btn btn-inverse"
style="padding: 0 5px;" @onclick="() =>
DeleteAllocationEmployeeProperty(item,true)"
disabled="@(!vm.hasAllocationRights)">X</button></td>
</tr>
} }
</tbody>
</table>
Example Blazor

12. <12/>
Challenges
1. AAD for Blazor (Secure an ASP.NET Core Blazor WebAssembly hosted app with Azure Active Directory |
Microsoft Docs)
2. Performance (many tabs and large grids)
● Virtualization
● Small calls to the DB
1. Modals and notifications (Blazored · GitHub)

13. <13/>
Javascript dependency
1. Alert and prompt
2. CSV Export
3. Import CSV (removed with dotnet5) -> InputFile - Blazor

14. <14/>
Thank you
For your attention
@Mteheran