There are a couple of good examples in Metron Alerts showing different
advantages we would gain using NgRx. First, you’ll notice that a lot of
state does not persist between view changes. For example, if a user inputs
search criteria into the search bar, switches to the PCAP view, then
switches back, that search input is not persisted. If we used NgRx, the
application store can persist this state between view changes if we wanted
to. The importance of this will continue to become more apparent as the
application scales up and different views are added.

In addition, there is quite a bit of shared application data between
components. For example, you’ll see that both the GroupByComponent and
AlertFiltersComponent display the number of facets available. When you
filter by a facet, these numbers update. You can filter by clicking on the
facets available in the AlertFiltersComponent, or you can search with a
filter keyword and value in the search bar. Multiple areas of the
application are showing the same data, and multiple areas of the
application are manipulating that data. While passing data through @Input
and @Output decorators and services is fine for basic sharing of
application data, you’ll eventually create a complex web of data sharing
and mutation that can be hard to follow and debug. In my opinion, we are
nearing that point in our application. NgRx solves this with its
one-direction data flow and immutable data structures. The store is the
single source of truth which your component derives state from rather than
having components holding their own state and having to manage, communicate
and pass data between them.

There are also many debugging advantages. I don’t have a specific example
at the moment, but you can probably imagine how much easier it is to “time
travel” with NgRx debugging tools. What I mean by “time travel” is the
ability to move back and forth among the previous application states and
view the results in real-time rather than setting a breakpoint, reloading
the application, inspecting, setting another breakpoint to inspect a state
previous to your current breakpoint, reloading the application, etc. This
is a very repetitive and time-consuming thing to do when debugging on the
front-end, and is very common. For a visual example of this, here is a
video containing a decent overview of debugging with NgRx:

On Tue, Nov 27, 2018 at 5:30 AM James Sirota <> wrote:

> I found a helpful article here:
> A lot of this goes over my head, but in a nutshell, it's a tree-based
> state management object for JS.  Its main drawback seems to be added
> complexity, but if the guys who are more familiar with UI say we would
> benefit from it I am inclined to take them at their word.
> 26.11.2018, 13:09, "Michael Miklavcic" <>:
> > Shane, thanks for sharing this. Can you perhaps describe a sample use
> case
> > in the UI currently and explain for us how it currently works (or
> doesn't,
> > ha) versus how it would be modified and improved with using NgRx?
> >
> > Thanks,
> > Mike
> >
> > On Fri, Nov 23, 2018 at 7:44 AM Shane Ardell <>
> > wrote:
> >
> >>  What I'm referring to is roughly the entire contents of the UI
> >>  application's memory.
> >>
> >>  On Thu, Nov 22, 2018 at 6:29 PM Otto Fowler <>
> >>  wrote:
> >>
> >>  > Can you describe what you mean by “state” in a little more detail?
> Not a
> >>  > complete description, maybe just a crib list.
> >>  >
> >>  >
> >>  > On November 22, 2018 at 07:21:43, Shane Ardell (
> >>  )
> >>  > wrote:
> >>  >
> >>  > As both the Management and Alerts UI grow in size, managing
> application
> >>  > state continues to become more and more complex. To help us deal with
> >>  > managing all of this state and ensuring our application derives state
> >>  from
> >>  > a single source of truth, I suggest we start using NgRx, a state
> >>  > management
> >>  > library based on the Redux pattern but built for Angular. It is by
> far
> >>  the
> >>  > most popular library of this type for Angular. As you can see in the
> >>  > project's GitHub Insights tab <
> >>  > it's quite actively worked on and releases are pretty frequent. The
> >>  > project
> >>  > is licensed under MIT.
> >>  >
> >>  > As far as an approach to integration, I don't think we necessarily
> need a
> >>  > big refactoring right off the bat. I feel something like this can be
> done
> >>  > in a piecemeal approach over time. I think we can start by
> introducing it
> >>  > into the project the next time we have a new application feature.
> >>  >
> >>  > What are everyone's thoughts around this?
> >>  >
> >>  > Cheers,
> >>  > Shane
> >>  >
> >>  >
> -------------------
> Thank you,
> James Sirota
> PMC- Apache Metron
> jsirota AT apache DOT org

Reply via email to