In the EP1, we talked about back-end. Now, I would like to purely write about front-end. The fundamental concept about Angular Framework, how I architect this Angular project, as well as interesting and more advanced topic about Angular will be expanded.

For those who want to explore my source code, the link is at Github repo. However, I note that the source code is for educational purpose only, NOT in production.

In the previous block Ep1, I have written about back-end code, and it is separated into 3 parts, which are:

wallet

faucet

explorer

Again, I created more separate folders in /src for the Angular project, which are wallet/, faucet/ and explorer/ as below:

Also, I defined them as Lazy loading feature module at app.module.ts.

Lazy loading is a design pattern used to defer initialisation of an object until the point at which it is needed.

app/app.module.ts

The main purpose of doing this is to help developers to easily separate different features (including routing). Moreover, It is one type of web optimisation, since users are not required to load all code in the first time and only necessary code will be loaded when users only want one.

Component architecture: Crash Concept

Angular is component-based framework, which mainly supported typescript (super version of javascript language) . Its main idea is to separate and encapsulate web page into several part, called web component . This is because it can be reusable, easily readable, and maintainable.

Alternatively, some developers may prefer React.js or Vue.js .

In best practices, if there is component, which is reused and shared across modules, it should be refactored and put into shared module like below:

Generally, there are two types of components, which are:

Stateful Component, Smart Component or Container Component

Stateless Component, Dump Component or Presentational Component

Stateful component is about managing data or interaction with service,then passing the data to Stateless Component.

Stateless Component is for visualising passed data and emitting event to Stateful component.

Service should encapsulate all business logics ofapplication. As a result, view (component) and business logic are separated, leading to modularity.

The pros of this structure is that when developers want to look about business logic, they just figure it out at only container, not ALL components.

wallet.component.ts

Container interacts service class with dependency injection pattern. It determined service as private parameter in constructor function ofง component class. Decorator @Injectable() need to be added to service class as below.

wallet.service.ts

It can be seen that all of these services (including ones for wallet dashboard container) can communicate with RESTful API in backend part via HttpClient module(built-in one from Angular). For instance:

wallet.service.ts

<wallet-dashboard> container

Similarly, it composes of several stateless components. They are:

<wallet-send> Users can send their money.

<wallet-receive> Users could copy their own public key to recieve the money.

<wallet-key> Users could see their own private key .

<wallet-mine> Users can make their own wallet as miner and could explore Transaction Pool or unspent transaction output at that time as below picture:

As I want to add real-time feature for both balance and transaction pool , I create class socket service to listen data emitted from backend as following.

socket.service.ts

The libraries used are ‘socket.io-client’ and ‘socket.io’ for front-end and backend respectively.

backend/index.js

Faucet Module

Previously, we talk so much about smart components. So let see dump component instead.

<faucet-form> component

Because the web app needs validation in order to prevent sending wrong data to the server.

faucet-form.component.ts

It is seen that the FormBuilder is used via dependency injection, and these following built-in validators are used.

The Application of Pipe to Paginator and Virtual Scroll with Angular Material 7

As time passes, the amount of confirmed transaction increases. Finally, the web page can not display all of them. Hence, virtual scroll, newly featured in Angular Material 7, as well as paginator may be solutions here.

transaction.component.ts

The

Looking into html syntax, built-in html components, which are <cdk-virtual-scroll-viewport> and <mat-paginator>, need to be used.

Conclusion and my Thought

In this project, the most favourite part in Angular is modularity. This results in separate beautiful modules, and it is convenient for developers to go back to read, debug, fix and scale new features.

Last but not least, I would like to mention that since the project is not mature, and I am happy welcomed to any improvement, if you, readers, want to comment it out. Happy coding!