Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Migrando una app de angular.js a Blazor

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

  • Be the first to comment

  • Be the first to like this

Migrando una app de angular.js a Blazor

  1. 1. <1/> Moving from Angular.js to Blazor <br> //- @Mteheran
  2. 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. <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. <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. <5/> Blazor- .NET Core Hosted Small project, easy to deploy, less configuration and infrastructure
  6. 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. <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. <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. <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. <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. <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. <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. <13/> Javascript dependency 1. Alert and prompt 2. CSV Export 3. Import CSV (removed with dotnet5) -> InputFile - Blazor
  14. 14. <14/> Thank you For your attention @Mteheran

×