Function-first vs feature-first

Function-first means that your project is structured by functions like actions, components, containers, modals, handler. However, there is the problem with scaling – it will become more and more difficult to maintain the overview since features are scattered through the whole codebase. Moreover, it usually violates the principle of locality (german: Lokalitätsprinzip): code which is executed together, should be also structured together.

Feature-first takes the whole other direction. The functions are scattered but the feature itself is self-contained and closed – actually the same structural approach you would choose for defining modules. In my experience this is a good way to structure an app which can easily scale – as long as (naming) conventions are defined on how the features/modules are structured. Inside a feature I would usually structure by function.

https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/

Article reference: https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/ (actually the article is about Ducks)

React: initial project setup, structure and architecture

Starting with React is quite easy. You just need to install the npm package and can create your components. However, unlike Angular, React is not providing a whole ecosystem which comes with a architecture and everything necessary like router, module system, components, templates already prepared for immediate start. Angular is a framework, whereas React is a library for creating ui interfaces! This is a huge difference (framework vs. library). In this short article I show an example architecture which you can use, if you don’t know how to structure your app.

Continue reading “React: initial project setup, structure and architecture”