MVC is dead, MVC will remain dead. It served us well over those years but it’s time to explore and use better alternatives for state management in AngularJS.
\nThis article is a follow up of the talk that i give for AngularJSDublin. I have to thank all the guys attending the meetup for the awesome feedback that i received.
\nLet’s start by analyzing very high level the evolution of the FE architecture patterns.
\nBefore 2010 we can say that Jquery was the absolute king on the FE. Who doesn’t remember those days i can tell you it was mainly spaghetti code
\nIn 2010 frameworks like Backbone started to introduce MVC in their core, what they called MV* most of the time.
\nBackbone and other frameworks a like took this pattern from the BE, and it was great thanks to the big separations of concerns that MVC brought to the FE.
\nIn 2012 AngularJS v1 was released, 4 years ago really that long. Also AngularJS followed the MV* approach introducing something even more powerful on top of it.
\n\n\nAny data-related changes affecting the model are immediately propagated to the matching view(s), and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When app data changes, so does the UI, and conversely —Stackoverflow
\n
Now all our views will update when the model change and vice versa. That was the real superpower of angular.
\nIf we take 2 way binding and apply it over AngularJS components, if we update a property on the child it will be updated also on the parent and same thing apply for parent child.
\nThis is a common use of two way binding for components communication.
\n.component('parent', {\n controller() {\n }\n})\n\n.component('child', {\n bindins: {\n twoWay: '='\n },\n controller() {\n }\n});<!-- Parent -->\n<child\n two-way="$ctrl.twoWay">\n</child>\n\n<!-- Child -->\n<input ng-model="$ctrl.twoWay" type="text">I like to compare for this 2 way binding to alcohol:
\nNow that we have introduced one way dataflow applied to components we can also kill MVC directly. The problem is not really about MVC, rather that FE apps have become more and more complex over the years and MVC has always coupled our controllers directly to our views with the consequences that our code cannot respond to rapid changes as it’s usually the case.
\n\n\nRedux is a predictable state container, the purpose of Redux is to make state mutations predictable.
\n
The three principles of Redux are:
\nSingle source of truth
\nThe state of your app is stored inside a single store
\nState is read only
\nThe only way to change the state is to emit an action which is an object describing what happen.
\nChanges are made with pure functions
\nTo specify how the state is transformed by actions you write pure reducers.
\nA reducer is a pure function that take the previous state and an action and return the next state.
\nIf you want to learn more about Redux i strongly recommend to read the online documentation that you can find at http://redux.js.org/
\nOn angular 1 applications you can use ng-redux a relative small library that will connect the store to the angularjs world.
\nHere’s is an example on how to connect to create a store:
\n.config(function($ngReduxProvider) {\n $ngReduxProvider.createStoreWith(reducers, middlewares, enhancer, {});\n})createStoreWith take as first argument a single reducer composed of all other reducers. To check the additional arguments you can have a look at the documentation here\nhttps://github.com/angular-redux/ng-redux.
Let’s take a look on how to connect a component to the store
\nexport const ReduxComponent = {\n template,\n controller($ngRedux, ReduxActions) {\n 'ngInject';\n\n const mapStateToThis = (state) => {\n return {\n slice: state.slice\n };\n };\n\n this.unsubscribe = $ngRedux.connect(\n mapStateToThis,\n ReduxActions)((state) => {\n Object.assign(this, state);\n });\n }\n};When the component initialize we connect to the store using $ngRedux.connect where we pass a function to slice the state and the actions that we want to connect and will return a function with the state sliced.
The actions will be available directly to the controller of the connected component so you can just call the actions\nto trigger them.
\nRemember always to unsubscribe from further store updates using the function returned from the connect, just adding on the eg:
\ncontroller($ngRedux, ReduxActions) {\n ...\n this.$onDestroy = () => {\n this.unsubscribe(); \n };\n}All ng-redux documentation covers only the case of reducers defined at the start of our application. For simple application this is enough to cover your needs but on large applications where you are probably using ocLazyLoad there will be scenarios where you don’t want to load reducers upfront, but instead leveraging lazy loading of modules, the module itself should add a reducer dinamically to the store.
\nFor dinamically load reducers just using redux you can follow this stackoverflow (http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application).
\nNow in AngularJs we have another layer on top of Redux that initialise the store for us.\nA solution which i need to thank Krisztián Huterják for it a coworker of mine is the following:
\n.config(function($ngReduxProvider) {\n 'ngInject';\n $ngReduxProvider.createStoreWith(state => state, middlewares, enhancer, {});\n})We initialize the store with the reducers that we have available at that time, in this case its just the identity function. This code should be included into your main module that is always loaded.
\nThen we decorate $ngRedux adding the ability to addReducers on the fly.
.config(($provide) => {\n $provide.decorator('$ngRedux', ($delegate) => {\n const reducers = {};\n\n const rootReducer = (state, action) => {\n const keys = Object.keys(reducers);\n if (keys.length === 0) {\n return Object.assign({}, state);\n }\n const nextState = Object.assign({}, state);\n\n keys.forEach(key => {\n nextState[key] = reducers[key](state[key], action);\n });\n return nextState;\n };\n\n $delegate.addReducers = (reducersObject) => {\n Object.assign(reducers, reducersObject);\n };\n\n $delegate.replaceReducer(rootReducer);\n\n return $delegate;\n });\n})And when we need to add a new reducer we then simply call addReducers.
.run(function($ngRedux) {\n $ngRedux.addReducers(asyncReducer);\n})\n\nMVC is dead, MVC remains dead, and we have killed him. How shall we model our apps, the murderers of all murderers!
\nWhat was the holiest and mightiest of all that the frameworks had, yet owned has bled to death under our typing.
\nWho will wipe this pattern off to use?
\nWhat approach is there for us to use ourselves?
\nWhat flow of atonement, what sacred pattern shall we to invent?
\nIs not the greatness of the deed too great for us?
\nMust we ourselves embrace the flow simply to appear worthy of it?
\n
This is a paraphrase of God is dead from Thus spoke Zarathustra, instead of embracing nihilism you can embrace Redux.
\nThank you.
\n