Skip to content
This repository has been archived by the owner on Jul 5, 2024. It is now read-only.

Angular frontend architecture (old)

Jump to bottom
Tom Lichtenstein edited this page May 30, 2018 · 1 revision

Chainboard

React --> Angular

Angular React
TypeScript-based Javascript framework JavaScript library for building user interfaces
Developed and maintained by Google Developed and maintained by Facebook
Full-fledged MVC React library only has a View, but lacks Model and Controller components
Angular is a full framework and offers a lot of things bundled together with long-time support React is more flexible using more independent, unsettled, fast-moving libraries — you need to take care of the corresponding updates and migrations on your own
HTML JSX
Developer from another company will quickly familiarize themselves with all the requisite conventions React projects are each different in terms of architectural decisions, and developers need to get familiar with the particular project setup
Good if you have developers with an object-oriented background or who don’t like Javascript Hard Javascript
Angular is a framework rather than a library because it provides strong opinions as to how your application should be structured and also has more functionality out of the box React is universally flexible
Angular’s two-way-binding changes the model state when the UI element (e.g. a user input) is updated. Angular’s method is cleaner in the code and easier for the developer to implement React only goes one way: it updates the model first and then it renders the UI element. React’s way results in a better data overview, because the data only flows in one direction (this makes debugging easier)

Based on info here

Components' schema

chainboard

Structure

src
└───app
│   └───dashboard
│       └───charts
│           └───barchart #component
│           └───linechart #component
│           └───private-charts #component
│           └───public-charts #component
│       └───form #component
│       └───metric #component
│       └───welcome #component
│       │   dashboard.component #component
│       │   dashboard.module.ts 
│ 
│   └───impressum #component
│   └───menu
│       └───footer #component
│       └───header #component
│   └───not-found #component
│   └───services
│       │   date-builder.service
│       │   private-statistics.service
│       │   PrivateStatistics.ts
│       │   public-statistics.service
│       │   PublicStatistics.ts
│ 
│   │   app.component #component
│   │   app.module.ts
│   │   app-material.module.ts
│   │   app-routing-module.ts
│   
└───assets
    │   images
│   
└───environments
│   │   environment.prod.ts
│   │   environment.ts

Every #component-Folder is structured in four files a .css for styling, .html for html template, .spec.ts for tests, .ts for typescript logic.

Modules

The app has three different modules.

  • App module
  • AppMaterial module
  • Dashboard module
App module

The app module declares the header and footer components as well as the not-found and the impressum component. It imports all other modules and uses the app-routing-module to define routes to the specific components.

AppMaterial module

The module imports all the Angular Material Modules used throughout the app as well as the FlexLayout module. It is only responsible for styling the app. Make sure to include used Modules in the import and the export section of the module to make them available throughout the app.

Dashboard module

The dashboard module contains the logic of the app. It imports the AppMaterial module for styling. It declares all of the charts components, and imports the used ChartsModule from ng2 charts. It also declares the Form (for which it imports Angulars Forms and ReactiveForms Modules), Metric, Welcome and Dashboard Component.

Services

If you need to have a functionality that could be reused among various modules, you can create a service. To use service you should perform two actions:

  1. Create injectable decorator in your service to allow the functionality of this class to be injected and used in any Angular module. For example, in date-builder.service.ts we have
@Injectable()
export class DateBuilderService {}
  1. In your Component module in which you want to use the service, you need to define it as a provider in the @Component decorator. For example, we use DateBuilderService in form.component.ts :
@Component({
providers: [DateBuilderService]
})
DateBuilderService

This service is responsible for date/time convertation of user input(days, hours, minutes) to the right format for http query. It sets hours and minutes to the date according to user input. This service is used then in form.component to convert user input there. As data have been converted, it is sent further to the dashboard.component . To allow this, we defined in form.component

@Output() showData: EventEmitter<any> = new EventEmitter();
emitEvent() {
    this.showData.emit([this.privateChecked, this.publicChecked, this.startDate,this.endDate]);
  }

Dashboard.component receives data and uses it to build charts:

loadRequestedData(userInput: Array<any>) {
    this.privateCheck = userInput[0];
   }
PublicStatisticsService and PrivateStatisticsService

Both services use HttpClient to access the backend. HttpClient service is included in HttpClientModule and can be used to initiate HTTP request and process responses within an application. To be able to use the HttpClient you need to import it in the application’s root module in file app.module.ts:

import {HttpClientModule} from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
   ],
  imports: [
    HttpClientModule,
  ],
  providers: [HttpClientModule, DatePipe],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Assets

If you want to use images in html code, put and save them in the Assets folder. Otherwise, Angular doesn't see images.

Environments

Angular-cli allows handling different environments. Everyone needs to manage at least 2 environments, one development which uses localhost:4200 and other for production. environment.ts is default environment, when you don’t specify — env value that file variables are used. Properties specified here will be available for type hinting throughout the entire application. Here we specified connection to BPT server. baseURL: 'https://bpt-lab.org/bp2017w1-bpchain/api'

Example: How to build linecharts with given data for concrete time range

Here you find short explanation how to create a linechart with the private chain data.

  1. First create an Input for private-charts.component.ts , so that this component has an access to data
 @Input() privateData?: any;
  1. Prepare html file to show your data (private-charts.component.html). To build a linechart for private stats use the name of component as hashtag and send the data to it.
<app-linechart [labels]="['avgBlocktime']" [statistics]="privateData"></app-linechart>
  1. As private-charts are shown on the dashboard.component, you should also adjust it. In the html file you prove if user chose some time range and depending on it you decide whether to build linechart or not.
 <div *ngIf="timeBasedPrivateStatistics">
 +    <app-private-charts [currentPrivateData]="currentPrivateStatistics" [privateData]="timeBasedPrivateStatistics"></app-private-charts>
 +  </div>
  1. Load the data in dashboard.component.ts 
loadTimeBasedPrivateData(start:Date, end:Date) {
 +      let query = 'startTime=' + start.toISOString() + '&endTime=' + end.toISOString();
 +      this.privateStatisticsService.query(query)
 +      .subscribe(
 +        response => {
 +          this.timeBasedPrivateStatistics = response;
 +        }
 +      )
    }

Semantic UI --> Materialize --> Angular Material

Semantic UI

Pros:

  • well documented
  • simple to learn
  • almost no need to write your own css
  • many components with API

Cons:

  • difficult to install
  • limited possibilities
  • no angular support
  • no material design support

Materialize

Pros:

  • easy to integrate
  • well documented

Angular Material

Pros:

  • well documented
  • easy to integrate
  • pure Angular framework
  • full material design support
  • ultra-modern minimalism

Cons:

  • lack some useful web components

Principles

Material Design is founded on three principles.

Material Is the Metaphor

Inspired by the study of paper and ink, the material lives in 3D space and is grounded in tactile reality. It gives the illusion of space by using realistic shadows. The paper material must abide by the laws of physics (i.e. two pieces of paper may not travel through each other, but may supercede the physical world (i.e. a paper may grow or shrink).

Bold, Graphic, Intentional

Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. The Floating Action Button, or FAB, is a prime example of this principle. Have you noticed that little circle with the ‘plus’ symbol floating around in your Google Inbox app? Material Design makes it very apparent that this is an important button.

Motion Provides Meaning

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. The main point here is to animate only when it has a purpose and not to overdo it.

(c)

Links

Clone this wiki locally