Your SlideShare is downloading. ×
0
About JavaScript Libraries
Too many choices
eventually leads to

ambiguity and blurring
use case boundaries.
Often one library is
compared with other.

Comparing a jQuery library
with Backbone or Angular is
JavaScript libraries
wor...
So exactly, how does

different libraries and
tools fit into front-end
stack?
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Core JavaScript engine
• Every browser vendor provides

JavaScript engine
• Varying degree of JavaScript support
by engine...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Base/DOM manipulation libraries
• Provide abstraction over Core JavaScript
APIs and functions
• Mask browser differences t...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
UI/Widget libraries(toolkits)
• Provide out of box reusable UI
widgets/components for rapidly building

web applications
•...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Web application libraries (MV*)
• Provide features for writing maintainable
& organized JavaScript code
• Client heavy app...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Graphics libraries
• Provide abstraction over raw Canvas, SVG
and WebGL APIs
• Used for online games, image editors and
da...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
JavaScript module loaders
• Library dependencies and JavaScript code
gets very nasty as code base increases
• Module loade...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
JavaScript package managers
• Not really part of web application but part
of project development ecosystem
• Provide tools...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
JavaScript build tools
• What Ant and Maven to Java is what build
tools to JavaScript
• Build tools automates various Java...
Web Application
Widget (UI)
toolkits

Build tools
Full stack
frameworks
Package
managers

Web app
libraries
(MV*)

Graphic...
Full stack frameworks
• There are some that are more than simple
libraries or toolkits. Thus they are

frameworks
• They p...
Closer look at
other JavaScript

libraries
JavaScript polyfills
• Polyfills is basically a JavaScript code that
emulates standard API that is lacking in

some older ...
Functional programming
• Along with object oriented nature,
JavaScript also has rich heritage of

functional programming
•...
Unit testing libraries
• Almost half of the JavaScript code is never
unit tested by developers as JavaScript is

still con...
So how do you

choose the right
library?
Some libraries are natural fit

Principle of
Natural fit

for certain tasks. For

example, Backbone.js is
apparent choice ...
Depending upon the
requirements, it makes sense
to use full stack solutions

Full stack
heavy
libraries

that also direct ...
Especially in case of rapid
prototyping, it helps

development teams to select
libraries with less learning
curve & easier...
But these are just guidelines
and one should not treat
them like lines carved in
stone. They are meant to be
bent as requi...
But before you do anything with JavaScript libraries, do yourself a favor by asking this
question that will save you from ...
1.

Libraries create code lock-ins. Not
possible to replace easily

2.

Future can never be anticipated
when choosing a ce...
4.

Abstractions provided by libraries
make developers ignore

performance issues
5.

For non-expert developers who
are no...
In the end, the only
conclusion is choose wisely
Author:
Harshal Patil
@softHarsh
http://definitelysimple.com
http://www.linkedin.com/in/hapatil
About javascript libraries
Upcoming SlideShare
Loading in...5
×

About javascript libraries

2,162

Published on

What are JavaScript libraries? How do you choose JavaScript library? How JavaScript libraries are organized? This presentation tries to answer these questions

Published in: Technology

Transcript of "About javascript libraries"

  1. 1. About JavaScript Libraries
  2. 2. Too many choices eventually leads to ambiguity and blurring use case boundaries.
  3. 3. 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…
  4. 4. So exactly, how does different libraries and tools fit into front-end stack?
  5. 5. 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
  6. 6. 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
  7. 7. 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.
  8. 8. 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.
  9. 9. 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:
  10. 10. 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
  11. 11. 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:
  12. 12. 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
  13. 13. 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:
  14. 14. 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
  15. 15. 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:
  16. 16. 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
  17. 17. 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:
  18. 18. 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
  19. 19. 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:
  20. 20. 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
  21. 21. 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:
  22. 22. 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
  23. 23. 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:
  24. 24. Closer look at other JavaScript libraries
  25. 25. 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.
  26. 26. 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:
  27. 27. 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:
  28. 28. So how do you choose the right library?
  29. 29. 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.
  30. 30. 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
  31. 31. 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
  32. 32. But these are just guidelines and one should not treat them like lines carved in stone. They are meant to be bent as required.
  33. 33. 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?
  34. 34. 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
  35. 35. 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
  36. 36. In the end, the only conclusion is choose wisely
  37. 37. Author: Harshal Patil @softHarsh http://definitelysimple.com http://www.linkedin.com/in/hapatil
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×