Search code examples
javascriptreactjsreactjs-flux

What are the advantages of react and flux apart from virtual dom concept


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.


Solution

  • 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.