-2

I have a Html page which is configured/connected with a third party engine that continuously checks the web application against some rules and embeds a div tag in to the body if conditions are passed.

Creation of the div and all the elements in it is done using javascript. Now I need to replace that javascript way of elements creation (dom manipulation) with react.js and flux way of doing it.

Can anyone please tell me what are the advantages of doing it using React rather than general javascript apart from virtual dom usage for better performance.

Ramson
  • 229
  • 4
  • 12
  • Try it. Write it one way, write it the other way, compare. Try to maintain and extend both solutions for a while. Form your own opinion. – deceze Nov 04 '15 at 16:12
  • 1
    In short: Declarative vs imperative UI implementation. – Felix Kling Nov 04 '15 at 16:14
  • There are more benefits from virtual DOM than just better performance, and there is more to React than virtual DOM. And flux is an architecture. Many advantages of React over vanilla javascript are similar to [insert any package/ framework here] compared to vanilla javascript. Probably too broad for SO. You may find better results e.g. [here](http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer).. – wintvelt Nov 04 '15 at 17:06

2 Answers2

3

React (and plethora of other JS frameworks) allows you to divide your application into small reusable pieces (react "components", angular "directives" etc.). This is good because of:

  • code is more clean
  • reusability: you can use the same component in various places of your application or maybe even in other applications as well.

advantages of Flux:

  • better separation of concerns: you can separate view (in components) from logic (in store).

  • message passing approach - old and proven approach to build apps. Even operating systems are built in this way (check for WinAPI for example). Besides message passing enables things like Event Sourcing (check for videos of Greg Young), easy undo-redo etc.

It basically let you to treat every change in your application as a separate thing (From some reasons some people call this similar concept "message", while others use word "event" or "action").

  • you don't mutate state directly, so you spent probably less time debugging. It is really hard to debug application if every object can change itself in anytime. If your state is mutated in store and only if appriopriate action comes in, you have more control over your control flow in your application.
hex13
  • 500
  • 5
  • 11
0

React as a package is mainly used for it's virtual DOM, that is true.

Flux is an architecture (there are many libraries implementing it, to varying degrees). When using Flux, you are defining the way data flows through your program. By using a unidirectional data flow, with predefined responsibilities for each component (action, store, view), you are able to better reason about changes to your data, as well as troubleshooting problems.

TbWill4321
  • 8,626
  • 3
  • 27
  • 25