Vue.js

What is Vue.js?

Vue.js is an open-source progressive JavaScript framework for building user interfaces. Intergration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Vue can also function as a web application framework capable of powering advanced single-page applications.

Vue actually have 5 features.

       1. Templates

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. In Vue, you can use the template syntax or choose to directly write render functions using JSX.

2. Reactivity

One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. Vue provides optimized re-rendering out of the box without you having to do anything.

3. Components

Components are one of the most powerful features of Vue. In a large application, it is necessary to devide the whole app into small, self-contained, and often reusable components to make development manageable.

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  template: '<button v-on:click="onclick">Clicked {{ count }} times</button>'
  ,
  methods: {
    "onclick": function() {
        this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
})

4. Transitions

Vue provides a variety of ways to apply transition effects when items are inserted, update, or removed from the DOM,

  • automatically apply classes for CSS transitions and animations
  • integrate third-party CSS animation libraries, such as Animate.css
  • use JavaScript to directly manipulate the DOM during transition hooks
  • integrate third-party JavaScript animation libraries, such as Velocity.js

 

5. Routing

In a single-page application (SPA) one initial disadvantage was the inability to share links to the exact “sub” page within a specific web page. Because SPAs serve their users only one URL-based response from the server (it typically serves index.html or index.vue), saving bookmarks, or sharing links to a specific article would be impossible.

 

 React

What is React?

React (React.js or ReactJS) is a JavaScript library for building user interface. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

Basic Usage

The following is a rudimentary example of how React can be used in html using JSX and the ECMAScript 2015 JavaScript syntax.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

The Greeter class is a React component that accepts a property greeting. The ReactDOM.render method creates an instance of the Greeter component, sets the greeting property to 'Hello World'and inserts the rendered component as a child element to the DOM element with id myReactApp. When displayed in a web browser the result will be

 

AngularJS

What is AngularJS?

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Bootstrap

The tasks performed by the AngularJS bootstrapper occur in three phases after the DOM has been loaded:

  1. Creation of a new Injector
  2. Compilation of the directives that decorate the DOM
  3. Linking of all directives to scope

AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are:

ng-animate
A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.

Since ng-* attributes are not valid in HTML specifications, data-ng-*can also be used as a prefix. For example, both ng-app and data-ng-app are valid in AngularJS.

ng-app
Declares the root element of an AngularJS application, under which directives can be used to declare bindings and define behavior.
ng-aria
A module for accessibility support of common ARIA attributes.
ng-bind
Sets the text of a DOM element to the value of an expression. For example, <span ng-bind="name"></span> displays the value of ‘name’ inside the span element. Any change to the variable ‘name’ in the application’s scope reflect instantly in the DOM.
ng-class
Conditionally apply a class, depending on the value of a boolean expression.
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
ng-if
Basic if statement directive that instantiates the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.
ng-init
Called once when the element is initialized.
ng-model
Similar to ng-bind, but establishes a two-way data binding between the view and the scope.
ng-model-options
Provides tuning for how model updates are done.
ng-repeat
Instantiate an element once per item from a collection.
ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
ng-view
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
Leave a Reply