1. backbone.JS and his friends
Dima Tarasenko, 2013

2. Skull bone...
Phalanges bone…
Rib bone…
Yes! Backbone!!!
Addy Osmani thinks about JS framework

3. Framework shouldn’t be slow and fat

4. Community
Good Documented
Fast
Intuitive
Success projects
Small
Examples
Framework should be …

5. Backbone.js is a lightweight JavaScript library that adds
structure to your client-side code. It makes it easy to
manage
and
decouple
concerns
in
your
application, leaving you with code that is more
maintainable in the long term. It’s a library, rather than a
framework, that plays well with others and scales
well, from embedded widgets to large-scale applications.
© Addy Osmani

6. So, it’s great!!!

7. Butt!

8. It’s only a code organizer!

9. backbone.JS
Collections
Routers
Models
Events
Views
History
Real Application
≈ 6/26 ≈ 23%
OOP core
Dependencies
Collections/Routers/Models..
Controllers
Layouts
Utilities
DOM Query
Error handling
Validators
REST support
Internalization
Application class
Normalization layer
Session management
Data Readers/Writers
Permissions management
Integration of all modules
Build system
Unit test framework
…

11. AAAAAAAAA!!!

12. Session management
OOP core
Dependency manager
Base classes
Controllers Build system
Utilities
Integration
Layouts
Unit tests
Permissions
REST support
UI components
Error handling
Validators
Oh my goodness…
Other…

13. Time lack
No consistency
Long code reviews
Our solutions are bad
No unit tests
A lot of bugs…
bugs…
bugs…
Oooops

14. What should we do?

15. Scenario 1: do it like real cowboys!!!

16. For example, N13 - OOP Library
•
•
•
•
•
•
•
•
•
•
Mixins classes
Statics support
String namespaces
Classical inheritance
Class configuration
Constructors
Super method calls
Mixins methods calls
Dependencies manager
Other libraries compatibility

17. N13.define('App.View', {
extend : 'Backbone.View',
statics : {
prop: 'hello',
func: function () {
return this.prop;
}
},
configs : {cfg: 'default'},
requires: ['App.Class1'],
init
: function () {
this.callParent();
}
});
// String namespace
// Parent class
var cl = new App.View({
cfg: 'new value'
});
// Instantiates class
// Class configuration
// Static property
// Static method
// Correct this - App.Class
//
//
//
//
Сonfiguration property
Will be loaded first
Constructor function
Calls Backbone.View::init()

18. N13.define('Mixin', {method: function () {return ' mixed';}});
N13.define('Base', {method: function () {return ' base'; }});
N13.define('App.Class', {
extend: 'Base',
mixins: {mix: 'Mixin'},
method: function () {
return 'Hello' +
this.callMixin('mix') +
this.callParent();
}
});
//
//
//
//
App.Class is a function
Parent class
List of mixins
Overridden method
var cl = new App.Class();
cl.method();
// App.Class instantiation
// returns 'hello mixed base'
// Calls method() from Base
// Calls method() from Mixin

19. Looks great!!!

20. Butt!

21. OOP Library is 1/26 part of real application

22. And three weeks of work

23. How developer thinks about himself

24. The reality

25. So, it’s possible, but it took a lot of time

26. Scenario 2: do it like real developers!

27. OOP core
V
V
V
Dependencies
V
V
V
Collections/Models/Routers/Controllers
V
V
V
Embedded Widgets
V*
V
V
Layouts
V
V
V
DOM Query
V
V
V
Error handling
X
X
X
Validators
V
V
V
REST support
V
V
V
Internalization
V
V
V
Application class
V
V
V
Session manager
X
X
X
Data management
V
V
V
Build system
V
V
X
Unit test
V
V
V
* - powerful feature

28. ExtJs
Dojo toolkit
Yahoo UI
backbone.JS
1 dev - $595,
20 devs - $11 185
free
free
free

29. So, what???!!!

30. With backbone, you should be true developer!

31. Or, you will get this…

32. So, how can we measure our developers?

33. Developers skills* at SoftServe
T
J
M
S
L
A
C
(Trainee)
(Junior)
(Mid)
(Senior)
(Lead)
(Architect)
(Chuck Norris)
=
=
=
=
=
=
=
0
1
2
3
4
5
16
* Pro adds 0.5 for every value

34. Project success formula

35. SoftServe success range
[ 0.8; ∞)
My success range
(1; ∞)

36. For example

37. Summary:
• With backbone.JS, we should invent the
wheel. It tooks a lot of time
• Frameworks are better then our “hand made”
• Skilled people - are very important

38. Questions?