Vue Js, Angular Js, React Js.

What is Vue js ??

  1. Definition

    Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

  2. Structure

     <div id="app">
      {{ message }}
      </div>
      
    var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!'
        }
    })

  3. Syntax

    Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

    • Text

      The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

                  <span>Message: {{ msg }}</span >

    • Raw HTML

      The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:

                  <div v-html="rawHtml"></div>

    • Attribute

      Mustaches cannot be used inside HTML attributes, instead use a v-bind directive:

                  <div v-bind:id="dynamicId"></div>
What is React Js ??

  1. Definition

    React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don’t feel very confident, we recommend refreshing your JavaScript knowledge so you can follow along more easily.

  2. Structure

    function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

  3. Elements

    An element describes what you want to see on the screen:

            const element = <h1>Hello, world</h1>;

    • Rendering an Element into the DOM

      Let’s say there is a <div> somewhere in your HTML file:

                  <div id="root"></div>

      We call this a “root” DOM node because everything inside it will be managed by React DOM.

    • Updating the Rendered Element

      React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

      function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
What is Angular Js ??

  1. Definition

    AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

  2. Structure

    Declare modules without a variable using the setter syntax.
     var app = angular.module('app', [
      'ngAnimate',
      'ngRoute',
      'app.shared',
      'app.dashboard'
  ]);

  3. Scope

    • Setting up the initial state of a $scope object

      Typically, when you create an application you need to set up the initial state for the AngularJS $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the $scope properties will be available to the template at the point in the DOM where the Controller is registered.

      var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

      We attach our controller to the DOM using the ng-controller directive. The greeting property can now be data-bound to the template:
      <div ng-controller="GreetingController">
  {{ greeting }}
</div>

    • Adding Behavior to a Scope Object

      In order to react to events or execute computation in the view we must provide behavior to the scope. We add behavior to the scope by attaching methods to the $scope object. These methods are then available to be called from the template/view.
      The following example uses a Controller to add a method, which doubles a number, to the scope:

      var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);
      Once the Controller has been attached to the DOM, the double method can be invoked in an AngularJS expression in the template:

      <div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

    • Scope Inheritance Example

      It is common to attach Controllers at different levels of the DOM hierarchy. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy. See Understanding Scopes for more information about scope inheritance.

        <div class="spicy">
    <div ng-controller="MainController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

          <div ng-controller="ChildController">
          <p>Good {{timeOfDay}}, {{name}}!</p>

          <div ng-controller="GrandChildController">
              <p>Good {{timeOfDay}}, {{name}}!</p>
        </div>
      </div>
    </div>
  </div>
Difference Between VueJs, AngularJs, and ReactJs

React And Vue

  • Performance

    Both React and Vue offer comparable performance in most commonly seen use cases, with Vue usually slightly ahead due to its lighter-weight Virtual DOM implementation. If you are interested in numbers, you can check out this 3rd party benchmark which focuses on raw rendering/updating performance. Note that this does not take complex component structures into account, so should only be considered a reference rather than a verdict.

  • HTML & CSS

    In React, everything is just JavaScript. Not only are HTML structures expressed via JSX, the recent trends also tend to put CSS management inside JavaScript as well. This approach has its own benefits, but also comes with various trade-offs that may not seem worthwhile for every developer.

    Vue embraces classic web technologies and builds on top of them. To show you what that means, we’ll dive into some examples.

    JSX vs Templates

    In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.

    Render functions with JSX have a few advantages:

    1. You can leverage the power of a full programming language (JavaScript) to build your view. This includes temporary variables, flow controls, and directly referencing JavaScript values in scope.
    2. The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.

    In Vue, we also have render functions and even support JSX, because sometimes you do need that power. However, as the default experience we offer templates as a simpler alternative. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:

    1. For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective.
    2. HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features.
    3. It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase.
    4. You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates.

Vue and Angular

  • Performance

    Vue has better performance and is much, much easier to optimize because it doesn’t use dirty checking. AngularJS becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. AngularJS users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there’s no way to optimize a scope with many watchers.

    Vue doesn’t suffer from this at all because it uses a transparent dependency-tracking observation system with async queueing - all changes trigger independently unless they have explicit dependency relationships.

    Interestingly, there are quite a few similarities in how Angular and Vue are addressing these AngularJS issues.

  • Data Binding

    AngularJS uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications.

  • Directives vs Components

    Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In AngularJS, there’s a lot of confusion between the two.

Komentar

Posting Komentar