Thursday, June 18, 2020

ReactWithElastic

ReactWithElastic

In this blog, i will write a search application using ReactJs. It has 2 parts React Js and ElasticSearch. The ReactiveSearch component from appbase.io takes care of the complexity of interacting with ES and parsing the result.

Note: I will re-visit this page and clean it up based on user feedback.

The  code as always is on github.



Sunday, December 20, 2015

ReactJsConcepts

In this blog, i will write a TODO application using ReactJs. It has 2 parts ReactToDoUI and ReactTodoService. 2 Parts that communicate over REST API.

just do

sh cleanAndRun.sh

And it will be up and running. Please start both the service and the UI. The code is set up for CORS, so that you can have multiple UI components interacting with Multiple service components.

The  code as always is on github.


Go to browser http://localhost:4000/



ReactJs takes a composition based approach to UI. It has less out of the box features compared to Angular Js, plus it is more js based.
The drawbacks disappear there. Because it takes a "Composition" based approach to UI development, you can parameterize your UI in to components. For example if you have a lot of forms, then Each Form can be a UIComponent, composed of , more components which are text boxes, date fields etc.

It takes some getting used to, but it is a great framework. It has built in Xss protection. Plus it is state based.You would override specific life cycle methods in React.

Just remember these lifecycle methods and override only the needed ones after reading React API..That's all you need.



Saturday, December 19, 2015

AngularVsReactVsSoManyOthers

Why  Not Angular Js ?

With two way binding and dirty checking in Angular js, users do experience dis-ruption. It works like this.After page load, the DOM elements marked by the ng-app directive is scanned. Each of the DOM elements has a listener function(java script function) bound to it. If the javascript function modifies the DOM (which you will do), again the re-scanning, re-bounding to js functions...in short dirty checking happens.
It is good for web applications that have fixed set of DOM elements, however if the number of DOM elements that are manipulated increases, Time to consider "Right Tool For The Right Job"

Why React Js ?

React Js is class based and application overrides the render function of the React class. Each React Class can compose an other class by Calling <Todo /> etc..
Then comes the virtual DOM. All these components are applied by react and a virtual DOM is computed. React's internal algorithm, diffs  the computed VIRTUAL HTML DOM with the existing HTML DOM , and applies the changes alone. Also with class based overriding, there is more precise control, over what behavior we want to override.

Why Not Both ? 

Yes. Of course. Use Angular js on DOM elements that interact with server, but do not get changed.
Surround only those with the ng-app directive. Then use ReactJs for say showing a lot of UI menu items, that get loaded from  the server.

Why Only Two ?

Yes Of Course. You do not have to stop with two. You can use more than one framework. If you do take this approach, please follow the following guidelines,

1. Use libraries/tool kits , instead of frameworks.

Frameworks have a larger foot print on the code, and your code is called by the framework.
Libraries provide functionality and the application invokes the library.

2. Organize. No Excuse.

Do write large pages, large java scripts or large anything. Organize your pages in to plain html and Js components. Use applicable design patterns with in js and import the as needed, wisely.

3. Switch Vs Stick With it.

Frog in the pond story applies. Know when to adapt your existing choice and know when to switch.

Pick libraries that play well with other libraries each time. "Feature Rich" tool kits are deceitful choices , rather tool kits that do one only one thing , very well are better choices.
To illustrate, If your requirement is to use just two way binding, then knockout.js is a better choice..
Not that Angular.js or React.js is bad, they are just an over kill for simple two way bindings.