d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Angular – A Development Pattern

This article proposes a development pattern for Angular applications (SPAs). The pattern uses an FSM-based state transitions technique. The benefits of this pattern are discusssed at the end of the article.

A Sample App

The sample app considered for illustrating the pattern has views like those shown here where the user can perform the following actions:

  1. View a list of products
  2. View the product details
  3. Add a product to the cart
  4. View the cart items count
  5. View the cart items 
  6. If Admin, can add one or more products

Pattern Steps

The pattern suggests the following steps.

1. Capture the State Transitions

The pattern suggests capturing the SPA’s requirements into a set of state transitions. For the views in the sample app, the following state transitions are considered:

Initial State Pre-Event Process Post-Event Final State
DEFAULT onload processOnload() onload_success ONLOADSUCCESSVIEW
ONLOADSUCCESS get_products processGetProducts() get_products_success PRODUCTSVIEW
PRODUCTSVIEW               get_product_details processGetProductDetails() get_product_details_success PRODUCTDETAILSVIEW
PRODUCTDETAILSVIEW add_to_cart         processAddToCart() add_to_cart_success ADDTOCARTSUCCESSVIEW
ADDTOCARTSUCCESSVIEW update_cartcount processUpdateCartCount() update_cart_count_success UPDATACARTCOUNTSUCCESSVIEW
UPDATECARTCOUNTSUCCESSVIEW get_cart             processGetCart() get_cart_success CARTVIEW
CARTVIEW get_product_details processGetProductDetails() get_product_details_success PRODUCTDETAILSFORCARTVIEW
PRODUCTSVIEW           add_product_form   processAddProductForm() add_product_form_succcess ADDPRODUCTFORMSUCCESSVIEW
ADDPRODUCTFORMSUCCESSVIEW add_product processAddProduct() add_product_succcess ADDPRODUCTSUCCESSVIEW

Please note that the error conditions like add_product_error, etc. are not considered in the above list but can be easily added as additional state transitions where needed. The pre-events in the above list are user-initiated except update_cartcount, which is an internal system event.

2. Configure the Events, View States, and Transitions

After generating the base application code using the Angular CLI command, the following configuration classes are added.

The events and view states are configured in TypeScript enums like app-events.enum.ts:

view-states.enum.ts:

And the state transitions are configured as const variables like state-transitions.ts

All the core functionalities of the pattern are implemented in the state-transitions.ts file. The const variable AppPreEvents configures the process function for each pre-event. The process functions prepare the data needed by each component by calling the methods in AppDataStore, which is a central datastore for the whole app. The process methods, when complete, raise post-events which in turn are handled by the AppPostEvents to return the final state. This demo is  currently using the RxJS based framework rxjs-observable-store. This can be easily replaced with NgRx or similar frameworks. The StateTransitionData is a model class. The doTransition() is a utility function to call the process methods. The state-transitions.ts file also has the guard conditions like whether the uer is logged in or whether the user is authorized to access the process method, etc.

app-data.store.ts

The app-data.store.ts uses AppData as its model and acts as a single source of truth for the whole application. It can handle scenarios like which data may be pre-fetched for performance, which data may be stored in localStorage or sessionStorage, when to call the REST service, etc.

state-transitions.model.ts

Where the User data model is user.model.ts:

3. Create Angular Components

For each of the pre-events, an Angular component is generated and updated to call the doTransition function in the state-transitions.ts file. The components generated are home.component.ts, products.component.ts, product-details.component.ts, add-to-cart.component.ts, add-product-form.component.ts, add-product.component.ts, cart.component.ts, and cart-button.component.ts. The source for products.component.ts and products.component.html are shown below. The source for the other components can be viewed in GitHub. 

products.component.ts

products.component.html

4. Create Angular Routes for Each Pre-Event

This is a normal Angular routes configuration done in app-routing.module.ts:

Demo

A demo of the app developed using the pattern can be viewed here where all the transitions listed above can be tested.

Benefits

  • The pattern provides a clear guideline when a new feature need to be added. For instance, if a new requirement like “if the user is not logged in then redirect to login page” need to be be added then the developer can proceed by writing additional state transitions like:

…and proceed with the remaining pattern steps.  

  • Guard conditions like isLoggedIn or isAuthorized, etc. are easily checked in one place – the state-transitions.ts file.  
  • The use of one component per pre-event helps in keeping the codebase modular and easily maintainable.

Conclusion

The proposed Angular development pattern is shown to offer several benefits that could ease the development process.

Related Articles

Interested readers can check out the state transitions technique applied to Spring Boot projects in this previous DZone article.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this