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?

4.
Who am I?

5.
Your project?
•
•
•
•
Type
How big is it
Features
Future expectations

6.
Definitions
• What is library?
• What is framework?
• What is toolkit?

7.
Library
Bits of functionality that you can call.
• jQuery

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

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

10.
Features Comparison Table
• all available over CDN*
• all cross-browser**

11.
Selector Engine performance
• all available over CDN*
• all cross-browser**

12.
Size
• Content
• Size does not matter much
if the resources are
distributed over CDN
• cdnjs.com

13.
Modularity
• MooTools provide configurable download
• Async Module Definition - YUI, Dojo

14.
Code structure - jQuery's bad practices
The never-ending callback nesting

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

16.
Code structure
The MooTools way

17.
Code structure
The MooTools way

18.
Utilities
• A utility should first try to delegate to native
and in case it fails - use it’s own implementation
• The more utilities, the better

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

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

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

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

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

24.
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

25.
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
o Heavy to implement - if you could have gotten away
with 1 class, you now have 3

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

27.
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?

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

29.
Community
• Which big projects use the framework?
• How big & active the community is?

30.
Usage Statistics
• Content
• Statistics from
goo.gl/lJrPpl

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

32.
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 at todomvc.com

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

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

35.
And thanks to our Sponsors:
Diamond Sponsor:
Gold Sponsors:
Silver Sponsors:
Technological Partners:
Bronze Partners:
Swag Sponsors:
Media Partners: