Feb 07

Most Popular javascript Frameworks

Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Why do you need Backbone.js?

Building single-page web apps or complicated user interfaces will get extremely difficult by simply using jQuery or MooTools. The problem is standard JavaScript libraries are great at what they do – and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.
I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of structuring your application but you miss out on the benefits of the open source community.

Why single page applications are the future

Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.

So how does Backbone.js help?

Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.

Browserscope ( Operations per second)

Chorme 32.0.1700 => 692
Chorme 24.0.1312 => 632
Firefox 27.0 => 80
Firefox 26.0 -> 497

Reference Link :

http://backbonetutorials.com/why-would-you-use-backbone/

http://backbonejs.org/

http://javascriptissexy.com/learn-backbone-js-completely/

https://github.com/timmers2/codeignitor-requirejs-backbone

Backbone Tutorials

http://backbonetutorials.com/

Backbone Videos

CI Link

https://github.com/timmers2/codeignitor-requirejs-backbone

Angular.js

What HTML would have been had it been designed for web apps

Why AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Alternatives

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Extensibility

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

Browserscope ( Operations per second)

Chorme 32.0.1700 => 30
Chorme 24.0.1312 => 30
Firefox 27.0 => 4
Firefox 26.0 -> 22

Reference Link

http://angularjs.org/

http://docs.angularjs.org/api

Angular Tutorials

http://docs.angularjs.org/tutorial

Angular Videos

http://www.youtube.com/user/angularjs

CI Link

https://github.com/michalsn/CodeIgniter-AngularJS-App

Ember.js

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.
Write dramatically less code with Ember’s Handlebars integrated templates that update automatically when the underlying data changes.
Don’t waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.
Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.

Browserscope ( Operations per second)

Chorme 32.0.1700 => 91
Chorme 24.0.1312 => 55
Firefox 27.0 => 6
Firefox 26.0 -> 47

Reference Link

http://emberjs.com/

http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

https://github.com/benjaminapetersen/CI-JS

Ember Tutorials

http://emberjs.com/guides/

Ember Videos

Knockout.js

Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern

Declarative Bindings

Easily associate DOM elements with model data using a concise, readable syntax

Automatic UI Refresh

When your data model’s state changes, your UI updates automatically

Dependency Tracking

Implicitly set up chains of relationships between model data, to transform and combine it

Templating

Quickly generate sophisticated, nested UIs as a function of your model data

Browserscope ( Operations per second)

Chorme 32.0.1700 => 78
Chorme 24.0.1312 => 78
Firefox 27.0 => 8
Firefox 26.0 -> 65

Reference Link

http://knockoutjs.com/

http://blog.stevensanderson.com/2010/07/05/introducing-knockout-a-ui-library-for-javascript/

http://www.knockmeout.net/2013/10/knockout-3-highlights.html

Knockout Tutorials

http://learn.knockoutjs.com/

http://channel9.msdn.com/Events/MIX/MIX11/FRM08 => Ember Videos

Nov 19

jquery deprecation functions and new functions

Introduction:

-Fast, small, javascript library.
-traversal, manipulation
-Event handling, animation, ajax, easy to use API
– multitude of browsers
– versatility and extensibility.
– millions of people to write javascript.

Deprecated Functions from new Release

Overview:
jQuery 1.9 removes or modifies several APIs that behaved inconsistently or inefficiently in the past. The majority of these changes have been foreshadowed by their deprecation in previous versions of jQuery, particularly 1.7 and 1.8.

jQuery Migrate Plugin

This plugin can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9.

https://github.com/jquery/jquery-migrate

Ideally this would only be used as a short-term solution.

Continue reading

Jul 26

Get a selected radio button value in jQuery using it name?

Get a selected radio button value in click function using JQuery…

Click function to get selected radio button value using JQuery

Feb 16

Use jQuery to hide a DIV when the user clicks outside of div or element

Use jQuery to hide a DIV when the user clicks outside of div or element

Sep 16

Best jquery image / content slider plugins

BxSlider

jQuery HTML Content Slider. Horizontal, vertical, and fade transitions, Display and move multiple slides at once (carousel), Prev / next, pager, auto controls, Easing transitions, Random start, Ticker mode, Before, after, first, last, next, prev callback functions, Optional styling included, Tons of options. Demo Download

Supersized

Continue reading