When we build an international web site, multi-lingual support is always one of the essential feature. Fortunately, if we use React, there are quite some awesome libraries that come in handy and react-i18next is one of the most popular open source libraries and here is simple example to get it started.

The very first thing is always to create a react app using create-react-app and install those necessary npm packages.

And here we put those translations to static json files and you can put it in Rest endpoint if you want.

Create assets directory in public folder.

And then create 2 simple translation files, one for English and one for traditional Chinese and put them in public/assets/i18n/translations folder.

The next step is to create the i18next configuration/initiation script. Let’s create a file, i18n.js, under the src directory:

Now let’s create 2 dummy components, one to show the “Hello” string and the other shows “Thank You”. The react-i18next library provides several ways to access translations, e.g., context API, hooks, HOC, etc. In the following sample codes, the Hello.js uses hooks and ThankYou.js uses HOC.

Now let’s create a simple language selector that contains a 2 radio buttons for us to choose between English and Traditional Chinese. For the following codes, you can see we can simply pass the locale name to the i18n.changeLanguage function to switch between languages.

Finally, let’s modify the App.js to show all the components we have created so far. You can see we use Suspense here, as the react-i18next loads locale resources file asynchronously and we have to wait until the loading is completed before we can use it.

The result!

Github for source codes : https://github.com/rickcodetalk/test-react-i18next

React Multi-lingual with react-i18next was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

Spring is probably the most popular framework in the Java space. We all love its dependency injection and all that autowired/configuration magic. It makes unit testing a piece of cake.

On the other hand, Vertx.io, which is a newer toolkit/framework, is gaining traction in recent years. It is light-weight and supports fully asynchronous programming via event loop like Node.js and eventbus messaging like Akka. Also, the community has made quite a lot of asynchronous tools/db clients like Async MySQL / PostgreSQL Client, which make it another trendy choice besides Spring.

It seems that it’s tough to choose between Vertx and Spring for new projects, but the good news is they are indeed not mutually exclusive! The following is a simple example to illustrate the setup.

This example project is about deploying a Vertical in a Springboot application. The Vertical provides a function for querying MySQL using an Async MySQL client. The function can be called directly or via vertx.eventbus.

First of all, create a simple maven Springboot application. You can create it through Spring Initializer. Then add the following to the pom.xml:

As we’re going to query mysql using Async MySQL / PostgreSQL Client, a very primitive MysqlClient.java is created and the MySQL configuration is put on the application.yaml.

Create a dummy user table with 2 fields and insert some data:

Optionally, create a repository class for accessing the user table:

Now we can create the vertical, which has a single method for handling MySQL queries.

Finally, create the Spring application and add a deployVerticle method with the @PostConstruct annotation.

If you run the Spring application, you will see the following System printout of “dbVerticle deployed” and it means the Verticle is running on the Spring application.

2019-02-11 08:56:27.110  INFO 29444 --- [ntloop-thread-0] i.v.ext.asyncsql.impl.MYSQLClientImpl    : Creating configuration for localhost:3306
2019-02-11 08:56:27.442  INFO 29444 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
dbVerticle deployed
2019-02-11 08:56:27.848  INFO 29444 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2019-02-11 08:56:27.853  INFO 29444 --- [           main] n.r.s.SpringVertxExampleApplication      : Started SpringVertxExampleApplication in 5.393 seconds (JVM running for 6.671)

To test it, we can simply add a db query request right after the Verticle was deployed.

The console prints out the following:

dbVerticle deployed
success
[{"id":10466,"username":"ricklee"}]
[{"id":10468,"username":"maryjohnson"}]

This example illustrated how you can enjoy the facilities from both the Spring and Vertx world with a simple setup.

Source code here: https://github.com/rickcodetalk/spring-vertx-example

How to set up Vertx in Spring was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

Newer version of Envoy (after v1.17.0?) supports a feature, External Authorization (part of the v2 API), which you can configure the network or http filter to call external service (via http or gRPC) for authentication/authorization purpose. This is a very simple example to illustrate the setup.

