Almin is a State management library like Redux/Flux. But Almin aim to help Client-side DDD/CQRS.

This architecture is also known as Layered Architecture.

We have released Almin 0.14.0 that support to measure performance profile based on performance.mark. You can profiling UseCase execute, StoreGroup write/read, Store update using the browser developer tool timeline.

performance.mark is defined in User Timing Level 2 as Web standard API. It means that almin work with other library like React and Vue on performance profile.

Usage

If you have not heard of almin, please see Introduction · Almin.js

You can turn on performance profile by performanceProfile option.

https://gist.github.com/c40f4e11b9b0d131146b4a2c6ac7b546

Steps

1. Turn on performanceProfile option
2. Load your app
3. Open the browser DevTools “Performance tab and press Record”
4. Stop recording
5. Almin events will be grouped under the **User Timing** label

Actually, you can see performance profile with Chrome DevTool timeline.

Liquid error: internal

This video show Almin + React on timeline. React has ?react_perf options that does profiling performance.

That example code is following.

• almin/examples/shopping-cart at master · almin/almin

Vue + Almin

Vue also support performance option based on performance.mark.

I’ve created a example project that use Almin + Vue.

• azu/vue-almin-counter-example: Vue + Almin counter example

• Vue’s profile show view metrics(render and patch)
• Almin’s profile show UseCase execute, StoreGroup write/read, Store update time

The collection of metrics is writtend in following document.

• Performance profile · Almin.js

This project is migrated from Vue + Vuex to Vue + Almin. The diff is following.

Conclusion

Almin can measure performance profile with browser DevTools.

• Chrome’s Timeline Tool document
• MSEdge’s F12 devtools guide

This performance profile also work with the other library like React, or Vue.

You can find bottleneck using these metrics.

For more details, See followoing documents.

• Performance profile · Almin.js
• LifeCycle of UseCase · Almin.js

almin/almin