pages + jQuery = interactions •Better user experience • Load only once • Faster interactions •Web apps getting more and more complex • More interactions • More customized •Share processing load with the user • Less requests to the servers • Only for API calls • #NoBackend movement 11
for organizing your frontend javascript code •Successful history of the MVC pattern on the backend (Rails) •Explosion of JavaScript MVC frameworks •Millions of TodoMVC apps 12
it should, or causing more at some level of scaling •They are all basically variations of the same architecture •The problem was: State NOBODY WAS SOLVING THE ISSUE 15
truth, the requests usually just read/write the database and finishes •On the frontend, one request (page), might be open for a long period of time, with many interactions and small state changing (popups open or closed, forms, buttons states) •On Backbone.js for example, it was said that the models were your single source of truth, but each model had its own state, synced via events. If you have multiple single source of truth, you have none •Models held state, Directives held state, DOM held state, the state was all over, making very hard to maintain •With two-way data binding you have to reconcile the DOM with the data on JavaScript, causing performance issues •Hidden/global events firing are very hard to follow WHY STATE IS THE PROBLEM 16
React was the VirtualDOM, this improved performance a lot, but the thing actually that made the most difference was… YOU CANNOT CHANGE THE DOM DIRECTLY! •No more state on the DOM •Goodbye jQuery •Needs to explicitly declare when a component changes state, using the word state (which helps raising red flag) •It forced the creation of Redux
no longe used, Redux, with had its architecture based on Elm architecture is definitively the winner, the only real competitor is MobX RefluxJS Flummox alt MobX
management issue, they started working on alternatives to React too •Angular, Ember and new frameworks such as Vue started using the VirtualDOM too, also using unidirectional dataflows with Redux or RxJS