016 Naming the folders - chempkovsky/CS82ANGULAR GitHub Wiki

Reminder

Notes

Naming the folders for Monolithic App

Naming the folders for Micro-frontend App

Reminder

  • View (or ModelView) is the structure that the WebApi service sends to and receives from the client. For each entity, the developer must create at least one view.
  • View (or ModelView) is a Data Transfer Objects (DTO)
  • For a given entity, the View (or ModelView) is a subset of the properties of the given entity and a subset of the properties of the direct and indirect master entities (in terms of the master-detail relationship).
  • From the point of view of Sql constructions, for a given entity (table) View (or ModelView) is an sql View.

Notes

  • According to the agreement specified in the article 015 Preparing projects for application launch, we will generate Angular components and services in the folders
    • src/app/components
    • src/app/services
  • before generating Angular typescript classes for each ModelView we need to create subfolders for them. This article is devoted to the simple method of naming such a folders.

Naming the folders for Monolithic App

Run JavaScripts Wizard

  • To name the folder
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click app of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
Click to show the picture

project structure

First page of the Wizard

  • On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click Next-button
Click to show the picture

project structure

Second page of the Wizard

  • On the second page of the Wizard we select DbContext that will be used to choose the entity for the View. Select PhBkContext.csproj and the PhBkContext class using the drop-down lists. Click Next-button.
Click to show the picture

project structure

Third page of the Wizard

  • On the third page of the Wizard
    • select the View for which we need to get the name
      • in the picture below we have selected PhbkPhoneTypeView-View
  • Click Next-button
Click to show the picture

project structure

Fourth page of the Wizard

  • On the Fourth page of the Wizard we choose 01100-.interface.ts action type.
    • in the enter file name-edit-box you will get the name in the form
      • xxxxxxxx.interface
Click to show the picture

project structure

  • copy generated name without the .interface-suffix. It can used as a name of the folders.
    • in the picture above we have selected phbk-phone-type-view-name

Create subfolders

  • Having the name gotten on the fourth page of the Wizard we create two subfolder:
    • src/app/components/xxxxxxxx
    • src/app/services/xxxxxxxx
  • in the picture below we have created
    • src/app/components/phbk-phone-type-view
    • src/app/services/phbk-phone-type-view
Click to show the picture

project structure

Naming the folders for Micro frontend App

How to split Monolithic App into a set of Micro frontend Apps

  • Note:

    • The first: to generate code with micro-frontend support we should use the following batch-scripts
      • 01101-MonoInterfaces.json
      • 01401-MonoWebApiService.json
      • 01421-MonoSForm.json (01421-MonoSForm.kendo.json)
      • 01501-MonoVform.json (01501-MonoVform.kendo.json)
      • 01503-MonoAform.json (01503-MonoAform.kendo.json)
      • 01505-MonoUform.json (01505-MonoUform.kendo.json)
      • 01507-MonoDform.json (01507-MonoDform.kendo.json)
      • 01601-MonoLform.json (01601-MonoLform.kendo.json)
      • 01961-MonoRv.json (01961-MonoRv.kendo.json)
      • 01963-MonoRa.json (01963-MonoRa.kendo.json)
      • 01965-MonoRu.json (01965-MonoRu.kendo.json)
      • 01967-MonoRd.json (01967-MonoRd.kendo.json)
      • 01969-MonoRl.json (01969-MonoRl.kendo.json)
      • 02021-MonoRdl.json (02021-MonoRdl.kendo.json)
      • 02031-MonoSc.json (02031-MonoSc.kendo.json)
    • The second: Any app should have one or more DbContexts
    • The third: Each DbContext declares one or more entities

  • One natural way to split is to create a separate Angular app for each DbContext.

  • But that's only half the battle:

    • it is not bad idea to split each app into libraries:
      • The highest possible splitting:
        • For each entity and each batch-script (with a name XXXX-MonoYYY.json) create a separate library.
        • As a result, for each entity we obtain 15 libraries or so.
      • More realistic splitting way:
        • For each DbContext create 15 libraries: one library per batch-script
      • Typical splitting way: eight libraries per Dbcontext
        • One lib per DbContext for all entities and the following scripts
          • 01101-MonoInterfaces.json
        • One lib per DbContext for all entities and the following scripts
          • 01401-MonoWebApiService.json
        • One lib per DbContext for all entities and the following scripts
          • 01421-MonoSForm.json (01421-MonoSForm.kendo.json)
        • One lib per DbContext for all entities and the following scripts
          • 01501-MonoVform.json (01501-MonoVform.kendo.json)
          • 01503-MonoAform.json (01503-MonoAform.kendo.json)
          • 01505-MonoUform.json (01505-MonoUform.kendo.json)
          • 01507-MonoDform.json (01507-MonoDform.kendo.json)
        • One lib per DbContext for all entities and the following scripts
          • 01601-MonoLform.json (01601-MonoLform.kendo.json).
            • Lform is not recommended for the production!!!
        • One lib per DbContext for all entities and the following scripts:
          • 01961-MonoRv.json (01961-MonoRv.kendo.json)
          • 01963-MonoRa.json (01963-MonoRa.kendo.json)
          • 01965-MonoRu.json (01965-MonoRu.kendo.json)
          • 01967-MonoRd.json (01967-MonoRd.kendo.json)
          • 01969-MonoRl.json (01969-MonoRl.kendo.json)
        • One lib per DbContext for all entities and the following scripts:
          • 02021-MonoRdl.json (02021-MonoRdl.kendo.json)
        • One lib per DbContext for all entities and the following scripts:
          • 02031-MonoSc.json (02031-MonoSc.kendo.json)

