Almin + React/Vue can optimizing performance visually
Tags: react, ddd, vue, javascript
Published: 2017-10-16 15:36:57

---
title: "Almin + React/Vue can optimizing performance visually"
published: true
tags: react,ddd,vue,JavaScript
canonical_url: https://medium.com/@azu/almin-react-vue-optimizing-performance-visually-37d92746b090
---

![](https://cdn-images-1.medium.com/max/625/0*cPszCCl-NvXbdngl.png)

[Almin](https://github.com/almin/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](https://www.safaribooksonline.com/library/view/software-architecture-patterns/9781491971437/ch01.html).

![](https://cdn-images-1.medium.com/max/1024/0*GKnC9nZ8Z4PKHp52.png)

We have released [Almin 0.14.0](https://github.com/almin/almin/releases/tag/almin%400.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.

![](https://cdn-images-1.medium.com/max/1024/0*OezdIE55AzltM6jf.png)

performance.mark is defined in [User Timing Level 2](https://w3c.github.io/user-timing/) 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 Â·&nbsp;Almin.js](https://almin.js.org/)

You can turn on performance profile by performanceProfile option.

[https://gist.github.com/c40f4e11b9b0d131146b4a2c6ac7b546](https://gist.github.com/c40f4e11b9b0d131146b4a2c6ac7b546)

### Steps

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

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

{% tweet 909418278153478144 %}

> This video show Almin + React on timeline. React has&nbsp;[?react\_perf](https://facebook.github.io/react/docs/optimizing-performance.html) options that does profiling performance.

That example code is following.

- [almin/examples/shopping-cart at master Â· almin/almin](https://github.com/almin/almin/tree/master/examples/shopping-cart)

### Vue +&nbsp;Almin

Vue also support [performance option](https://vuejs.org/v2/api/#performance) based on performance.mark.

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

- [azu/vue-almin-counter-example: Vue + Almin counter&nbsp;example](https://github.com/azu/vue-almin-counter-example)

![](https://cdn-images-1.medium.com/max/946/0*14HkBqiQTcztxpv6.gif)

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

The collection of metrics is writtend in following document.

![](https://cdn-images-1.medium.com/max/816/0*yZ4eGQ5XanPj1S5f.png)

- [Performance profile Â·&nbsp;Almin.js](https://almin.js.org/docs/tips/performance-profile.html)

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&nbsp;document](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)
- [MSEdge’s F12 devtools&nbsp;guide](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/performance)

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

You can find bottleneck using these&nbsp;metrics.

For more details, See followoing documents.

- [Performance profile Â·&nbsp;Almin.js](https://almin.js.org/docs/tips/performance-profile.html)
- [LifeCycle of UseCase Â·&nbsp;Almin.js](https://almin.js.org/docs/tips/usecase-lifecycle.html)

[almin/almin](https://github.com/almin/almin)