Showing posts from 2017

Introduction to Redux-Saga

Introduction In this article I am going to introduce you to redux-saga [1]. Redux-saga is a library that aims to manage application side effects.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well [1].

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. I thoroughly recommend you to read more about generators before getting into sagas.

Workshop Well, we are going to implement a simple application using redux-saga this time. The basic scaffolding of our app once built would be like this.

You may find the source code of this project on github [2]. Let me just show you the sagas first. Here’s the code for our sagas.

It uses E…

Conditional Enabling of Submit button in a form using React

Introduction Well, today I am going to discuss a very common and useful topic about forms in React. At least most of you as front end developers would have encountered with this scenario. The use case we are going to address today is something like this.

Let’s say we have a simple application which enables us to add new users. For the simplicities sake let’s assume this input form consists of first name, last name and age. We make first name and last name mandatory while keeping age as an optional field. So the submit button of the form should get enabled only if the user has entered some values to both the first name and last name fields. In all other situations the submit button should be disabled. Check out the scaffolding below for more details. Notice that the submit button is disabled now since a value is not given for the First Name input field.

Workshop Well, how are we going to address this requirement elegantly. I am using redux forms to get this thing done. We gonna enabl…

Deep dive into React and Redux ecosystem

Introduction Well, today we are going to explore a little bit more on React and Redux. In this article I assume that you have some good prior knowledge and experience in React and Redux landscape. If not I recommend you to go through my previous article on introduction to React and Redux ecosystem [1] or any other beginner level training programme.

Prerequisites Solid understanding about React and Redux technologies.Good knowledge of Javascript, HTML and CSS.
Workshop Let’s get into this now. The application that we are going to build today is a Count Down Timer application. Our app should allow the user to enter a number of hours, minutes and seconds, then click on Add button, and then the timer will count down from that time. Timer should display hours, minutes and seconds. The user should be able to click a + button on the page to add a new timer. The user should be able to enter a label for the timer, such as "boil eggs," which is displayed with the timer. The user may…

Extending Piglatin app with our own custom converter

Introduction Well, last time we implemented a simple app that converts English text into a Pig Latin. But there are two limitations in that app.
It does not handle punctuations. For an example "Thi => "Ithay is not working with our current app. It does not handle capital letters properly. For an example cherries!", Sally => errieschay!", Allysay is not working either.
The problem is in the third party library which we used for the conversion. The third party library is a very naive one which does not support punctuations and capital letters. The solution is to write our own functional component which is responsible for the transformation and hook it up into our app by substituting the third party library we are currently using. Before getting into this, I recommend you to go through my previous article [1] in React and Redux which is a really good starting point.
Must have a good understanding on React and Redux stack.Solid knowledge in javascri…

An introduction to React-Redux Ecosystem

Introduction Today I am going to walk you through React which is a declarative, efficient, and flexible JavaScript library for building user interfaces.  ReactJS allows us to create reusable UI components. Lots of people use React as the V in MVC. React abstracts away the DOM from you, giving a simpler programming model and better performance [1].

Prerequisites Good knowledge of Javascript, HTML and CSS.

React FeaturesJSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
Components − React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.
Unidirectional data flow − React implements one way data flow which makes it easy to reason about your app.
Redux - This is the data management library inspired by Flux.
Backed by Facebook - React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0. [1]

React Ad…

Using a ReturnValueHandler to adapt RxJava Observables to Deferredresult in a SpringBoot micro service

If you look at my previous blog posts related to RxJava Spring Boot landscape you may notice that all the subscriptions to the RxJava Observables are made in each and every controller method and controller method is responsible for the transformation between RxJava Observables and Spring aware DeferredResults. This is pretty one to one mapping that you can do between RxJava and Spring. You can go further and generalize this behaviour. This will eliminate lots of boilerplate code in your application and make your code much simple, composable and readable. Also this brings a good software engineering practice called generalization and reuse into our code. Take a look at the following controller code before adding the return value handler. 

We can use a simple ReturnValueHandler that calls an adapter that will adapt Observables to DeferredResults. By registering this value handler with Spring, all the methods that return an Observable will be reworked into returning a DeferredResult. When…

Combine the emissions of multiple Observables together using RxJava Zip operator in a Spring Boot Micro service

INTRODUCTION Well, today we are going to discuss an advanced RxJava operator called Zip. Use of this Zip operator will definitely improve the performance of your application since it involves asynchronous execution of IO bound tasks such as external API calls over the networks which are really prominent in today's applications.
Prerequisites: Good knowledge of RxJava, Spring Boot, Microservices, Java8 User Level: Advanced

Since this is an advanced article, I am not going to walk you through the basics of RxJava or Spring Boot microservices. If you need to get some basic understanding of RxJava, I thoroughly recommend you to go through one of my previous blog posts [1] [2] or any other good introductory article about RxJava. If you need to learn more about Spring Boot microservices please go through some of the spring tutorials which are really comprehensive  and impressive.

RxJava Zip Operator Combine the emissions of multiple Observables together via a specified function and emit sin…

Calling an exterenal NoSQL database asynchronously from within a Spring Boot microservice using RxJava

Well, it seems RxJava lends me to write lots of blog posts due to it’s immense capabilities and operators. Today I am gonna discuss accessing a NoSQL database from within a Spring Boot microservice asynchronously using the capabilities of RxJava.
Pre-requisites - Having some basic understanding on Java programming, Java 8, Micro services, Spring Boot, NoSQL databases.
If you need to get some idea about RxJava please refer my previous blogpost [1] where I have given some basic introduction to RxJava. If you are more interested in RxJava, I recommend you to read through this book [2].

What is RxJava and Reactive Programming. In Reactive Programming the consumer reacts to the data as it comes in. This is the reason why asynchronous programming is also called reactive programming. Reactive programming allows to propagates event changes to registered observers. [3]
RxJava is a port from Netflix of the Reactive Extensions (Rx) to Java. RxJava was open sourced 2014 and is hosted athttp://reactiv…