Naming notes

  • Naming approach is the same as for Monolithic App
    • we create the subfolders in each library and name them as for monolithic app (read paragraph above).

Typical splitting way

  • We will use Typical splitting for our demo app. Let's create eight libraries:
    • ng generate library phonebook-interfaces
    • ng generate library phonebook-services
    • ng generate library phonebook-sforms
    • ng generate library phonebook-updforms
    • ng generate library phonebook-lforms
    • ng generate library phonebook-rlforms
    • ng generate library phonebook-rdlforms
    • ng generate library phonebook-scforms
  • After creating we remove all files in the 'src/lib'-subfolders
  • Modify each 'src/public-api.ts'-file as follows:
/*
 * Public API Surface of common-auth
 */
import '@angular/localize/init';

  • Under 'src/lib'-folder of each library we create the following subfolders

    • phbk-phone-type
    • phbk-enterprise
    • phbk-division
    • phbk-employee
    • phbk-phone

  • Under 'src/lib'-folder of phonebook-interfaces and phonebook-services library we create additional subfolders

    • lpd-division
    • lpr-division01
    • lpr-division02
    • lpd-emp-last-name
    • lpd-emp-first-name
    • lpd-emp-second-name
    • lpr-employee01
    • lpr-employee02
    • lpd-phone
    • lpr-phone01
    • lpr-phone02
    • lpr-phone03
    • lpr-phone04

The first Micro frontend App

  • in the paragraph we described creation of the AngularPhonebook-application.
    • according to Typical splitting way paragraph we do not use the folders of AngularPhonebook-application to generate typescript classes.
    • there are two scripts which will be used to modify the files of AngularPhonebook-application
    • the generated code by these two scripts above should be copied into
      • src/app/app-routing.module.ts
      • src/app/app.component.html (or src/app/app.component.ts)

The second Micro frontend App

  • Please read the article "109 Security: All Views of the app".
    • we have the second DbContext, which is used to manage users, roles, permissions and so on.
  • There are special batch-scripts to create such an application
    • 02140-MonoAspNetAllInterfacesBatch.json
    • 02141-MonoAspNetAllWebApiServicesBatch.json
    • 02142-MonoAspNetAllSFormsBatch.json (02142-MonoAspNetAllSFormsBatch.kendo.json)
    • 02143-MonoAspNetAllVformsBatch.json (02143-MonoAspNetAllVformsBatch.kendo.json)
    • 02144-MonoAspNetAllAformsBatch.json (02144-MonoAspNetAllAformsBatch.kendo.json)
    • 02145-MonoAspNetAllUformsBatch.json (02145-MonoAspNetAllUformsBatch.kendo.json)
    • 02146-MonoAspNetAllDformsBatch.json (02146-MonoAspNetAllDformsBatch.kendo.json)
    • 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
    • 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
    • 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
    • 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
    • 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
    • 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)
  • Again applying "Typical splitting way" we will generate all the code into libraries
    • ng generate library asp-interfaces
      • for 02140-MonoAspNetAllInterfacesBatch.json
    • ng generate library asp-services
      • for 02141-MonoAspNetAllWebApiServicesBatch.json
    • ng generate library asp-sforms
      • for 02142-MonoAspNetAllSFormsBatch.json (02142-MonoAspNetAllSFormsBatch.kendo.json)
    • ng generate library asp-updforms
      • for 02143-MonoAspNetAllVformsBatch.json (02143-MonoAspNetAllVformsBatch.kendo.json)
      • for 02144-MonoAspNetAllAformsBatch.json (02144-MonoAspNetAllAformsBatch.kendo.json)
      • for 02145-MonoAspNetAllUformsBatch.json (02145-MonoAspNetAllUformsBatch.kendo.json)
      • for 02146-MonoAspNetAllDformsBatch.json (02146-MonoAspNetAllDformsBatch.kendo.json)
    • ng generate library asp-lforms
      • there is no special scripts for asp-lforms
    • ng generate library asp-rlforms
      • for 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
      • for 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
      • for 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
      • for 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
      • for 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
    • ng generate library asp-rdlforms
      • for 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)
    • ng generate library asp-scforms
      • there is no special scripts for asp-scforms

Break the rules for the second Micro-frontend App

  • Talking about first Micro-frontend App
    • If to follow the rules described above we could not apply Module Federation library since the scripts below import code not from the second app but from the "asp-libraries" (asp-interfaces, asp-services, ..., asp-rdlforms)
    • To make Module Federation applicable we will generate the following scripts in some folders of the second app
      • 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
      • 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
      • 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
      • 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
      • 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
      • 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)
⚠️ **GitHub.com Fallback** ⚠️