Virtual DOM vs Real DOM , Angular vs React , Framework vs Libraries , SPA’s vs MPA’s

Virtual DOM vs Real DOM:

DOM:

DOM stands for “ Document Object Model ”. DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. The DOM represents the document as nodes and objects. Through this way, the programming languages can connect to the page. The DOM is an object-oriented representation of a web page, which can be modified with a scripting language like JavaScript. Anything found in a HTML document can be accessed, changed, deleted, or added using the Document Object Model.

Following is a short example of how DOM works:

above is a short map of how to access elements from a html document.

Here’s a code sample of DOM in the works.

above code can be used to target elements through Id, class,and tag name .

Through the ‘querySelector()’ method you can target any element in the HTML document and edit it in as mentioned above.

Now, we move on towards the Virtual DOM.

Virtual DOM:

Virtual DOM is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or Virtual Tree, which looks like the DOM state that you want. Virtual DOM will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes. A virtual DOM object is a representation of a DOM object, like a lightweight copy.

Pros of Virtual DOM:

• Updates process is optimized and accelerated.
• JSX makes components/blocks code readable.
• React’s data binding establishes conditions for creation dynamic applications.
• Virtual DOM is ideal for mobile first applications.
• Prompt rendering. Using comprises methods to minimize number of DOM operations helps to optimize updating process and accelerate it. Testable.

Single Page App vs Multiple Page App:

If you are thinking about creating your own application, you’ve probably heard that there are two main design patterns for web apps:

multi-page application (MPA) and single-page application (SPA). And of course, both models have their pros and cons.

Single Page App:

A single-page application is an app that works inside a browser and does not require page reloading during use. SPA requests the markup and data independently and renders pages straight in the browser. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion.

Pros and Cons of Single Page App:

• SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application.
• The development is simplified and streamlined. There is no need to write code to render pages on the server.
• It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application.
• SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
• It is slow to download because heavy client frameworks are required to be loaded to the client.
• Compared to the “traditional” application, SPA is less secure.but the more libraries or frameworks like ReactJS and AngularJS are more secure.

Multiple Page App:

Multiple-page applications work in a traditional way. Every change displays the data or submits data back to server requests rendering a new page from the server in the browser. It is larger in size and a lot slower as compared to SPA’s .

Pros and Cons of Multiple Page App:

• It’s easy for proper SEO management. It gives better chances to rank for different keywords since an application can be optimized for one keyword per page.
• MPA’s allow you to create new content and place it on new pages. Multi-page apps can include as much information about products or services as required, with no page limitations.
• MPAs can provide lots of analytics with valuable information on how a website is performing: which features are working and which aren’t.
• When loading another page, the browser completely reloads page data and downloads all resources again, even components that are repeated throughout all pages.
• Developers need to use frameworks for both the frontend or backend. This results in longer app development.
• In addition, maintaining security may be problematic because developers need to secure each separate page.

ReactJS vs AngularJS (Library vs Framework):

First we have to understand that what is the diffrence between a library and a framework.

Library
A library is a reusable piece of code which you use as it comes i.e it does not provide any hooks for you to extend it. A library will usually focus on a single piece of functionality, which you access through an API. You call a library function, it executes some code and then control is returned to your code.

Framework
A framework is a piece of code which dictates the architecture your project will follow. Once you choose a framework to work with, you have to follow the framework’s code and design methodologies. The framework will provide you with hooks and callbacks, so that you build on it — it will then call your plugged-in code whenever it wishes, a phenomenon called Inversion of Control.

A framework will usually include a lot of libraries to make your work easier.

Now that we know the main diffrence between a library and a frame work we can move on to ReactJS and AngularJS.

ReactJS:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you create reusable and complex UIs from small and isolated pieces of code called “components”.

Pros of ReactJS:

• ReactJS has a fairly low learning curve.
• React uses JSX for template creation instead of the usual JavaScript.
• ReactJS uses just one direction data flow — downward. And in this type of structure, there is no way that child elements can affect the parent data.
• ReactJS uses Virtual DOM which greatly increases the Speed of your app and only updates the parts where the changes have occurred.
• ReactJS is excellent cross platform supporter.
• ReactJS is easy to adopt and has UI focused Design.

Cons of ReactJS:

• In ReactJS you need more code for development then it’s counterparts.
• Not using isomorphic approach to exploit applications leads to SEO indexing problems.
• ReactJS has large size of dependencies.

AngularJS:

AngularJS is one of the most widely used frameworks for creating websites. Also, for the mainstream development, AngularJS is in use. Moreover, it has a fine support of a global community of keen and talented developers. using AngularJS we can produce dynamic SPA’s.

Pros of AngularJS:

• Developing is fast and simple once you’er familiar with it. Faster then React.
• AngularJS is very expressive, therefore need less code for same result as other frameworks and libraries.
• AngularJS supports two-way binding.
• There’s nothing better than arranging an outstanding end-user experience and AngularJS makes it possible by letting responsive, fast-loading and seamlessly-navigating websites and apps.
• AngularJS makes use of directives that keep the scripts and HTMP pages mess-free and extremely organized.

Cons of AngularJS:

• Basics are quite easy , but then learning curve becomes very steep making it hard to learn.
• Scopes are easy to use, but hard to debug.
• Directives are powerful, but difficult to use.
• AngularJS has search engine indexibility.