About javascript libraries
7 likes3,020 views
The document discusses the complexity of choosing among various JavaScript libraries and their roles within the front-end stack, highlighting their differing levels of abstraction and suitability for different tasks. It emphasizes the importance of selecting the right library based on project requirements while considering factors like team adaptability and the learning curve, as well as the potential pitfalls of relying on third-party libraries. Ultimately, it encourages developers to critically evaluate their need for external libraries versus creating custom solutions to avoid issues like code lock-in and performance problems.
About javascript libraries
- 3. Too many choices eventually leads to ambiguity and blurring use case boundaries.
- 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:
- 25. Closer look at other JavaScript libraries
- 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:
- 29. So how do you choose the right library?
- 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