Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


JS libraries and frameworks

A quick and dirty intro to the magic of ready-made code

Barbara Cassani

on 3 April 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JS libraries and frameworks

Questions? libraries js libraries and frameworks Provide reusable pieces of code intended for common, specific purposes. Do I really need a library? There's nothing that cannot be done entirely in vanilla js. How to choose a generic toolkit Does it do what I need?
Does it know its place?
Am I allowed to use it? What does a library do Generalist toolkits: Dojo, jQuery, YUI, Mootools thou shall not
reinvent the wheel! toolkits and frameworks Libraries that cover all the needs for the development of an application weight of the library
stylistic and semantic constraints
licensing issues ease and speed of development
stylistic and semantic consistency
community and/or commercial support Provides easy cross-browser
compatibility Provides a convenient
API for AJAX operations! Custom event patterns Dom manipulation! And much more!

Mimicking of classical inheritance
Conditional loading
Methods for arrays / objects
GOTO... Your mileage may vary! Do I need / want..
Custom events
Etc... How big is the library?
Can it be loaded in a modular fashion?
Does it extend the prototype of native and dom objects?
Does it pollute the global scope?
Does it leak memory? Is it licensed for
personal or commercial use?
Is it free? They all provide a standard sets of functionalities: dom manipulation, ajax request/response, feature sniffing, css selectors, cross-browser dom events and visual effects (animations). But there are differences! MVC Frameworks: Backbone, Ember, Knockout, Angular Fairly ubiquitous
Doesn't provide a templating engine, but can be integrated with one if needed
Great router capabilities: retains the navigation history, saves and restores the state of the page
Allows a great deal of flexibility in its use, there's very little prescriptive about it
Has jQuery and Underscore as dependencies
MVP pattern Two-way data-binding.
State management (is a user logged out or logged in), Auto-updating templates
Computed properties (firstName + lastName = fullName)
Templating through integrated Handlebars
Has jQuery as a dependency
MVC pattern Maintained by Google
Two-ways data binding (dom contains references to variables, and variables in the js contains references to the dom)
Uses custom attributes in the templates
Has jQuery as a dependency (included)
MVC pattern Declarative bindings
Automatic UI refresh (when the data model's state changes, the UI updates automatically)
Dependency tracking
No dependencies
MVVM pattern Specialized libraries: underscore, requirejs,
modernizr Ubiquitous file and module loader
Can be used to manage dependencies inside a web application Feature detection
Browser polyfill for CSS3 and HTML5 And you can always build your own! Extends the DOM
Simple to learn
Ultra lightweight Maintained by Yahoo!
Powerful custom events and inheritance
Modular loading
Routing capabilities
Consistent code style / quality
May be used as a complete MVC framework Easy to learn
Powerful tools for DOM manipulation
Ubiquitous -- it's a dependency for many MVC frameworks
Has zillions of plugins
No direct support for inheritance
No direct support for custom events
Plugins/Widgets can be poor quality License: MIT License: MIT License: MIT License: MIT License: MIT License: BSD License: MIT Modular loading
Can be used with Adobe Air
Can be run on nodejs
Is around since 2004 License: BSD "Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.
Underscore provides 80-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf." License: MIT License: BSD and MIT License: MIT These frameworks provide structure and utilities for building single page applications: they prescribe or enforce separation of concerns between business logic and presentation data.
They always include some form of data binding, event bus, templating and browser history management.
Data binding can be one way (the data structure contains references to the dom, or the dom contains references to the data structure), or two-way (both bindings).

They can be used in conjunction with a generic toolkit. Some have a toolkit (usually jQuery) and a module loader (usually requirejs) as mandatory dependencies. These libraries fulfill one or more specific purposes: dependency management, templating, browser polyfill, etc... They aren't meant to support you building the core of your application, but to help with specific needs.

They can be used in conjunction with toolkits and/or MVC applications. pick one! It's a very bad idea to use more than one toolkit at a time. Some companies and individuals do - and often release them into the open source world (e.g. BBC Glow). The open source model ensures the survival of the fittest ideas / implementations, and the support of the community to detect and fix bugs and design flaws. @barbaracassani
Full transcript