CODEWITHSUNDEEP
reactjsframeworksfrontendsingle-page-applicationenterprise
jfrobishow
jfrobishow

Reputation: 2895

Structuring a modular enterprise application with React?

A lot of us will be familiar with the enterprise web applications that are the be all and end all of the business data. They are usually a collection of various modules behind a login authentication and role based authorization. Instead of the user login in to various smaller application they login once and have a dashboard/menu of what they have access to.

  1. The user login
  2. Their roles are retrieved and stored in session
  3. Application load with a large menu populated according to their roles (CRM, CMS, no admin panel, etc.)

We have been thinking of how we could leverage some of the newer frameworks out there (Angular, React, Vue) or if we should at all for these kind of applications.

I am a struggling when it come to state management. I understand the idea of managing the state using something like Redux with React for smaller components but if various part of a larger application are completely unrelated to each other I am left wondering how complex and how large this state might get to be?

Using React as an example my root component after login might be (I am not sure as I am not extremely familiar with React yet).

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={dashboard}/>
        <Route path="/crm" component={crm}/>
        <Route path="/cms" component={cms}/>
        <Route path="/module1" component={module1}/>
        ...
        <Route path="/moduleN" component={moduleN}/>
      </Router>
    </div>
  )
}

ReactDOM.render(<Root />, document.getElementById('root'));

Is this the better approach even if the multiple routes have nothing in common (the cms doesn't care about the crm) that they should all share the state or would actually reloading the page and going to different smaller more focused single page applications be preferred?

For example, using traditional server side logic to present the menu going to different html file for each modules.

Upvotes: 2

Views: 715

Answers (1)

FreddyF
FreddyF

Reputation: 41

What you are referring to is called lazy loading, that will break down your routes in different JS files and only load them on requests. You can refer to this link on how to use lazy loading in vue.js

https://router.vuejs.org/en/advanced/lazy-loading.html

Here is a way in React (does not seem to be native, correct me if I am wrong)

Dynamic loading of react components

Upvotes: 1

Related Questions