How Android /Backend Engineer can become Front End engineer using Kotlin-react
Most modern system tend to use this kind of architecture lately. Where you have a front end (usually web app), mobile client (Android and iOS) and then the backend. Each has their own dominant language and paradigm. JavaScript for front end, Kotlin and Objective-C for mobile, Java and Go for backend.
This kind be troublesome for companies that have very limited resource. With the emergence of kotlin it’s possible to build this kind of system with a single language.
Kotlin-React
I have Zero experience in react. So this post will be written as a journey instead of a complete guide. As a start the official kotlin documentation has an excellent tutorial, please try and finish it from the link below.
Now you know how to create a react page using kotlin we can move on to the next thing. With react we could build a kind of frontend known as Single Page Application (SPA).
A Single Page Application is a web application or website that interacts with the web browser by dynamically, rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.
It has lots of benefit such as we don’t need to load everything when the user navigate (html, JavaScript, assets, etc.) But it also introduce some difficulties. How do we navigate “between pages”. Or if we want to implement REST protocol, how we update the URL to represent the resources?
Modern frontend usually have “routing component” that handles this kind of problem. And we start our journey by implementing routing for our website.
This post will create a simple web app that manage an order. It will show a list of our current order. And then implement the functionality for adding and deleting order.
Lets get started! First we create our basic pages. Our home page, about page and order page.
If you notice some difference with the kotlin tutorial because we are using React functional component instead of React classes. For simple pages is a lot easier and less boiler plate to write functional component instead of class component. To understand more about the difference and what both approach can and can’t do, this link is a must read!
After we finish creating our basic pages, we create our App class and call it from our main function.
In this app class we create an extension function appWithRouter that will handle generating link and handling routing to our pages.
To be able to use the react-router you need to add this dependency to your build.gradle.kts
implementation("org.jetbrains:kotlin-react-router-dom:5.2.0-pre.139-kotlin-1.4.21")With this our simple routing app is done. It’s pretty simple and straight forward. You can try navigating between the pages by clicking on the link.
Listing the order
Now we have the basic navigation, we want to build the order page. First we create Order model that represent the object that we want. And then we use a singleton (Order manager) as our persistent layer (no need to use any real DB for now). Lastly we initialize it with some values.
Now our persistent layer is ready. Let’s try to list the initial value in our page.
Things to notice. To use state in functional component we use the useState() function. The useState will return a pair that will directly destructured into :
- items, a reference to our current state (The type is the same type as returned by OrderManager.getOrders, MutableList<Order>)
- setItems, a function that can be used to set the state (The type is
RSetState<MutableList<Order>>).
For now we only use the items variable to get the name and price of our order.
The next thing we do is when a user click one of the order, we’ll show a detail page for that order.
To do that we need to create the order detail page. This page will show an info based on the orderId that is passed to the page. To accomodate that we need to create OrderDetailProps that contains orderId value. Is the same as creating RProps for react classes. The only difference is when we want to use it on the functional component. We use useParams to get the value.
A little bit on React Props and State. In a React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component. The state can be initialized by props. and any other method in this class can reference the props using this.
Now we have the order detail page. We need to modify our Orders page by changing the item name to routelink to make it clickable. And then add a route switch to handle the routing. The route switch will show the order detail page when the orderId is passed and a default page when there’s no id passed.
Add and Delete Order
The final thing to do is to add a function to add and delete the order.
To do this we add a text type input component to the order page. And create a state to hold the value. This time we are using a useState with the state is initialized to an empty string. When the value is changed, we update our text state by calling the setText function from our useState function.
The next modification we make is add a button next to our input component. When the button is clicked, the onClick function will handle creating a new order using the value stored in our text state .
The last modification we need to do is to add delete button to the order list for each item. When the user click this button, the onClick function will update our items state and remove the order from our manager. With that our work is done. And the complete order page would look like below:
There’s a lot of things that need to be learn and understand. But I’m hoping this post can be a starting point for a lot of people. See you on another post.
