Knowing of reactJS with advantages, limitations & challenges

Basic Overview of ReactJS and how does it work

ReactJS and React Native are the new technologies for web and mobile development introduced by Facebook. The project was started by a Facebook software engineer, in 2011. To simplify the development process and foster a more comfortable user experience, he decided to create a library that would allow for building a web interface with JavaScript.

ReactJS library works on the basis of JavaScript and XHP symbiosis. It has been realized that ReactJS was working faster than any other implementation of its kind.

What is ReactJS? ReactJS is a JavaScript library that combines the speed of JavaScript and uses a new way of rendering webpages, making them highly dynamic and responsive to user input. The product significantly changed the Facebook approach to development. After the library was released as an open-source tool in 2013, it became extremely popular due to its revolutionary approach to programming user interfaces.

Two years later, the same group of engineers released React Native, a hybrid mobile-app development framework for iOS and Android. The tool was based on the very same principles as ReactJS and shortly was accepted by the engineering community and companies that adhere to the mobile-first strategy.

How does React Native work? React Native combines native application development with JavaScript UI development. While computationally heavy features can be implemented with native modules for iOS and Android, the rest of the code can be written with JavaScript and shared across platforms. Unlike PhoneGap and Cordova cross-platform tools, React Native doesn’t use WebView, a mobile engine that wraps code. Instead, it provides access to native mobile controllers which allows for achieving native look and feel to apps.

So, let’s take a closer look at ReactJS’ pros and cons as the main product. Then we’ll explore how React Native is different and which benefits and drawbacks it inherits from ReactJS

Virtual DOM in ReactJS makes user experience better and developer’s work faster

DOM (document object model) is a logical structure of documents in HTML, XHTML, or XML formats. Describing it in layman’s terms, it is a viewing agreement on data inputs and outputs, which has a tree form. Web browsers are using layout engines to transform or parse the representation HTML-syntax into document object model, which we can see in browsers.

The main concern about traditional DOM construct is the way it processes changes, i.e., user inputs, queries, and so on. A server constantly checks the difference caused by these changes to give the necessary response. To respond properly, it also needs to update the DOM trees of the whole document, which is not ergonomically valid because DOM trees are fairly large today, containing thousands of elements.

React managed to increase the speed of updates by using virtual DOM. Unlike other frameworks that work with the Real DOM, ReactJS uses its abstract copy – the Virtual DOM. It updates even minimalistic changes applied by the user, but doesn’t affect other parts of interface. That is also possible thanks to React components isolation, which we’ll get to in a minute, and a special data structure in the library.

 Real and Virtual DOMs

This makes updates really quick, allowing for the building of a highly dynamic UI.  We can notice it writing in Facebook chat and seeing a simultaneously updating news feed. Moreover, in ReactJS, developers don’t have to bind DOM to functionality in the front-end because React elements are already connected to it.

The approach enabled developers to work with UI-objects faster and use hot reloading (applying changes in a real-time mode).  Not only did it increase performance, it also made programming faster

Significant time saved by Use of ReactJS components

Another advantage that is been developed with React & ReactJS is the ability to reuse code components of a different level anytime, another meaningful time-saving effect.

Think of designers. They constantly reuse the same assets. If they didn’t, they’d have to draw corporate logos, for instance, over and over again. It’s pretty obvious: Reusing is a design efficiency.  In programming, this process is a bit more difficult. System upgrades often turn into a headache as every change can affect the work of other components in the system. System upgrades always need to be both backward and forward compatible to the modules that is being developed. Managing updates is easy for developers because all ReactJS components are isolated and change in one doesn’t affect others.

Some of the other advantages of reactJS are

