choosing the right

JavaScript
Library/Framework/Toolkit
for your project
Presentation goals
● Give directions
● Compare few major libraries, frameworks &
toolkits
● Statistics
Who am I?
Your project?
● Type
● How big is it
● Features
● Future expectations
Definitions
What is library?
What is framework?
What is toolkit?
Library
Bits of functionality that you can call.
● jQuery
Framework
Universal, reusable software platform,
foundation of applications, products and
solutions.
● MooTools
● AngularJ...
Toolkit
A set of independent libraries, designed to work
well together, that you can pick and choose
from.
● Dojo
● YUI
Features
Comparison table

● all available over CDN*
● all cross-browser**
Performance, Size,
Modularity
Selector Engine performance
Size
● Size does not
matter if the
resources are
distributed over
CDN
● cdnjs.com
Modularity
● MooTools provide configurable download

● Async Module Definition - YUI, Dojo
OOP, inheritance,
code reuse
jQuery's bad practices
The never-ending callback nesting
Code structure
● Classes for reusable components
● Constructor options
● Use synchronization API instead of nested
callbac...
Code structure
The MooTools way
Code structure
Utilities
Utilities
● A utility should first try to delegate to native
and if it fails, use it’s own implementation
● The more utili...
Commonly needed utilities
● String
trim() hyphenate() camelCase() escapeRegExp()
toInt() toFloat() substitute()

● Object ...
Commonly needed utilities
● Object
values() keys() clone() merge()
toQueryString()

● Array
associate() clean() unique() f...
User Interface
User Interface
● Should be easy to style
(jQueryUI provides a great theme development tool)
User Interface
● API should provide full control
○

destroy()

○ DatePicker should be able to have its value set from
outs...
MV*, or not MV*?
that is the question
When to use MV*
● AJAX-heavy web apps
● JSON data structure
● Need to render data in different ways on the
same page
● A l...
When NOT to use MV*
● Your server cannot handle all the requests
● Your app has little interactions on the page
● Data cha...
You can always combine MV*
with some other framework

Ем виси, ем не виси :)
Usage, Support,
Community
Releases
● When was the latest version released?
● How often do they release new version?
● Are there currently any betas?...
Support
● How many opened issues are there?
● Is the documentation rich & easy to use?
● How steeper is the learning curve...
Community
● Which big projects use the framework?
● How big & active the community is?
Usage Statistics
Statistics from
goo.gl/lJrPpl
Tips
Tips
● Spend some time browsing the source code
● Read other people’s opinion, but don’t count
on them!
Tips
● Write a module/component for your App in
plain JavaScript or pseudo code; then
migrate to the selected library/fram...
Are there any Questions?
****

, ask me :)
Thanks for listening!
github.com/ickata
wpbgug.org
blog.ickata.net
sitekreator.com
Choosing the right JavaScript library/framework/toolkit for our project
Choosing the right JavaScript library/framework/toolkit for our project
Choosing the right JavaScript library/framework/toolkit for our project
Upcoming SlideShare
Loading in...5
×

Choosing the right JavaScript library/framework/toolkit for our project

2,102

Published on

Tips & directions what to look for in a framework/lib/toolkit before making the choice.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,102
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Choosing the right JavaScript library/framework/toolkit for our project

  1. 1. choosing the right JavaScript Library/Framework/Toolkit for your project
  2. 2. Presentation goals ● Give directions ● Compare few major libraries, frameworks & toolkits ● Statistics
  3. 3. Who am I?
  4. 4. Your project? ● Type ● How big is it ● Features ● Future expectations
  5. 5. Definitions What is library? What is framework? What is toolkit?
  6. 6. Library Bits of functionality that you can call. ● jQuery
  7. 7. Framework Universal, reusable software platform, foundation of applications, products and solutions. ● MooTools ● AngularJS ● BackboneJS
  8. 8. Toolkit A set of independent libraries, designed to work well together, that you can pick and choose from. ● Dojo ● YUI
  9. 9. Features
  10. 10. Comparison table ● all available over CDN* ● all cross-browser**
  11. 11. Performance, Size, Modularity
  12. 12. Selector Engine performance
  13. 13. Size ● Size does not matter if the resources are distributed over CDN ● cdnjs.com
  14. 14. Modularity ● MooTools provide configurable download ● Async Module Definition - YUI, Dojo
  15. 15. OOP, inheritance, code reuse
  16. 16. jQuery's bad practices The never-ending callback nesting
  17. 17. Code structure ● Classes for reusable components ● Constructor options ● Use synchronization API instead of nested callbacks
  18. 18. Code structure The MooTools way
  19. 19. Code structure
  20. 20. Utilities
  21. 21. Utilities ● A utility should first try to delegate to native and if it fails, use it’s own implementation ● The more utilities, the better
  22. 22. Commonly needed utilities ● String trim() hyphenate() camelCase() escapeRegExp() toInt() toFloat() substitute() ● Object & Array each() some() every() filter() contains() map() empty() append()
  23. 23. Commonly needed utilities ● Object values() keys() clone() merge() toQueryString() ● Array associate() clean() unique() flatten()
  24. 24. User Interface
  25. 25. User Interface ● Should be easy to style (jQueryUI provides a great theme development tool)
  26. 26. 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
  27. 27. MV*, or not MV*? that is the question
  28. 28. 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
  29. 29. 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
  30. 30. You can always combine MV* with some other framework Ем виси, ем не виси :)
  31. 31. Usage, Support, Community
  32. 32. 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?
  33. 33. Support ● How many opened issues are there? ● Is the documentation rich & easy to use? ● How steeper is the learning curve?
  34. 34. Community ● Which big projects use the framework? ● How big & active the community is?
  35. 35. Usage Statistics Statistics from goo.gl/lJrPpl
  36. 36. Tips
  37. 37. Tips ● Spend some time browsing the source code ● Read other people’s opinion, but don’t count on them!
  38. 38. 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
  39. 39. Are there any Questions? **** , ask me :)
  40. 40. Thanks for listening! github.com/ickata wpbgug.org blog.ickata.net sitekreator.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×