1064279 - [meta] Use the Flux pattern for more parts of Loop, and improve the flux style

Status: RESOLVED WORKSFORME

(Hello (Loop) :: Client, defect, P5)

Description

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

The more the UI related code for Loop grows, the more painful to maintain it gets: 

- We're passing component dependencies around through props
- We listen to events from componentDidMount() and unregister from componentWillUnmount()
- We often rely on globals from within these component hook methods (navigator.mozLoop, window, document…)

This creates code hard to follow, grasp, track and debug. We should start investigating the Flux pattern[0] which has proven working great combined with React.

Basically the idea is to extract/decouple the app business logic from UI component code, so we'd just use a single app event handler capable of notifying any subscribing component from data state changes.

After discussing with :mikedeboer and :paolo, it seems this would be ideal for handling contacts API mutations, and more generally for anything mozLoop related.

[0]: http://facebook.github.io/react/docs/flux-overview.html

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

This change will probably be very large and may introduce a fair amount of risk considering that we will need to uplift this to Aurora.

How bad would it be to use the current pattern and only do flux on mozilla-central?

Comment 2

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #1)
> How bad would it be to use the current pattern and only do flux on
> mozilla-central?

That's definitely the plan, yes :)

Comment 3

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Some good & illustrative reading about how Flux could help in Loop content code: https://github.com/rpflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

Comment 4

[Maire Reavy [:mreavy]]

Moved to blocking-loop "-" because this is a meta and the dependent bugs have been bucketed.

Comment 5

[:shell escalante]

didn't get rid of as there's still some break-down of actions that could be added from comments in bug - but biggest ones broken out.

Comment 6

[Mark Banner (:standard8)]

We've now got the main currently supported code running in the flux style. There's still some panel code that isn't, but currently we're not going to rewrite that as the cost/benefit doesn't match up at the moment and we'll consider it if it needs extensive work in the future.

The other improvements we should be specific about and file/handle as we go, hence I'm marking this bug as WFM.