1. Helps tight binding of values or handling of local variables vs global variables
2. You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.
3. It relies on a virtual-dom to know what is really changing in your UI and will re-render only what has really changed, hence better performance wise
4. React components can be re-used easily throughout the application, Works well with diferent javascripts or frameworks
5. Helps on understanding & building of test cases for validations (This needs Users to really know how an UI functionalities are built)
6. Working with reactJS will make one to get more handle or understanding of CSS functionality usage and how to implement html pages using css
7. It is important one to learn when to use functions as state values vs use them as functions. E.g. <button onClick={this.switchNameHandler}> vs <button onClick={this.switchNameHandler()}>
8. it is advised to use “bind” syntax most of the time instead of (=>) function as part of ES6 standards
9. reactJS expect to use the word “className” instead of “class” for defining CSS styles. reactJS supports both Inline styles and other styles format. Inline styles can be mentioned with-in render function using const style = { }. Then with-in the return statement, we can use style = {style}
10. Defining the styles elements in CSS helps re-usablility across JS files. Where as inline style limits to particular function or component
11. reactJs 16 supports returning arrays as part of output to the other components

Challenges or Limitation of reactJS

Most of the javascript developers initially tend to ignore the complexities they would start facing when developing complex application using reactJs. Below are some of the important functionalities that has been tried to address and how it can be achieved in reactJS. This is just a set of snapshot of developer experience to help them know how different UI functionalities one will face while developing.

Important thing is “REACT is only aimed to be an UI Layers and nothing else, React promotes inter relationship between Components”.

Server related code or development can be handled with Node JS

1) Since reactJS works with some of the framework’s, it is becomes important to download the respective react-included framework. For E.g. if somebody is using Carbon framework for the UI experience functionalities, it becomes important to download Carbon-components-react and use native css functionalities to achive the required outcome. Hence this means, developers tend to go on adding “NPM” or “YaRN” libraries accordingly.

This is an important knowledge or know how once has to be aware of come across while developing

2) Learning curve for the developers is quite high, ReactJS should not be the first one to start with for any new WEB developers. In fact Udemy has one of the very good tutorials on reactJS developers (It is little chargeable), but available life time and very good. It is by an author called Maxmillina Schwarzmuller. Book title “React 16 – The Complete Guide”. Quite an exhaustive guide

3) ReactJs support quite a lot of external libraries means to have it lacks quite a lot of native libaries, external libraries helps one to use the HTML and CSS functionalities to gether and build it into JSX. JSX has its own benefits (for instance, protecting code from injections), but some members of the development community consider JSX to be a serious disadvantage. Developers and designers complain about JSX’s complexity and consequent steep learning curve. For E.g. we were debating whether should we use react-redux for implementing MVC handling, later we figured out, simple react-router helped us handling the page navigation with-in the application.

4) Hierarchy Data navigation from One Div’s to Another Div’s out the current Div’s are not easy. E.g. In case if there is a need to navigate the data content from one “div” to another “div” in the page, ReactJS doesn’t support parallel data handling unlike other JS scripting tool. In ReactJS one has to navigate to parent node and from parent Node to the Top Most parent node and then navigate to second hierarchy of the tree node. This is based on the challenge faced. “If somebody has come across a better approach on handling the functionlity, please advise”

5) Knowhow of using this.state vs this.setState is important specially when we are trying to change the state of the component or values of the component. Most of the

6) reactJS doesn’t allow methods to be passed as props so that we can call a method which might change the state. We cannot use “State” value in component function or function components written as function

7) Integrating with some of the MVC frameworks would require one to be aware of what configuration changes to go through

8) Please remember every new CSS file created needs to be imported in reactJS. Extension of the files can be emitted only to JavaScript files, all other files, needs to be mentioned explicitly

9) In Normal HTML attribute names are case Insensitive, we have to be careful while using case insensitive names

10) Creation of standard functions in reactJS example <<functionName () { }>> comes with certain limitation that we will not be able to use this.state effectively. Hence it is advise to go with ES6. Example <<functionName = () => { } >>

11) Conditional blocks are not allowed in return or JSX part of the statements, most of the commands or syntaxes has to be of JavaScript in nature

Disclaimer: As i have started working with reactJS exclusively. Shall start detailing out some of the limitation i would come across. Please note, this is just for a knowledge sharing purpose and nothing else.