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

Creating simple chat with node.js and socket.io

1. Create a new directory folder called ‘node’ in any of the partitioned local drive.
2. Open command prompt and open the ‘node’ directory.
3. Paste the code to install socket.io, express, and jade files

node.js1
And wait until the installation get completed.

4. Create app.js file and fill it with the following code.

5. Create index.html file and fill it with the following code.

6. Open the command prompt.
Choose the directory, and Use the code to execute the server

node.js2

7. Open a browser and use ‘localhost:8080’ this to run.

8. Open another new window with the same url to see the changes

ex_nodechat

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

Nov 19

MYSQL databases engines MYISAM Vs INNODB

MYISAM:

1. MYISAM supports Table-level Locking
2. MyISAM designed for need of speed
3. MyISAM does not support foreign keys hence we call MySQL with MYISAM is DBMS
4. MyISAM stores its tables, data and indexes in diskspace using separate three different files. (tablename.FRM, tablename.MYD, tablename.MYI)
5. MYISAM not supports transaction. You cannot commit and rollback with MYISAM. Once you issue a command it’s done.
6. MYISAM supports fulltext search
7. You can use MyISAM, if the table is more static with lots of select and less update and delete.

INNODB:

1. InnoDB supports Row-level Locking
2. InnoDB designed for maximum performance when processing high volume of data
3. InnoDB support foreign keys hence we call MySQL with InnoDB is RDBMS
4. InnoDB stores its tables and indexes in a tablespace
5. InnoDB supports transaction. You can commit and rollback with InnoDB
6. InnoDB is slower when it comes to SELECT
7. InnoDB enforces referential integrity (which is as very good thing)