This document provides an overview and comparison of popular JavaScript libraries, frameworks, and toolkits. It defines libraries as bits of reusable functionality, frameworks as universal reusable platforms for building applications, and toolkits as a set of independent libraries designed to work together. The document then compares libraries and frameworks like jQuery, MooTools, AngularJS, and Backbone in terms of features, performance, size, modularity, object-oriented programming support, code structure, utilities, and user interface capabilities. It provides tips on choosing a library or framework based on factors like project type and size.

1. choosing the right
JavaScript
Library/Framework/Toolkit
for your project

2. Presentation goals
● Give directions
● Compare few major libraries, frameworks &
toolkits
● Statistics

3. Who am I?

7. Your project?
● Type
● How big is it
● Features
● Future expectations

8. Definitions
What is library?
What is framework?
What is toolkit?

9. Library
Bits of functionality that you can call.
● jQuery

10. Framework
Universal, reusable software platform,
foundation of applications, products and
solutions.
● MooTools
● AngularJS
● BackboneJS

11. Toolkit
A set of independent libraries, designed to work
well together, that you can pick and choose
from.
● Dojo
● YUI

12. Features

13. Comparison table
● all available over CDN*
● all cross-browser**

14. Performance, Size,
Modularity

15. Selector Engine performance

16. Size
● Size does not
matter if the
resources are
distributed over
CDN
● cdnjs.com

17. Modularity
● MooTools provide configurable download
● Async Module Definition - YUI, Dojo

18. OOP, inheritance,
code reuse

19. jQuery's bad practices
The never-ending callback nesting

20. Code structure
● Classes for reusable components
● Constructor options
● Use synchronization API instead of nested
callbacks

21. Code structure
The MooTools way

22. Code structure

23. Utilities

24. Utilities
● A utility should first try to delegate to native
and if it fails, use it’s own implementation
● The more utilities, the better

25. Commonly needed utilities
● String
trim() hyphenate() camelCase() escapeRegExp()
toInt() toFloat() substitute()
● Object & Array
each() some() every() filter() contains()
map() empty() append()

26. Commonly needed utilities
● Object
values() keys() clone() merge()
toQueryString()
● Array
associate() clean() unique() flatten()

27. User Interface

28. User Interface
● Should be easy to style
(jQueryUI provides a great theme development tool)

29. User Interface
● API should provide full control
○
destroy()
○ DatePicker should be able to have its value set from
outside
○ Tabs should provide API for selecting tab
dynamically

30. MV*, or not MV*?
that is the question

31. When to use MV*
● AJAX-heavy web apps
● JSON data structure
● Need to render data in different ways on the
same page
● A lot of user interaction that triggers updates

32. When NOT to use MV*
● Your server cannot handle all the requests
● Your app has little interactions on the page
● Data changes rarely
● MV* may be overkill for small projects
○ Heavy to implement - if you could have gotten away
with 1 class, you now have 3

33. You can always combine MV*
with some other framework
Ем виси, ем не виси :)

34. Usage, Support,
Community

35. Releases
● When was the latest version released?
● How often do they release new version?
● Are there currently any betas?
● Is there huge incompatibility between
versions?

36. Support
● How many opened issues are there?
● Is the documentation rich & easy to use?
● How steeper is the learning curve?

37. Community
● Which big projects use the framework?
● How big & active the community is?

38. Usage Statistics
Statistics from
goo.gl/lJrPpl

39. Tips

40. Tips
● Spend some time browsing the source code
● Read other people’s opinion, but don’t count
on them!

41. Tips
● Write a module/component for your App in
plain JavaScript or pseudo code; then
migrate to the selected library/framework
and see how it feels
● TodoMVC has implementations in several
MV* frameworks - check it out todomvc.com

42. Are there any Questions?
****
, ask me :)

43. Thanks for listening!
github.com/ickata
wpbgug.org
blog.ickata.net
sitekreator.com