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.

Prerequisites


  • Must have a good understanding on React and Redux stack.
  • Solid knowledge in javascript, css and HTML.

Workshop

With that in mind let’s get started. Firstly we need to implement the conversion logic inside our component. Here’s the code listing for that.


Finally we need to hook up our custom translator with the app. For that merely locate the action creator and substitute the call to the third party module with our own custom translator. Here’s the code which is responsible for that.


You may find working code for the project here [2].


Check out the following sketch of the working app for a sample input which covers both upper case letters and punctuation scenarios.






Conclusion

Well, we covered a lot of ground in React, Redux and Javascript landscape here. We extended our Piglatin app by adding our custom translator which transforms English text to Piglatin while proper handling of capital letters and punctuations as per the Pig latin pseudocode algorithm. I hope you enjoyed this. That does it for another session and I’ll see you in my next article.

References

[1] http://ravindraranwala.blogspot.com/2017/04/an-introduction-to-react-redux-ecosystem_5.html [2] https://github.com/ravindraranwala/piglatinconverterapp

Comments

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t
Read more

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

Image
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
Read more