Thoughts on Redux – Pietro Ghezzi – Medium

Important read: Thoughts on #Redux  #ReactJS #JavaScript

  • Mostly for CRUD operations.The first problem was to denormalize the entire state (the use of the library “normalizr” is encouraged by redux docs, I didn’t know it when I started and I did it manually) in a way to split it in small pieces, each with a reducer.
  • It’s useful and speeds up a lot the development process.DemoSummary of my pros and consProsTest driven development is made easy, thanks to pure functions, and increases the development productivityOnly the root component (I call it container) is connected to the reducer, all the actions and state are passed through props.
  • This makes it easy to use component composition and write stateless components.Code linearity, everything is simple and doesn’t differ much from one project to another.Immutability: forcing to keep an immutable state helps a lot avoiding weird bugs.The Log middleware in dev mode, showing all the different states before and after an action is dispatched, is of a great help.ConsIt’s difficult to handle relationships and there isn’t any official library with documentation and support to help you with it.Redundant code, every action is written manually, even the most common, like changing an attribute of the state.Normalizing a complex state with many level of nested objects doesn’t always seem the best approach.My best practicesDirectory structure by module instead of scope.
  • A better approach it could be to retrieve the new state from the server when necessary and handle the state relationships on the database layer.TDD on reducers, tests on reducers not only speed up the development but also cover you on possible “silent” bugs on the state.Keep components simple and use component composition.Normalize the state with the use of Reselect libraryHandling complex store relationships (#386)Note from Dan AbramovDeleting is always tricky because there is no first class notion of a schema.
  • These reducers will know when to remove IDs from foreign key fields because they know what the schema looks like.Dependencies I will consider in for managing complex form stateRedux-ormA small, simple and immutable ORM to manage relational data in your Redux store.It would be great if CRUD operations were managed with the model declaration with no need to write actions manually.Redux UIGood solution to separate the UI state from the application state.NormalizrLibrary suggested in the official redux documentation for normalizing the application state.Main dependencies for this projectReactReduxReact router v2Redux ThunkReact DnDReselectStyled componentsReact BootstrapBootstrap Material DesignJestConclusionRedux is a good solution for handling complex interface, it is very similar to flux architecture, but if I have to rewrite the application, I would do it in a different way.I would avoid to specify all the logic on the client, moving a part on the server side.A good approach I have seen in some projects, it is to dispatch the actions to the server and with a websockets connection, notify all the connected clients of the changes made.This way the client is responsible only to denormalize and normalize the state received by the server, handle the UI state and presenting the data.On the server side is much easier to handle relationships with an ORM provided by a web framework.This project has been of a great help to make me understand all the caveats redux can reserve for a medium size application.

I have been working on my first project with Redux for the last few weeks. An admin interface to manage and create questionnaires about patients data collection. When writing a small application…
Continue reading “Thoughts on Redux – Pietro Ghezzi – Medium”

Is Model-View-Controller dead on the front end? – Free Code Camp

Is Model-View-Controller dead on the front end?  by @alexnmoldovan #JavaScript #ReactJS

  • Similar to the Controller, the Model is breaking the Single Responsibility Principle, because you don’t have a separate way of managing UI State and Application State .
  • Developers didn’t seem to care much about the architecture itself.
  • With the popularity of React and component-based architecture , we saw the rise of unidirectional architectures for managing application state.
  • Our current discussion of front-end vs back-end architecture only came about in late 2010.
  • Through the five-year process, front-end architecture evolved into what it is today.

More and more front-end developers are adopting unidirectional architectures. So what’s the future for the classic Model-View-Controller (MVC) approach? In order to understand how we got to this…
Continue reading “Is Model-View-Controller dead on the front end? – Free Code Camp”

Is Model-View-Controller dead on the front end?

Is Model-View-Controller dead on the front end?:  by  @alexnmoldovan #reactjs #JavaScript

  • Similar to the Controller, the Model is breaking the Single Responsibility Principle, because you don’t have a separate way of managing UI State and Application State .
  • Developers didn’t seem to care much about the architecture itself.
  • With the popularity of React and component-based architecture , we saw the rise of unidirectional architectures for managing application state.
  • Our current discussion of front-end vs back-end architecture only came about in late 2010.
  • Through the five-year process, front-end architecture evolved into what it is today.

More and more front-end developers are adopting unidirectional architectures. So what’s the future for the classic Model-View-Controller…
Continue reading “Is Model-View-Controller dead on the front end?”

Functional programming on frontend with React & ClojureScript

“React meets ClojureScript” - An awesome introduction to ClosureScript and React

  • You simply update component internal state and then its UI is re-rendered .
  • To allow reuse of components each of the components has its own unique state accessed via this.state .
  • State of the card is then passed as an argument to function creating React components.
  • Any component that uses an atom is automagically re-rendered when it’s value changes.
  • Distinction between props and state is gone and you are free to use Reagent atoms in any way you prefer.

Blog about Scala, Akka & reactive, functional programming
Continue reading “Functional programming on frontend with React & ClojureScript”