Ravindra Ranwala's Blog

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 fo...

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 gon...

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 time...

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. Prerequisites Must have a good understanding on React and Redux stack....

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 Features JSX − 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 licens...

If you look at my previous blog posts related to RxJava and Spring Boot microservices 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 obvious one to one mapping that you can do between RxJava and Spring. In fact you can go further and generalize this behaviour. This will eliminate lots of boilerplate code in your application and make your code much more simple 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[Gamma95] 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 ...

Introduction Well, today we are going to discuss an advanced RxJava operator called Zip. Let’s first take a look at the zip operator at a glance and then move on to a real world example that leverages the capabilities of the operator. In fact, zip is a very powerful and useful operator provided in the RxJava library. Prerequisites : Good knowledge of Java8, Functional Programming, RxJava, Spring Boot, Microservices. 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 Combines the emissions of multiple Observables together via a speci...