JavaScript framework overview
1 like1,442 views
This document discusses different JavaScript frameworks and architectures for building applications, including MVC frameworks like Ember and Angular, Flux architectures, and reactive architectures. It provides examples of how data and events flow in applications built with Ember, Flux, and reactive architectures. Code examples are given for todo list applications built with Ember, Flux, and reactive architectures.
JavaScript framework overview
- 1. Learn how to architect, not just framework Javascript framework overview
- 2. Why jQuery is not enough Let’s assume that we need remote registration form. Pretty simple one.. $(‘#register.btn’).click(function(e) { e.preventDefault(); var data = {username: $(‘#username’).val(), fullname: $(‘#fullname’).val}; $.ajax({ type: “post”, url: “/register”, data: data }) }) It doesn’t look difficult...
- 3. However today is not a year 2000.. That’s why our form should be able to: 1. Check username availability while user types it 2. Show message that username is unavailable 3. Show the indicator when checking is in progress 4. Block registration button until all required fields are filled 5. Block registration button until username is unavailable 6. Block registration button until checking is not performed 7. Prevent double submit 8. Show indicator while registration is performing 9. Show feedback
- 4. In general it is something like that:
- 5. Existent JS framework solutions 1. MVC - Ember, Angular, Backbone... 2. Flux - Flux, ReFlux, Marty, Delorean, McFly, … 3. Reactive(do not mix up with react.js) - Rx, Bacon, Kefir 4. Reactive + Flux, Reactive + MVC - rx-flux, react-flux, thundercats, RxEmber It is obviously that we need architecture
- 6. 1. Define application status by url 2. Save data and interact with server 3. Keep application up-to-date - when data is changed it should be displayed and vice versa, when user does something data should be changed accordingly 4. Application architecture should be accurate - all elements in proper place 5. Suggest solutions for basic features Which problems should framework solve
- 7. MVC using Ember.js as a example - status change 1. URL is changed 2. Router chooses condition 3. Model is linked to controller 4. HTML elements are linked to controller States Controllers Models Views HTML
- 8. MVC using Ember.js as an example - events peocessing 1. User generates an event 2. Appropriate engine is searched in current context (it can be in View or Controller or Route) 3. Event changes model 4. Model is aware about all linked data and changes them as well 5. Changes render HTML States Controllers Models Views/Components HTML Связь идет через методы
- 9. Flux architecture 1. User generates Event 2. View is subscribed to Store changes 3. View gets Event and creates Action. 4. Dispatcher gets Action, determines what should be done. 5. Dispatcher requests required Store methods 6. Store changes saved data 7. Store reports that data is updated 8. Subscribed Views get new data from Store and show new interface. HTML View ActionCreator Dispatcher Store 1 Store 2 Data Observers Javascript event(onClick) Action: addItem
- 10. Observers Reactive architecture HTML View Dispatcher Storage HTML View HTML View Stream 1. View generates Actions which fall into Stream 2. Stream falls into Dispatcher 3. Being filtered and intersected streams generate conditions system 4. Observers are subscribed to Conditions 5. After Condition is being performed Observer changes database 6. And changes View. 7. View renders HTML
- 11. Code examples 1. http://todomvc.com/examples/emberjs/ 2. https://github.com/facebook/flux/tree/master/examples/flux-todomvc 3. https://github.com/AlexMost/RxReact/tree/master/hello_world/hello_world 4. https://github. com/AlexMost/RxReact/tree/master/hello_world2/hello_world2