Showing posts with label Jquery vs AngularJS. Show all posts
Showing posts with label Jquery vs AngularJS. Show all posts

Saturday 21 May 2016

Evolution of Javascript To Jquery To AngularJS


Today’s starting programmers mostly directly dive into Jquery / angularjs , Programmers of last decade started with javascript . and Now Angularjs is on hike .

See whenever a WebPage is opened , JS / Jquery / AngularJS Code is on Client Side So Amount of Code is adds to Page will Increase Request Time .

We Use Javascript Before Jquery , Different types of Sliders , Dom Manipulations were done with lot of Javascript code like using But After Jquery We took a Relief for many things as below
Lines of Code Decides Lifeline of App as below -

Javascript -
Function changeBachground(color) {
  Document.body.style.background = color;
}
Onload=”changeBackground (‘red’);”

Jquery 
$ (‘body’) .css (‘background’, ‘#ccc’);

So Simple if we can achieve something easily with less code why we will not adopt it 
Then AngularJS Came that is a complete MVC Framework . It is also Javascript Framework . So whatever you do with AngularJS you can also achieve with Javascript . But Why you need to it start it from scratch you can join angularjs repository to propose some solid changes to it and extend it if you strongly need as doing everything you need to do in a website using javascript doesn’t look good idea .

JAVASCRIPT CODE

Characters: 700

Lines of JavaScript: 13
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World with pure JavaScript</h1>
    Write some text in textbox:
    <input id="hello-input" type="text" />
    <h2 id="hello-output">Hello </h2>

    <script>
      var inputField = document.getElementById('hello-input');
      var label = document.getElementById('hello-output');

      var handleKeyup = function() {
        var value = inputField.value;
        label.innerHTML = 'Hello ' + value;
      }

      if (document.addEventListener) {
        document.addEventListener('keyup', handleKeyup);
      } else if (document.attachEvent) {
        document.attachEvent('keyup', handleKeyup);
      }
    </script>
  </body>
</html>

JQUERY

Characters: 529
Lines of JavaScript: 7
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World with jQuery</h1>
    Write some text in textbox:
    <input id="hello-input" type="text" />
    <h2 id="hello-output">Hello </h2>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
      var inputField = $('#hello-input');
      var label = $('#hello-output');

      inputField.on('keyup', function() {
        var value = inputField.val();
        label.html('Hello ' + value);
      });
    </script>
  </body>
</html>

ANGULARJS

Characters: 325
Lines of JavaScript: 0
<!DOCTYPE html>
<html ng-app>
  <body>
    <h1>Hello World with AngularJS</h1>
    Write some text in textbox:
    <input type="text" ng-model="sometext" />
    <h2>Hello {{sometext}}</h2>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </body>
</html>