Tag Archives: code

A Comparison of jQuery VS AngularJS

a-comparison-of-jquery-vs-angular

Most of web developers might be familiar with jQuery, but not many are common with AngularJS. However, with the rise of Angular, it is important to know the differences between the two. For example, you might want to know when to use jQuery or AngularJS? How to avoid common mistake of using AngularJS in jQuery Fashion? Can we use jQuery inside or with AngularJS? You can find all of the answers here.

Definition of jQuery

jQuery is a JavaScript Library that is a lightweight and feature-rich. It helps web developers simplify the usage of client-side scripting for web applications through JavaScript. It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.

So, in general jQuery will enable you to:

  • Easily manipulate the contents of a webpage
  • Apply styles to make UI more attractive
  • Easy DOM traversal
  • Effects and animation
  • Simple to make AJAX calls and
  • Utilities and much more… etc.

As jQuery is a JavaScript Library, you can use this library to fulfill a single or many of the features it provides in our application partially/fully. For example, you can make AJAX-based calls or you can also give some effects and animations by simply using jQuery library. It works like a plugin.

Definition of AngularJS

AngularJS is one among so many Google products, it also an open source MVC-based framework which many people consider it as the best framework in its generation. So, if you wish to create a great tool for building highly rich client-side web applications, Angular is the best option for it. In fact, it is not only a JavaScript library, but also a framework that is design perfectly. This framework will lead us to follow some rules and a structures approach.

Compared to jQuery, AngularJS offers more features, such as follows:

  • Two-Way data binding
  • REST friendly
  • MVC-based pattern
  • Deep Linking
  • Template
  • Form Validation
  • Dependency Injection
  • Localization
  • Full Testing Environment
  • Server Communication

When to Use jQuery or AngularJS?

Many people think that AngularJS and jQuery share the same value of technology, but AngularJS is actually more suitable for the web application development as it can work on the HTML code and JSON data. It works in developing for interactive and robust applications but using the same for a simple website development. As a result, it produces slow loading and quite erratic websites.

On the other hand, jQuery provides a fast and feature-rich language. Moreover, it has in-built features such as HTML document traversal, event handling, manipulation, animation and Ajax support and others. Those stuffs will make you easier to develop hardcore websites. Therefore, it is necessary to frame a sound approach dedicated either to develop an advanced web application or website development before utilizing any of these highly intuitive and robust languages.

Don’t Use AngularJS in jQuery Fashion

If you love to use a huge amount of plugins, jQuery is the easier framework that you can use. However, with AngularJS, you will experience a totally different structure. This will make it more difficult for you to find any plugins or to create one. However, AngularJS has jqLite which owns the jQuery functionalities and as the result, it can be applied for developing different plugins as per the need of websites but not good for developing or patching codes of old plugins and embedding it on the website.

Code Comparison

For a developer perspective, the code comparison is as follows:

jQuery Code

AngularJS Code

<div id=”tabs”>
    <ul>
            <li><a href=”#tabs-1″>Tab 1</a><li>
            <li><a href=”#tabs-2″>Tab 2</a><li>
            <li><a href=”#tabs-3″>Tab 3</a><li>
    </ul>
    <div id=”tabs-1″>
   …
    </div>
    <div id=”tabs-2>
   …
    </div>
    <div id=”tab-3>
   …
    </div>
</div>

$(“#tabs”).tabs();

<tabs>
        <tab title=”Tab 1″>
                …
        </tab>
        <tab title=”Tab 2″>
                …
        </tab>
        <tab title=”Tab 3″>
                …
        </tab>
</tabs>

 

Can We Use jQuery inside or With AngularJS?

In certain scenarios, we may want our AngularJS application to use jQuery library. Now, AngularJS can use jQuery in our application when the application is being bootstrapped. Otherwise, Angular will use its own implementation of the subset of jQuery that we discussed above jqLite.

Conclusion

AngularJS and JQuery are actually two technologies that are meant for different target. JQuery is best suited for DOM manipulation while AngularJS is suited for web application development.

3 JavaScript Libraries to Look Up for in 2017

3-javascript-libraries-to-look-up-for-in-2017

For some web developers, JavaScript’s ecosystem can be fatigue. Especially this year where there is a lot of tooling and configuring is required. So, to make your work easier, we submit a list of 3 generic libraries/frameworks for front-end development.

Vue.js

If you haven’t put any attention on Vue.js before, now you have to keep your eyes on. It is a tiny JavaScript framework which seems to primarily focus on views and give you only a handful of tools to regulate data for those views. Moreover, Vue.js is also good for a change as it doesn’t get stuffed with programming design pattern and limitations.

There are two types of Vue.js. A stand-alone version that includes the template compiler and the runtime version that doesn’t. You can see its simplicity, through an example of a component that shows a message and brings interactivity to a button to reverse the message.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    reverseMessage: function () {
      const reversedMessage = this.message
        .split('')
        .reverse()
        .join('');

      this.message = reversedMessage;
    },
  },
});

