React Native: A JavaScript framework to build real native mobile apps (Android and iOS)

React-Native originated from the React project.  React is a JavaScript framework/library for building user interfaces. The fundamental building block of React is the Component.

React-Native is a javascript library/framework that is used to build native mobile apps. It is built on top of the React framework with some added features for the native mobile development.

 

What is native mobile development?

The most popular mobile operating system are Android and iOS. The development of mobile application for those platforms using the officially  recommended technologies, libraries and frameworks is known as the native mobile development.

e.g:- For Android (Android SDK + Java Or Kotlin

For iOS Swift or Objective C

Then  you might be thinking of how the react-native has become a native mobile application development framework. let me explain.

In React Native, we are trying to build native mobile app with some framework provided javascript components. Those components will be compiled (or transformed) into native android or iOS  application (native android code) when building the application. Therefore ultimately you will get something similar to what you get with native development. Therefore the built application will behave exactly same as native application and will be having the access to all of the core features of the underlying operating system of the device.

 

What is React-Native?

As i have already described, React-Native is a Javascript framework that can be used to develop native mobile application. The code written in react-native framework (with javascript) will be converted/transformed into the real native (Android and iOS) platform code in the compilation and building process. Therefore ultimately it will be a real native code that is almost similar to what you get from native mobile development (Android or iOS).

 

How does React Native differs from Ionic?

In ionic, we are building a HTML based web application that runs inside the native (Android or iOS) mobile application (with support of WebView). WebView is basically a hidden browser.  So it is just a web application that runs inside(that is hosted inside) the WebView component of the underlying native application. Therefore it is not a native mobile app and it has some limited wrappers to access the core features of the underlying operating system (Android or iOS) of the device.

 

Mobile Specific Components for React-Native 

Unlike in “normal” React apps built for the browser, you’ll NOT use HTML tags. Instead, you’ll use a set of pre-built components which will be compiled to native code by the React Native toolchain.

In the React, you can see <div> and <span> components much similar to HTML elements. But in react-native you cannot use such components as the native mobile application does not recognize <div> and <span>. It has some special developed components such as <View> , <TextView> etc  and those will be compiled/transformed into native application syntaxes in the compilation process.

Screen Shot 2018-07-01 at 12.52.39 AM.png

 

 

Does it compile everything into the native application code?

No. Only the react components designated for UI rendering will be transformed into the native application code (native component).  Other javascript code will be remained as javascript.

e.g:- View will be transformed into Android View component.

Text will be transformed into Android TextView.

 

Screen Shot 2018-06-30 at 9.19.58 PM.png

 

 

 

Swagger for documenting your Spring Boot REST Api

 

What Is Swagger?

Swagger is a set of open-source tools built around the OpenAPI Specification that can help you design, build, document and consume REST APIs.

Swagger  is mostly used as an open source project for describing and documenting RESTful APIs.  Swagger-UI an another tool which provides the capability of displaying the REST Api documentation in the browser.  Besides rendering documentation, Swagger UI allows other API developers or consumers to interact with the API’s resources without having any of the implementation logic in place.

The more details can be found through following documentations.

https://swagger.io/docs/ 

http://springfox.github.io/springfox/docs/current/

 

Springfox for Swagger

The Swagger 2 specification, which is known as OpenAPI specification has several implementations. Currently, Springfox that has replaced Swagger-SpringMVC (Swagger 1.2 and older) is popular for Spring Boot applications.

Continue reading “Swagger for documenting your Spring Boot REST Api”

Spring Boot + SLF4J : Enhance the Application logging with SLF4J Mapped Diagnostic Context (MDC)

 

 

What is SLF4J?

I believe that SLF4J is not a new concept for most of the java developers. Here we are going to look at the MDC feature of the logging framework. If you need to brush up your knowledge on SLF4J,  here it is the time.

The Simple Logging Facade for Java (SLF4J) serves as a simple facade or abstraction for various logging frameworks, such as java.util.logginglogback and log4j.

SLF4J allows the end-user to plug in the desired logging framework at deployment time.

Continue reading “Spring Boot + SLF4J : Enhance the Application logging with SLF4J Mapped Diagnostic Context (MDC)”

Microservices: Declare Zuul routes with Eureka serviceId (Spring Cloud + Zuul + Eureka)

 

In a previous article, we have declared/defined the Zuul routes by providing the service details (URL) manually (Click here to visit that article). That means we have provided the domain name or ip address  and port number of each service.  Just think of a situation where the application contains a large number of microservices. Do you think that it is practical to find (manually) the server details (ip address/domain) and port details of every service? If that is difficult, then how do we declare the zuul route mapping to expose each service through the Zuul Proxy?

The solution is to perform the Zuul routes mapping with serviceId registered in the Eureka Server“.

 

Here i am not going to discuss about the importance of Netflix Zuul Proxy or Netflix Eureka server.  I have already written two separate articles on both of those areas. If you need to refresh your knowledge on those areas, please refer the relevant articles.

 

What we are going to do here?

In order to demonstrate the serviceId based Zuul route mapping, we will be creating following set of applications.

  • Eureka Server :- Spring Boot Applciation to act as Eureka Server. All the microservices will be registered here.
  • Zuul Proxy: – Spring Boot Application to act as Zuul Reverse Proxy. This is the centralized gateway for directing all the requests for the misroservices. Zuul proxy will communicate with Eureka server to get the details (ip address and port) of the relevant microservice for delegating the client request.
  • student-service :- just dummy microservice for representing the backend business service.

 

Lets create them one by one. The full source code of this application can be found at GitHub.

 

Eureka Server

Eureka Server is just another spring boot application with Spring Cloud Netflix Eureka dependency. Then annotate the main spring boot configuration class with @EnableEurekaServer annotation.

Therefore create a spring boot application with Eureka dependency.

eureke-server

 

Then  add the @EnableEurekaServer annotation to the main Spring Boot Application configuration class (That is the class annotated with @SpringBootApplication annotation)

 

 

application.properties (Eureka Server)

Continue reading “Microservices: Declare Zuul routes with Eureka serviceId (Spring Cloud + Zuul + Eureka)”

Microservices: Request Routing with Zuul Proxy (Spring Boot + Spring Cloud + Netflix Zuul)

 

In this article, i am going to how to create two microservices and expose them through Netflix Zuul Proxy.  Here i will show you step by step guide on setting up the Zuul proxy and routing the client requests to the related microservices.

 

What is Zuul and  importance of reverse proxy?

Zuul is an api gateway (or rather Reverse Proxy) comes under the Netflix OSS stack. If you want to know the importance of reverse proxy in microservices architecture or know about Zuul,  Please click here  to refer my article on that.  It is recommended to go through that article, before moving forward with this article.

 

Source Code

The fully source code related to this article can be found at GitHub. Click here to get it.

 

Setting up Microservices

In order to demonstrate the capabilities of Zuul proxy, i will set up two spring boot applications as microservices.

  • student-service
  • course-service

For the simplicity of this article, i will just post only the important code segments of above micorservices here. If you want to go thorough full application code, please get the source from the GitHub.

Important: First of all, i need to emphasize that all the REST endpoints are not properly implemented and they just contain few hardcoded values. The purpose of this article is to demonstrate the capabilities of the Zuul proxy in the context of Routing.  If your real project implementation, you can follow the best practices and standards to implement the controller logic as your wish. Here i have just set up few controllers and RESTFul endpoints for the demonstration purpose. 

 

student-service

Lets look at the StudentControlller.

 

The REST endpoints exposed in the StudentController can be listed as below.

#getting the name of the controller
GET  http://localhost:8081/name

#getting the student by student Id
GET  http://localhost:8081/students/{student_id}

#getting a list of students by course id
GET  http://localhost:8081/courses/{course_id}/students

#getting a list of students who are registered for a particular course in the particular department. 
GET  http://localhost:8081/departments/{department_id}/courses/{course_id}/students

 

You can see that the  REST endpoints contains simple URI Path (Resource Path) to some complex URI path with set of path variables. I have added those endpoints intentionally to show you how to map the routes for the those endpoints  in Zuul Proxy.

The student-service can be up and run with following command.  It will run on port 8081.

mvn spring-boot:run

 

 

course-service

Lets look at the CourseController

 

The REST endpoints exposed in the CourseController can be listed as below.

#getting the all courses
GET  http://localhost:8082/courses

#getting the course by course_id
GET  http://localhost:8081/courses/{course_id}

 

The course-service can be up and run with following command.  It will run on port 8082.

mvn spring-boot:run

 

 

Setting up the Zuul Proxy

I know that most people are curiously waited until i start this section of the article. and lets start it now.

 

How to create the Zuul Proxy?

Just believe me that Zuul proxy is just another spring boot application. It has the Spring Cloud Netflix Zuul on its classpath dependencies and annotated the main SpringBootApplication configuration class with @EnableZuulProxy annotation.

 

Lets create our Zuul Proxy application.

Go to https://start.spring.io/ and generate a Spring Boot Application with dependency Zuul. Please refer the below screen shot.

Screen Shot 2018-03-11 at 1.51.58 PM.png

 

Then open the generated project and annotate the main spring boot application configuration with @EnableZuulProxy annotation.

 

Lets change the port of the Zuul Proxy application into any port that is not in use. Here i will change it to 7070.

The Zuul Proxy can be up and run with following command.

mvn spring-boot:run

 

 

Route mapping with Zuul.

We have set up two microservices in our local server. one is running on port 8081 and other one is running on port 8082.  We need to expose those two microservices through the Zuul proxy running on port 7070.  These route mapping can be done in the application.properties file in the Zuul Proxy Application.

 

Lets look at how the REST endpoints in the student-service will be exposed through the Zuul proxy.

 

1.  URI resource mapping for  http://localhost:8081/name (No Path Variable)

zuul.routes.website-name.url = http://localhost:8081/name

Here you can see that it is a simple URI mapping. There is no path variable associated with it.  According to the above route mapping, it will consider the website-name as the default route mapping. Therefore any request for the /website-name will be redirected to the http://localhost:8081/name.

e.g:-  http://localhost:7070/website-name  SEND TO http://localhost:8081/name

Since there is no path mapping, the path will be considered as “website-name

Screen Shot 2018-03-11 at 8.13.44 PM

 

 

2.  URI resource mapping for  http://localhost:8081/students/{student_id}

You can notice that there is a path variable exists in the URI resource path. Therefore we need to do the “path” mapping too.

zuul.routes.students.path = /students/*
zuul.routes.students.url = http://localhost:8081/students

According to the above route mapping, any request for the /students/* will be directed to http://localhost:8081/students. (This is applicable for any request that matches the above pattern)

Therefore http://localhost:7070/students/1  will be directed to http://localhost:8081/students/1

Screen Shot 2018-03-11 at 8.16.34 PM

 

 

3. URI resource mapping for http://localhost:8081/courses/{course_id}/students

zuul.routes.students-courses.path = /courses/*/students
zuul.routes.students-courses.url = http://localhost:8081/courses

According to the above mapping any request that matches the /courses/*/students pattern will be directed to the url declared along with path variables.

The request for http://localhost:7070/courses/1/students will be directed to the http://localhost:8081/courses/1/students.

I know that now you are confused and thinking of why the URL path doest not start with /students-courses? It is the name that we have used to declare the URL (zuul.routes.students-courses.url).

Keep it in your mind that if there is a path declared in the application.properties file, that path will be considered.  If there is no path declared, then it will consider the name defined in the url mapping as the path. (This is the default behavior)

Screen Shot 2018-03-11 at 8.33.41 PM

 

 

4. http://localhost:8081/departments/{department_id}/courses/{course_id}/students

Here you can see that there are two path variables are available.

zuul.routes.department-courses-students.path = /departments/*/courses/*/students
zuul.routes.department-courses-students.url = http://localhost:8081/departments

Any request that matches the /departments//courses//students pattern, will be redirected to the endpoint http://localhost:8081/departments//courses//students URL along with path variables.

e.g:- http://localhost:7070/departments/1/courses/2/students  WILL BE DIRECTED TO http://localhost:8081/departments/1/courses/2/students

Screen Shot 2018-03-11 at 8.35.28 PM

 

Now we have completed the route mapping for all the REST services published in the student-service. Now lets look at how the REST endpoints in the course-service will be  exposed through the Zuul proxy.

 

In the course-service, there are only two REST endpoints. we can do just one simple mapping for both of those endpoints.

# zuul route mapping for the course-service
zuul.routes.courses.url = http://localhost:8082/courses

According to the above route mapping, any request for the /courses will be directed to the http://localhost:8082/courses url

 

http://localhost:7070/courses will forward to http://localhost:8082/courses

Screen Shot 2018-03-11 at 8.37.46 PM

 

http://localhost:7070/courses/1 will forward to http://localhost:8082/courses/1

Screen Shot 2018-03-11 at 8.44.54 PM

 

In this article, i have guided you on exposing the micro services with through Zuul Proxy with Simple URI resource mapping (no path variables) to some complex URI resource mapping (with multiple path variables)

If you want to learn more about Spring Cloud Zuul Proxy,  please click following link to visit the official documentation.

Click here to visit the Spring Cloud Documentation on Routing and Filtering with Zuul

Netflix Zuul : Importance of Reverse Proxy in Microservices Architecture (Spring Cloud + Netflix Zuul)

 

What is Zuul?

Zuul is a Proxy server (proxy service) provided by Netflix OSS. It provides wide range of features such as dynamic routing, filtering requests and server side load balancing etc…

In microservices architecture, Zuul acts as the api gateway for all the deployed microservices and it sits as the middle man in between client applications and backend services. This means that all the microservices will be exposed to the external parties (services or applications)  through the Zuul proxy. If any service/application need to access the any of the microservices deployed in behind the reverse proxy, it has to come through the Zuul proxy.  Zuul will hide the identities of the server applications behind the proxy and serve the client applications exposing its identity (identity of the reverse proxy) on behalf of backend servers and sever applications.  Therefore Zuul is identified as a Reverse Proxy.

 

Forward Proxy and Reverse Proxy

Here we should know what is the difference between Proxy (forward Proxy) and Reverse Proxy.  One is for protecting/hiding clients and other one is for protecting/hiding servers.

Forward Proxy is the proxy for the client and it hides the identities of the clients. It receives the request from the client and sends the requests to the server on behalf of the clients. The main purpose of forward proxy is to act on behalf of clients by hiding their identities.  The forward proxies are mainly used to access the contents or websites, that is blocked by your ISP or blocked for your country/area.

Proxy-sites.png

 

Reverse Proxy does the opposite of what the Forward Proxy does. It hides the identities of the servers and receive the requests from clients on behalf of servers. Behind the reverse proxy there might be different web services and servers may exist. It is the responsibility of the reverse proxy to delegate the client request to the relevant service/server application and responds back to the client. Therefore the main purpose of reverse proxy is to  server client applications on behalf of set of backend applications deployed in behind the reverse proxy.

Sometimes there might be several instances of the same service or server may running in behind the reverse proxy and that is known as clustering.  In this situation,the reverse proxy may determine the most appropriate server instance(or cluster node) for serving the client request and will delegate the request for that cluster node.  This is done/achieved with the load balancing application available in the reverse proxy.  Clustering will ensure the high availability of service (even if one node is down, the request will be served by next available node) and proper load balancing among multiple requests.  Lets look at those later with some other article.

Proxy (both proxies) will provide the centralized point(or rather single point) of access for the communication between client and servers. Therefore it is easy to implement the enforcing of security policies, content filtering and other constraints with proxies. Both Forward and Reverse proxies exists (should place) in between client and server.

 

Please refer the following diagram to see the role of the Reverse Proxy.

reverse_proxy.png

 

A reverse proxy allows you to route requests to a single domain to multiple backing services behind that proxy. This can be useful in situations where you want to break up your application into several loosely-coupled components (like microservices) and distribute them even in different servers but, you need to expose them to the public under a single domain. Then the users will get the same experience as  they are communicating with a single application.  This can be achieved with dynamic routing feature available in the reverse proxy.

 

 

The importance of Reverse Proxy in Microservices architecture can be summarized as below. 

 

  • High Availability: provides the supports for the high availability of the microservice in the clustered environment. Even if one service (node) fails down, the client request will be served by next available node.
  • Load Balancing: supports for the load balancing among multiple nodes in the cluster. Therefore it make sure that no server  or service is overloaded with multiple requests. It will properly distribute the requests among multiple nodes to maximize the utilization of resources.
  • Single Point of Access with Request and Response Filtering: This is the single point of access or the gateway for the microservices. If the microservices are exposed through the reverse proxy, the the external clients can access/consume those services through the reverse proxy. Therefore it is possible to filter the requests that are coming to the microservices. In addition, it can filter the responses that are going from the misroservices too. Therefore this will provide an extra level of request and response filtering support for the microservices.  Authentication and Authorization security policies can be enforced with making use of this single point of access.
  • Dynamic Routing:  There may be multiple microservices which are deployed in behind the reverse proxy. Those services may deployed in different servers with different domain names. Sometimes in the same server (where the reverse proxy is deployed) but with different ports. All the services will be exposed to public (client applications) through the reverse proxy and the proxy will assign their own route (url path)  to each service. each route will be mapped to original route in the related service. Therefore client will get the same experience as it communicates with a single application and SSO (Single Sign On) and CORS (Cross Origin Resource Sharing) related issue will be sorted.

 

 

The Netflix Zuul as a Reverse Proxy

We have already discussed the importance of the reverse proxy in the Microservices architecture and now it is the time to select the appropriate Reverse Proxy to use. The Netflix has introduced Zuul as the reverse proxy under their OSS (Open Source Software) stack.

Zuul proxy will provide following main functionalities as a reverse proxy. They can be listed as follows.  Lets look at each of them in detailed in separate articles.

  • Dynamic Routing
  • Request and Response Filtering
  • Server Side Load Balancing

 

Java Application Code Coverage with Cobertura + maven

Cobertura is a free Java tool that calculates the percentage of code accessed by tests. It can be used to identify which parts of your Java program are lacking test coverage.

In this article, i am going to show you how to use Cobertura for maven based java application for measuring the code coverage by test cases.

 

Cobertura Code Coverage Report

Go to the root of the project and run the following command  that will analyze the code coverage with Cobertura and generate the output report (showing the detailed analysis of coverage).

mvn cobertura:cobertura

 

Screen Shot 2018-03-01 at 10.07.44 AM.png

 

Accessing the report

The generated code coverage analysis report can be accessed through  ${project}/target/site/cobertura/index.html 

Screen Shot 2018-03-01 at 10.13.38 AM.png