JSFoo Coimbatore 2019

Adding Controller to the party of Components, Containers, Actions, Reducers...

Have you ever feel like life cycle methods in react components is kind of poluting the component and also increasing the file size? Well, in our project we also come across such scenarios and we thought of doing something about it.

We came up with a solution: we created an open source library(react-view-controller), which delegates all the life cycle methods to Controller making View as dumb as possible. All the logic is contained in the controller. Event handling is also taken care by the controller.

Benifits:

1. Spliting component files on basis of single responsibility.
2. View will only worry about rendering while the Controller will take care of providing the data and handling the events.
3. Better and easier code maintenance.
4. TDD becomes easy. Unit testing Components is super simple.

We are using this pattern in our projects and are absolutely loving it.

Outline

• Why Controller is needed?
• How Controller solves the problem
• Using open source library
• Integration with Redux, other Higher Order Components
• Testing component and controller

Requirements

Participants should have knowledge of React and a little bit of typescript.

Speaker bio

I am software developer in ThoughtWorks with 6 years of experience.
I have worked on various technologies, starting with Java, Android; then moved to Html, CSS, JS, Typescript, React.
Once I entered JS world, I never went back. Absolutely in love with JS.

Links

• https://en.wikipedia.org/wiki/Separation_of_concerns
• https://en.wikipedia.org/wiki/Model–view–controller

Slides

https://docs.google.com/presentation/d/1jVgxWT6D6C8Xgr-pfcRekUOVV5gi3wHlGIhkbUazqCc/edit?usp=sharing