Don’t you worry about the existence of other plugins, as you still can find them on Vue.js. In fact, several guides are available to use there. This framework will be suitable for you, especially if you wish to have productive fast. It also scales well as the project grows.

Svelte

Svelte must be the latest JavaScript Libraries as it has been released in mid-November 2016. At some point, it may looks similar to Vue.js, but leaves a smaller footprint. “Traditional” frameworks need runtime code to define and execute modules; keeps state, update the views and do whatever frameworks do. Moreover, with Svelte you can dissolve into clean JavaScript code as of you didn’t use a framework at all. The big advantages that you can get is that its file size.

Svelte has plugins so you can compile the source code using Webpack, Browserify, Rollup or Gulp.

You can use the below example of creating the Vue.js example with Svelte as a comparison:

<p>{{ message }}</p>
<button on:click="reverseMessage()">Reverse Message</button>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
    }
  },
  methods: {
    reverseMessage () {
      const reversedMessage = this.get('message')
          .split('')
          .reverse()
          .join('');

      this.set({
        message: reversedMessage,
      });
    }
  }
};
</script>

The very same module created with Vue.js produces a 7kb bundle. Svelte produces a 2kb file.

In terms of performance, Svelte competes with Inferno. This makes Svelte becomes a good choice if you care about your application’s footprint. At the time of writing, Svelte either doesn’t have its plugin system documented, or doesn’t have one at all. The TODO indicates that Svelte will support plugins and might have an API to hook into the framework.

The compatibility of the compiled code depends on your build workflow stack, so it’s hard to say what its default compatibility is. Technically you should be able to achieve pre-ES% support by including ES5 shims.

To conditionally load and invoke modules, Conditioner.js is one of the good choices. The difference from other module loaders is that conditioner.js allows you define conditions under which to load and/or show a module. This results in reducing loading time and saving bandwidth.

However, you better already have functional components in place that are enhanced with a given JavaScript module. How those modules are defined is entirely up to you. You could even make it load modules from your favorite framework.

To get started, you can install it via npm: npm install conditioner-js.

The demo is unlike previous ones to better illustrate Conditioner.js’ features. Imagine we wish to show the time remaining to an event. A module is shown like this:

import moment from 'moment';

export default class RelativeTime {
  /**
   * Enhance given element to show relative time.
   * @param {HTMLElement} element - The element to enhance.
   */
  constructor(element) {
    this.startTime = moment(element.datetime);

    // Update every second
    setInterval(() => this.update(), 1000);
    this.update();
  }

  /**
   * Update displayed relative time.
   */
  update() {
    element.innerHTML = this.startDate.toNow();
  }
}

It is so simple to initialize the module:

<time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>

Conditioner will then load the ui/RelativeTime module at this location in the DOM. Note the content is already present and in an acceptable format and the module only enhances that.

If you want a module to initialize only when it’s visible to a user, you can do so with conditions:

<!-- Show RelativeTime only if it is visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}">2017</time>
<!-- Keep showing RelativeTime after it was visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}">2017</time>

Conditioner.js has quite an extensive list of monitors, which you use to define conditions. Don’t fret! You only have to include those you need, preventing the inclusion of unnecessary code.

You can also pass along options as a JSON string or a slightly more readable JSON variant.

<!-- JSON variant -->
<div data-module="ui/RelativeTime" data-options='unit:"seconds"'>...</div>
<!-- Or good old JSON -->
<div data-module="ui/RelativeTime" data-options='{"unit":"seconds"}'>...</div>