This example is based on the front-proxy example in official Envoy github

https://github.com/envoyproxy/envoy/tree/master/examples/front-proxy

After cloning the example from github, go to the examples/front-proxy directory and run

~/Documents/envoy-ext-authz 🐰$ docker-compose up -d
Starting envoy-ext-authz_service2_1    ... done
Starting envoy-ext-authz_front-envoy_1 ... done
Starting envoy-ext-authz_service1_1    ... done

The front-envoy and 2 services with side-car envoy dockers are running. Try to access the http://localhost:8000/service/1 endpoint using Postman.

Now what about if we want to authenticate the request before it’s passed to upstream services?

First of all, let’s create a dummy authentication service using express that will extract the basic auth header and validate the username and password in hardcoded manner.

Dockerize it

Add the following to the docker-compose.yml

Run docker-compose build

~/Documents/envoy-ext-authz 🐰$ docker-compose up --build

Now there should be 4 docker containers running:

The final step is to modify the front-envoy.yaml. In the filter section, add the envoy.ext-authz filter and under the clusters section, add the auth service cluster.

All set! Let’s run the request again

It got a 403 Forbidden without setting the basic auth header.

The request is directed to service 1 successful when the username & password is correct.

Got 401 when the password didn’t match.

Restriction

It’s pretty straight forward, but one of restriction I encountered is the request body cannot be passed to the external auth service, so if you do something like verifying digital signature against the request body, it won’t work.

Source Code

https://github.com/rickcodetalk/envoy-ext-authz

Envoy External Authorization — A simple example was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redis 5 was released several months ago and the most exciting new feature is probably the Redis streams. It was expected to be included in Redis 4, but got delay and delay…This new feature extends the Redis capability to make it cover part of the Kafka and RabbitMQ (RabbitMQ has more fancy features, but not everyone cares)’s core functionality, which is the unified log. The following demonstrates the feature via simple command lines:

To create or add item to the stream:

/* 
   symbols is the log name, * means default id which is 
   current timestamp + running sequence and follow by
   1 or multiple field/value pair(s)
*/ 
127.0.0.1:6379> xadd stocks * symbol AAPL last 164.23
"1545111644949-0"
127.0.0.1:6379> xadd stocks * symbol TSLA last 300.13 
"1545111689782-0"
127.0.0.1:6379> xadd stocks * symbol FB last 144.22 
"1545111721902-0"

To get the length of the stream:

127.0.0.1:6379> xlen stocks 
(integer) 3

To query the stream by range:

/*  
  "-" means the first item  
  "+" means the last item  
  "xrange stocks - +" means get all items 
*/ 
127.0.0.1:6379> xrange stocks - + 
1) 1) "1545111644949-0"    
   2) 1) "symbol"       
      2) "AAPL"       
      3) "last"       
      4) "164.23" 
2) 1) "1545111689782-0"    
   2) 1) "symbol"       
      2) "TSLA"       
      3) "last"       
      4) "300.13" 
3) 1) "1545111721902-0"    
   2) 1) "symbol"       
      2) "FB"       
      3) "last"       
      4) "144.22"

To query the stream from a specific timestamp to the last item:

/*   
  Doesn't need to include the running sequence of the id 
*/ 
127.0.0.1:6379> xrange stocks 1545111689782 + 
1) 1) "1545111689782-0"    
   2) 1) "symbol"       
      2) "TSLA"       
      3) "last"       
      4) "300.13" 
2) 1) "1545111721902-0"    
   2) 1) "symbol"       
      2) "FB"       
      3) "last"       
      4) "144.22"

To listen new item:

/* listening client */ 
127.0.0.1:6379> xread block 0 streams stocks 1545111721902

/* On other client, add a new entry */ 
127.0.0.1:6379> xadd stocks * symbol MSFT last 103.20 
"1545112652244-0"

/* On the listening client */ 
127.0.0.1:6379> xread block 0 streams stocks 1545111721902 
1) 1) "stocks"    
   2) 1) 1) "1545112652244-0"          
         2) 1) "symbol"             
            2) "MSFT"             
            3) "last"             
            4) "103.20"

