Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UML diagrams to represent react-redux connected components

Calling UML experts for help with laying out javascript specific diagrams.

NOTE: react, Flux Architecture, react with redux experience required.

I need help with design decisions on how to represent the structure and behavior of a react app (container and children components). Using Sparx enterprise architect the target is to have standard UML design so the entire team (who many not be very familiar with the technology) can understand whats going on plus UI developers can use it for development.

After we have decided on the UML classes (React Components) we need, Containers, presentation Views and the behavior we are still struggling with:

  1. It seems we need to use two diagrams for each main container to fully represent it, one for structure and one for behavior? Do we need a behavioral diagram if the design follows the conventions?

  2. Should the presentation components in the structural diagram show events triggered or actions being dispatched via the passed down callbacks to props? (example, annotate operations of a Button event to onClick or the dispatch action that onClick will call) or both.

  3. Can we say react actions are Signals? since they are plain js objects and state changes happen in reducers, so we need a Statechart diagram maybe?

  4. Depending on above decisions, how do we reference the Store instance in diagrams (we have one store), should we reference the Store instance in all diagrams or just add a link to its class diagram?

  5. Is it correct to represent Reducers --Set State--> Store as < information flow > and Store -mapStateToProps-> props as a < dependency >?

  6. Can we refer to component propTypes as the class constraints or create an interface instead?

I couldn't find a good reference for a javascript app designed in UML, except some sequence diagrams to partially visualize Nodejs modules. If you got any please send them my way.

Thanks

like image 959
Ali Abdulla Avatar asked Nov 20 '16 05:11

Ali Abdulla


1 Answers

As mentioned I can't speak for the J-part, but only for the general EA-part.

  1. If you have conventions which are explained externally, there is no need for additional behavioral explanation (except you want to swagger with your UML knowledge).

  2. Having a context diagram is always a good idea. What I do in those cases is to create a composite diagram which shows the element in the middle (eventually highlighted by a thicker border) and the related elements arranged around it.

  3. Yes, you can. Create an action in EA and you are presented a menu that allows to create a Send Signal or the like.

I can't answer 4. and 5.

like image 166
qwerty_so Avatar answered Oct 08 '22 19:10

qwerty_so