Forem: nishathapa

Flux Architecture

nishathapa — Tue, 15 Jun 2021 09:05:51 +0000

Flux Architecture in ReactJs

What is ReactJs
ReactJs is JavaScript Framework which was originated and first used by Facebook for building SPAs. The motive of ReactJs was to improve its UI which is very complex and also change with time.
Normally in web development, MVC architecture is used, but the concept of ReactJs is entirely different because first its not a general purpose architecture and second it was made to actually solve the complexity problem faced with Facebook. ReactJs was majorly developed to deal with large data set which change over time using unidirectional data flow structure i.e flux architecture. Flux is a new kind of architecture follows the concept of unidirectional flow model. Flux has an advantage when using huge data and also if the data needs to be updated timely in an effective manner

Pros of Flux: https://stackshare.io/flux

Unidirectional flow
Architecture
Structure and Data flow
Not MVC
Open source
Created by Facebook
A gestalt shift

According to Flux architecture the application is split into these following components:

Actions: Action is that component of architecture where the user interacts with the application. Action contains all the information that is needed to that particular action. It has a type property that identifies the action type and helps in passing data to the dispatcher.

Dispatcher:There is always only one dispatcher that is called the global dispatcher. This dispatcher broadcasts all the actions and events to the registered stores. When the user click the send button an action is generated via dispatcher. when action comes in, it will pass the it to the stores. Basically dispatcher is the manager of the whole process. It takes actions and broadcasts it to all the stores so as to update the states of the view.

Stores: Store contains the logic. It contains the model. It stores user interface states which can be later retrieved by passing an action to the dispatcher. It also stores the domain state.
The function of store is to listen to the actions and then act on them accordingly which means that it'll have a switch statement.A switch statement is used to interpret the action and invoke a proper callback. Once the state changes is configured, it emits a change event, and then view layer of the application is updated.

Controller Views: Controller view is the user interface component which handles the view part of the application. It is that component of application where the data is rendered. It is responsible for handling al the events based on the user. They may contain some containers which basically connects the action and dispatcher or presentation view which are not connected to the actions and dispatchers.

So from this basic flux architecture we can conclude that when the user clicks a send button from the controller view component, the user is basically calling the action. This action is passed to the dispatcher and the dispatcher passes it to the store. The store updates the controller view layer and then the cycle goes on.
Hence we can say that the flux architecture is simple and updates the view layer of the application with the latest version of data timely.

Some alternatives to FLUX:
Flow: Flow is an online collaboration platform that makes it easy for people to create, organize, discuss, and accomplish tasks with anyone, anytime, anywhere.

Mono: It is a software platform designed to allow developers to easily create cross platform applications part of the .NET Foundation. It is an open source implementation of Microsoft's .NET Framework based on the ECMA standards for C# and the Common Language Runtime.

jQuery: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

React: Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

AngularJs: AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

A Quick Guide to AJAX

nishathapa — Mon, 23 Nov 2020 16:47:58 +0000

This is a small reference for all the developers who are new to AJAX.

Full form of AJAX is Asynchronous JavaScript and XML. (XML is commonly used as the format for receiving server data, although any format, including plain text, can be used ). AJAX is no programming language but a mix of few concepts. It is a new technique for creating better, faster and more interactive web applications with the help of XML, HTML, CSS and JavaScript.

AJAX was coined in 2005 by Jesse James Garrett, that describes a “new” approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, and most importantly the XMLHttpRequest object. It is a client-side script that communicates to and from a sever without reloading or refreshing the webpage again and again. You just need to request data from server, when the server receives the data, it sends the data back to your webpage. The sending of the data basically works in the background which means that With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, update the current screen and the user would never know that anything was even transmitted to the server.

Definition : “The method of exchanging data with a server, and updating parts of a web page — without reloading the entire page.”

JavaScript includes features of sending asynchronous http request using XMLHttpRequest object. Ajax is about using this ability of JavaScript to send asynchronous http request and get the xml data as a response (also in other formats like JSON ) and update the part of a web page (using JavaScript) without reloading or refreshing entire web page.

Benefits of Ajax:

Callbacks:

Ajax is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. It only sends the data to the sever that is necessary, this way it minimizes the network utilization and the operations are performed faster. By using callbacks the server is not required to process all the data hence there is limited data processing on the server.

Asynchronous calls:

Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.

User-friendly:

Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.

Increased speed:

The most important usage of AJAX is to improve the speed, performance and usability of web application. For instance, if we look at the example of Netflix, the ratings and preference of movies are stored in your database and for the particular function, the complete webpage is not reloaded instead only that particular block of rating is refreshed. This save time and also improves the usability of the application.

AJAX cannot work independently. It is used in combination with other technologies to create webpages.

Javascript: JavaScript is a loosely typed scripting language. The JavaScript functions are called when an event occurs in a page.It works as a glue for the whole AJAX operation.
DOM: Dom represents the structure of XML and HTML documents. It uses API for accessing and manipulating structured documents.
CSS: CSS allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript
XMLHttpRequest: JavaScript object that performs asynchronous interaction with the

Steps of AJAX Operation

A client event occurs.
An XMLHttpRequest object is created.
The XMLHttpRequest object is configured.
The XMLHttpRequest object makes an asynchronous request to the Web-server.
The Web-server returns the result containing XML document.
The XMLHttpRequest object calls the callback() function and processes the result.
The HTML DOM is updated.

Advances made to AJAX
JavaScript is the client-side programming language and XML is a markup language to define data. The fetched data from the server is in XML, but now JSON ( Another markup language to define data) web services are replacing the XML Web services since JSON is much easier to read and use with JavaScript.

Another advance is the JavaScript Object Library called JQuery. JQuery is an free, opensource software. It is used to easily write client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual Studio and can be dragged and dropped onto web forms just like HTML and server controls. These controls are intended to be used for Ajax callbacks. However, they can also be used as normal client and or server controls. For example, Asp.Net does not come with the Tabs controls. However, the Ajax Control Toolkit does. The Tab control can postback to the server just like server controls.

Rich Internet Application Technology: AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting tremendous industry momentum and several tool kit and frameworks are emerging. But at the same time, AJAX has browser incompatibility and it is supported by JavaScript, which is hard to maintain and debug.

Browser Support
Not all browsers support AJAX. This means that the particular browser does not support the creation of JavaScript object — XMLHttpRequest object. Few browsers that support AJAX are:

Mozilla Firefox 1.0 and above.
Netscape version 7.1 and above.
Apple Safari 1.2 and above.
Microsoft Internet Explorer 5 and above.
Konqueror.
Opera 7.6 and above