Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium

Atomic design, Angular 2 and Redux  #angular #webdevelopment #redux #design #reactjs

  • How do you setup the frontend to be quick in prototyping?As a ux’er, you probably heard of Brad Frost and his idea of Atomic Design.
  • It’s basically a design system to divide your frontend into components.
  • And because it is a ux design system, communicating with the ux’er is very easy.
  • When an event is needed in one of the components, it just fires it to the Redux store, the centralised state is updated and all subscribed components are updated afterwards.
  • In my experience, atoms and molecule level for the input/output system and the organisms and templates to the redux store.

A match made in heaven. Last year I got the change to start a whole new product in the rol of frontend architect & developer. The starting team was only a product owner, ux’er and myself to start off…

@_adeeb: Atomic design, Angular 2 and Redux #angular #webdevelopment #redux #design #reactjs

Atomic design, Angular 2 and Redux

A match made in heaven. Last year I got the change to start a whole new product in the rol of frontend architect & developer. The starting team was only a product owner, ux’er and myself to start off the frontend itself. Angular 2 was still in beta, but we gave it a change and I was playing with it from the very beginning when it became available and liked where it was going.

The project was still in the early stage. Some designs of a previous project where available, but the concept was not completely thought through yet. So a lot of changing and discussions going on. How do you deal with that technology wise? How to adapt to changes very quickly? How do you setup the frontend to be quick in prototyping?

As a ux’er, you probably heard of Brad Frost and his idea of Atomic Design. It’s basically a design system to divide your frontend into components. His statement is that we should build systems of components and not pages anymore. And because Angular is very component based, it should be a nice fit. And because it is a ux design system, communicating with the ux’er is very easy. Keep in mind that from a ux point of view, you are still creating pages to the user. But internally you work and think in components.

All components are now build up as a atom, molecule, organism or template and as soon as we add a route to the template, it becomes a page, great! But how to deal with state in the angular app? All those loose components, it can become a nightmare quickly. One options is to use the input and output options of angular. If you do that with all the components, the template, as the latest in line, becomes responsible for all state on the page. And second to that, all components have dependencies to each other. Now, if the ux’er wants to change the screen, the impact on the technology can be very big! It would be nice if we could have way less dependencies.

This is where Redux comes in. In short, Redux is a way to centralise all state to one place, the store. All components can now subscribe to this state and keep themselves up to date. When an event is needed in one of the components, it just fires it to the Redux store, the centralised state is updated and all subscribed components are updated afterwards. No more input and output dependencies between the components. Very nice, completely decoupled. Well…not quite. If you do atomic design (and we do), you end up with a large amount of components. If you subscribe all of them to the store of Redux, then the performance will probably suffer a lot. So how to fix this?

The anwer is what you expect, something in the middle. For very small components, you use the input/output way. This keeps small components simple. For the larger components, you use the store. In my experience, atoms and molecule level for the input/output system and the organisms and templates to the redux store. Where template is debatable if it needs state. If your design is very clean, you probably use templates only to position the organisms.

Now, if the system is growing quickly, there is one thing to keep in mind and that is modules. Angular offers one extra level of abstraction beyond atomic design. My take on it, is to use modules on a very high level of functional decomposition. And because modules are the basis for lazy loading in Angular, you probably one to look at your url build up for this. In the prototyping phase, you probably don’t start off with modules. It’s easy to add later with the component setup.

So, there you have it. A nice way to get a good workflow between ux and development. Now you have room to experiment and prototype a new frontend. And because you use Redux for state, it is easy to synchronise the state to the backend system as soon as it becomes available. In the mean time, you can just drop in the mocking system of Angular itself.

Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium