azu
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
- Turn on
performanceProfileoption - Load your app
- Open the browser DevTools “Performance tab and press Record”
- Stop recording
- 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.
Vue + Almin
Vue also support performance option based on performance.mark.
I’ve created a example project that use Almin + Vue.
- 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.
This project is migrated from Vue + Vuex to Vue + Almin. The diff is following.
Conclusion
Almin can measure performance profile with browser DevTools.
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.
