What are JavaScript libraries? How do you choose JavaScript library? How JavaScript libraries are organized? This presentation tries to answer these questions
4. Often one library is
compared with other.
Comparing a jQuery library
with Backbone or Angular is
JavaScript libraries
work at different level
of abstraction.
meaningless. It is like
comparing a processor with
motherboard. You can
compare two processors or
two motherboards but not
both…
5. So exactly, how does
different libraries and
tools fit into front-end
stack?
6. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
7. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Module
loaders
Base / DOM libraries
Core JavaScript
Web browser
JavaScript
engine provided
by the browser
8. Core JavaScript engine
• Every browser vendor provides
JavaScript engine
• Varying degree of JavaScript support
by engines
• Sometimes some APIs are buggy or
incomplete
• Major engines are Chakra, V8,
SpiderMonkey, Nitro, Carakan, etc.
9. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Module
loaders
Hide browser
differences &
provide
consistent cross
Core JavaScript
Web browser
browser API.
10. Base/DOM manipulation libraries
• Provide abstraction over Core JavaScript
APIs and functions
• Mask browser differences to a larger
extent
• Ideal for basic operations like DOM, CSS,
events, animations & Ajax manipulation
• Provide little help for code organization
Few popular libraries are:
11. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
12. UI/Widget libraries(toolkits)
• Provide out of box reusable UI
widgets/components for rapidly building
web applications
• Some libraries provide features for
building desktop user experience
• Often called toolkits rather than libraries
as utility part is often miniature as
compared to component part
Few popular libraries are:
13. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
14. Web application libraries (MV*)
• Provide features for writing maintainable
& organized JavaScript code
• Client heavy applications usually suffer
from code maintenance as JavaScript
leaves modularization to programmers
• Few libraries heavily influence the design
of application while other libraries leave
design decisions to developers.
Few popular libraries are:
15. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
16. Graphics libraries
• Provide abstraction over raw Canvas, SVG
and WebGL APIs
• Used for online games, image editors and
data visualization
• Object oriented libraries but by no means
substitute for building web applications.
Do not even compare with web application
libraries
Few popular libraries are:
17. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
18. JavaScript module loaders
• Library dependencies and JavaScript code
gets very nasty as code base increases
• Module loaders provide solution to
address code dependency issues
• Loaders works seamlessly with modern
MV* libraries where everything is
organized as modules or components
Few popular libraries are:
19. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
20. JavaScript package managers
• Not really part of web application but part
of project development ecosystem
• Provide tools to install, upgrade, configure
& remove resources used by the project
• It also supports dependency management
and versioning
Few popular managers are:
21. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
22. JavaScript build tools
• What Ant and Maven to Java is what build
tools to JavaScript
• Build tools automates various JavaScript
tasks like concatenating, minifying, JSHint
files and other resources. Also automates
Unit testing of code.
• They are not directly used by web
application but external to application just
like package managers.
Few popular tools are:
23. Web Application
Widget (UI)
toolkits
Build tools
Full stack
frameworks
Package
managers
Web app
libraries
(MV*)
Graphics
libraries
Base / DOM libraries
Core JavaScript
Web browser
Module
loaders
24. Full stack frameworks
• There are some that are more than simple
libraries or toolkits. Thus they are
frameworks
• They provide support for many front-end
tasks
• There is no such thing as perfect
framework that can cater to every type of
need
Few popular frameworks are:
26. JavaScript polyfills
• Polyfills is basically a JavaScript code that
emulates standard API that is lacking in
some older browsers
• Some polyfills also try to fix broken API in
the web browsers
• There are polyfills for almost every
HTML5 feature and number is quite large
Modernizr is not a JavaScript polyfill. It is
very small library that detect native
implementation of new features. In
Progressive Enhancement technique,
developer tests for certain feature using
Modernizr and if absent loads the required
polyfill conditionally.
27. Functional programming
• Along with object oriented nature,
JavaScript also has rich heritage of
functional programming
• In certain cases, functional programming is
much more natural than OOP
• Functional reactive programming uses
functional programming as its basic
building block
Few popular reactive & functional
libraries are:
28. Unit testing libraries
• Almost half of the JavaScript code is never
unit tested by developers as JavaScript is
still considered as scripting only language
• In Test Driven Development (TDD), tests
are written before any functional code
• As TDD and client heavy application gets
more popular, need for unit testing of
JavaScript code will be ever higher
Few popular unit testing libraries are:
30. Some libraries are natural fit
Principle of
Natural fit
for certain tasks. For
example, Backbone.js is
apparent choice for RESTful
JSON applications.
Frameworks like Angular,
Backbone, etc. are good
choice for building single
page applications.
31. Depending upon the
requirements, it makes sense
to use full stack solutions
Full stack
heavy
libraries
that also direct application
design; while in other cases
lightweight solutions are
much better where
architectural design is left
entirely to developers.
Bare minimum
lightweight
libraries
32. Especially in case of rapid
prototyping, it helps
development teams to select
libraries with less learning
curve & easier adaptation.
Library like knockout or
Kendo UI is easier to catch on
for WPF or Silverlight
developers as their
philosophy is based on same
MVVM pattern.
T
eam
adaptability &
learning curve
33. But these are just guidelines
and one should not treat
them like lines carved in
stone. They are meant to be
bent as required.
34. But before you do anything with JavaScript libraries, do yourself a favor by asking this
question that will save you from many troubles in future
Do you really need a third-party library?
Should you build your custom library?
35. 1.
Libraries create code lock-ins. Not
possible to replace easily
2.
Future can never be anticipated
when choosing a certain library.
Sometimes libraries are forced to
solve the problems they were not
intended to solve in the beginning;
resulting in bloated code base
3.
Many library version upgrades are
not backward compatible. APIs
break easily
Some problems with
third-party libraries
36. 4.
Abstractions provided by libraries
make developers ignore
performance issues
5.
For non-expert developers who
are not aware of JavaScript &
browser internals use library APIs
in not so optimal way.
6.
Writing clean, efficient &
maintainable code is the
responsibility of developers. In the
end, libraries are blamed for any
performance issues.
Some problems with
third-party libraries
37. In the end, the only
conclusion is choose wisely