To create consumer group:

/* tradingservice is the consumer group name */ 
127.0.0.1:6379> xgroup create stocks tradingservice $ 
OK

Consumer group to listen to new item:

/* Client 1 - instance1 is the client name */ 
127.0.0.1:6379> xreadgroup block 0 group tradingservice instance1 streams stocks >

/* Client 2 */ 
127.0.0.1:6379> xreadgroup block 0 group tradingservice instance2 streams stocks >

/* Other client to add new item to the stream */ 
127.0.0.1:6379> xadd stocks * symbol NFLX last 310.87 
"1545113281486-0"  

/* Client 1 got the data */ 
127.0.0.1:6379> xreadgroup block 0 group tradingservice instance1 streams stocks > 
1) 1) "stocks"    
   2) 1) 1) "1545113281486-0"          
         2) 1) "symbol"             
            2) "NFLX"             
            3) "last"             
            4) "310.87"              

/* Other client to add new item to the stream */ 
127.0.0.1:6379> xadd stocks * symbol GOOGL last 1032.34 
"1545113291736-0"  

/* Client 2 got the data */ 
127.0.0.1:6379> xreadgroup block 0 group tradingservice instance2 streams stocks > 
1) 1) "stocks"    
   2) 1) 1) "1545113291736-0"          
         2) 1) "symbol"             
            2) "GOOGL"             
            3) "last"             
            4) "1032.34"

That’s only a simple example. The Redis streams does have other useful command like client acknowledgement and recovery of pending items, etc.

The consideration of choosing Redis streams as the pub/sub unified log technology:

General speaking it’s very situational. If you’re building an application that’s more monolithic and is always hosted in a single premises, you can have more choices, you can use Redis, Kafka, ActiveMQ, RabitMQ or even mix of them (not recommended tho). However, if you need to build an extremely scalable/portable application in which you can deploy it to multiple locations easily, e.g., per country, per region, or even per customer or even able to install in customers’ premises or even able to install in one single small device/computer, you must be cautious and choose only simple (as simple as possible) technology stack. Then Redis may be a good choice, as

• It’s very possibly it’s in your original tech stack already, so no additional third-party component to be maintained.
• It’s offered by AWS as ElasticCache service and that enables auto-provisioning and also make those configuration, maintenance and scale up/down in near zero effort.

What’s coroutine?

Coroutine is basically a new syntax for async programming. It’s like async-await in javascript and with that we can get rid of those very heavy Future boilerplate code.

Simple example:

The launch block will launch suspend (async) function in non-blocking manner, so you will see the “Main thread here” shown before the query function is completed.

Running suspend functions concurrently:

From the result, you can see the fakeQuery1 and fakeQuery2 have a delay of 3s and 2s, but the total time taken for executing both suspend functions is 3s, so they were running concurrently!

Conclusion:

There are quite many ways that can do concurrent problem. In the back old day, we did multi-threading, it’s real fast only given you’re a very experienced multi-threading programmer, but with coroutine, the syntax and structure are not much different from normal sequential programming and basically every programmer can master that easily. One more thing, coroutine is very light-weight comparing with threads.

The bundle size of the modern Single Page Application is usually huge, especially if you include tons of third party libraries. User has to wait until the bundle is fully downloaded, in order to interact with the application. It might be a problem for poor Internet connection.

Webpack supports code splitting, which can divide the bundle into pieces. Together with the latest React Suspense/lazy feature. Application can load only the necessary part of code the that moment dynamically.

The following example is created by Create React App and it hides all complexity of the Webpack setup.

Assume we have 2 components, i.e., ComponentA and ComponentB, and ComponentB will only show when the ComponentA is clicked.

The full bundle was downloaded when the page was loaded:

Change to load ComponentB dynamically using React.Suspense

Here we can see the 0.chunk.js and 2.chunk.js were loaded only after the ComponentA was clicked. 0.chunk.js is the ComponentB code and 2.chunk.js is the momentjs library. Thanks for all magic from CRA and React suspense!