Learn how to architect, not just framework.

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