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 StatePre-EventProcessPost-EventFinal State
DEFAULTonloadprocessOnload()onload_successONLOADSUCCESSVIEW
ONLOADSUCCESSget_productsprocessGetProducts()get_products_successPRODUCTSVIEW
PRODUCTSVIEW              get_product_detailsprocessGetProductDetails()get_product_details_successPRODUCTDETAILSVIEW
PRODUCTDETAILSVIEWadd_to_cart        processAddToCart()add_to_cart_successADDTOCARTSUCCESSVIEW
ADDTOCARTSUCCESSVIEWupdate_cartcountprocessUpdateCartCount()update_cart_count_successUPDATACARTCOUNTSUCCESSVIEW
UPDATECARTCOUNTSUCCESSVIEWget_cart            processGetCart()get_cart_successCARTVIEW
CARTVIEWget_product_detailsprocessGetProductDetails()get_product_details_successPRODUCTDETAILSFORCARTVIEW
PRODUCTSVIEW          add_product_form  processAddProductForm()add_product_form_succcessADDPRODUCTFORMSUCCESSVIEW
ADDPRODUCTFORMSUCCESSVIEWadd_productprocessAddProduct()add_product_succcessADDPRODUCTSUCCESSVIEW

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