DEV Community: Swayam Samyak Debasis

More Stuffs About React Native

Swayam Samyak Debasis — Mon, 10 Aug 2020 02:48:41 +0000

This is an extension to my previous blog on Getting to know about React Native. In this article, I am going to discuss the advantages and disadvantages of react-native. This is going to be my experience in React Native and the information I gathered.

Advantages

As I belong to Reactjs background I find it very easy to write a React Native code. The only difference I have seen as a beginner in react native is the HTML tags. As we are freely using HTML elements in Reactjs in jsx format. As far as I know, we are not allowed to do that in React Native. It imports different packages for different purposes. But as we are using basically the same language as we have been using in web development, it is quite advantageous. Other the rendering HTML elements everything else is the same starting from basic state management to using high-level state management techniques such as Redux.

Disadvantages

According to the people who are already doing React Native it occasionally crashes during development for some unknown reason which makes it a little bit hard to debut. It has also some performance issues. The shortcomings that I faced during development in React Native is it usually requires different components for android and ios. And the design looks different so we generally have to change the code according to ios and android requirements. In short, the is relatively lots of extra stuff to do in React Native than any other framework.

For job purposes

I would prefer learning to React Native if you are applying for jobs recently as React Native is being used in many companies and there is a high possibility of getting React Naive jobs then newly developed framework such as Flutter.

Getting to know about React Native

Swayam Samyak Debasis — Tue, 21 Jul 2020 16:25:49 +0000

These days I find android apps very fascinating and learning it is my next target. As a web developer, I thought picking up React Native would be a great idea as it is based on my favorite library React. In this blog, I will be providing my opinions on React Native.

Introduction

React Native is a framework that is built on React for the development of android and ios apps for native look and feel. It was released in 2015 and is being used by major companies since then. It can be used to build both ios and android apps. But it has its own shortcomings.

React Native vs Native Languages such as Java/Kotlin

It is very obvious that Java/Kotlin being used for android development for a relatively long period of time than React Native. So it has great community support and it's quite easy to get into. And for React Native it's kind of a compulsion to know React or Javascript in general. But on the other hand React Native can develop apps on both the platforms android and ios.

React Native vs web view technologies such as Cordova

Cordova is a technology used to convert basic web application into android and ios. But the disadvantage here is the app we develop in Cordova looks like a website Captured in a frame. And as React Native is also based on Javascript and also provides a native look It holds an advantage here.

React Native vs Flutter

Flutter is similar to React Native but is released 2 years after it. It is quite new to the app development world but has gained its popularity soon after its introduction. It is written in dart which leads to the learning of a completely new language rather than using the existing languages. It's said that it is better than React Native because it overcomes various shortcomings that are being faced by React Native.

My opinions on React Native

As a react developer I obviously like React Native as I can build android apps with my current skill set. But in the future, I would like to work on Flutter and also the native languages. I am happy that the development community is rising very fast to provide us the most interesting technologies around and I would like to explore more in the future.

For Beginners

I would suggest if you are comfortable with React or Javascript in general then go for React Native otherwise learn any native language such as Kotlin or Swift. And another option is Flutter which is in my opinion by far the best option to learn a new language and build really good native apps.

Introduction to Deno

Swayam Samyak Debasis — Mon, 22 Jun 2020 15:19:18 +0000

Introduction

Deno is an opensource runtime for Javascript which supports typescript out of the box.It uses V8 engine. According to Ryan Dahl, he made many mistakes in node he rectified in Deno. One of them is the use of npm to manage packages. Instead of doing that Deno can directly download the packages after importing it in the code via a link. So, there is no need for package.json but it was cool how it organized every asset of code and allows to change it manually.

Advantages of using Deno:-

It is more secure.
Is typescript dependant
Packages can be directly imported without the use of npm.
It has a standard library.

Installation

There are various ways of installing Deno based on the operating system:-
Linux Shell:
curl -fsSL https://deno.land/x/install/install.sh | sh
Windows:
For installation in windows installation through chocolatey is the better option but there are several other ways.
choco install deno
Mac(Homebrew):
brew install deno

Importing modules via Standard library

Deno Provides the use of Standard Library rather than using npm to install modules as a result of this there is no need for the creation of the massive folder known as node_modules.
import { module } from "URL of the standard library";

Use of TypeScript

const greeting: string = "Hello World";
console.log(greeting);

In this case, if we do not mention the datatype it compiles and runs in a regular manner but if we mention a datatype Deno detects the use of typescript and compiles accordingly by taking the datatype into consideration.

Setting up a simple server

import { serve } from "https://deno.land/std/http/server.ts";
const server = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of server) {
  req.respond({ body: "Hello World\n" });
}

This is a simple server setup built-in, Deno. Here we are first importing the serve module from the HTTP standard library and then setting up the req object and sending a response of "Hello world" to the body.

Running the Server

deno run --allow-net simpleServer.ts
This is the command which is used to run our server which resides in the file simpleServer.ts.The "--allow-net" part is used because of security purposes.

Setting up Restful API using oak

Server.ts

import { Application } from 'https://deno.land/x/oak/mod.ts'
import router from './Routes.ts';

const port = 5000

const app = new Application()



app.use(router.routes())
app.use(router.allowedMethods())




console.log(`Server running on port ${port}`)

await app.listen({ port })

This is the setup of the server which uses top-level await which does not require an async function. It runs on port 5000. It's importing the routes from Routes.ts file.

Routes.ts

import { Router } from 'https://deno.land/x/oak/mod.ts'
import { getProducts,getProduct,addProduct,updateProduct,deleteProduct } from './controllers/products.ts' 


const router = new Router()


router.get('/api/v1/products',getProducts)
       .get('/api/v1/products/:id',getProduct)
       .post('/api/v1/products',addProduct)
       .put('/api/v1/products/:id',updateProduct)
       .delete('/api/v1/products/:id',deleteProduct)


export default router;

This specifies the routes of different operations in CRUD which are taking place in products.ts in controllers folder.

product.ts

import { v4 } from 'http://deno.land/std/uuid/mod.ts'
import { Product } from '../Types.ts';

let products: Product[] = [


{
    id:"1",
    name: "Product one",
    description:"This is product one",
    price: 29.99

},
{
    id:"2",
    name: "Product two",
    description:"This is product two",
    price: 39.99

},
{
    id:"3",
    name: "Product three",
    description:"This is product three",
    price: 59.99

}

]

// @desc Get all Products
// @route GET /api/v1/products

const getProducts = ({ response }: { response: any }) => {
    response.body = {
    success: true,
    data: products
    }
}

// @desc Get single Product
// @route GET /api/v1/product/:id

const getProduct = ({ params,response }: { params: { id: string }, response: any }) => {
   const product: Product| undefined = products.find(p => p.id === params.id)

   if(product) {
    response.status = 200
    response.body = {
        success: true,
        data: product
    } 
    }else {
        response.status = 404
        response.body = {
        success: false,
        msg: 'No Product found'
        }

   }
}


// @desc Add Product
// @route POST /api/v1/products

const addProduct = async({ request,response }: { request:any , response: any }) => {
const body = await request.body()

if(!request.hasBody){
response.status = 400
    response.body = {
    success:false,
    msg: 'No Data'
    } 
    }else {
        const product: Product = body.value
        product.id = v4.generate()
        products.push(product)
        response.status = 201
        response.body = {
            success: true,
            data:product
        }
}

}

// @desc Update Product
// @route PUT /api/v1/products

const updateProduct = async({ params,request,response }: { params: { id:string },request:any, response: any }) => {
   const product: Product| undefined = products.find(p => p.id === params.id)

   if(product) {
        const body = await request.body()

        const updateData: { name?:string;description?:string;price?:number } = body.value

        products = products.map(p => p.id === params.id ? { ...p,...updateData }:p)

        response.status = 200
        response.body = {
            success: true,
            data: products
        }
    }else {
        response.status = 404
        response.body = {
        success: false,
        msg: 'No Product found'
        }
    }

   }


// @desc DELETE Product
// @route DELETE /api/v1/product/:id

const deleteProduct = ({ params,response }: { params:{ id:string }, response: any }) => {
    products = products.filter(p => p.id !== params.id)
    response.body = {
        success: true,
        msg: 'Product removed'
    }
}
export { getProducts,getProduct,addProduct,updateProduct,deleteProduct }

In this file, we use some temporary data to perform our CRUD operations. This file is responsible for the fetching of data, creating, deleting, and updating it. As these data are temporary(no data stored in a database) the effect disappears after closing the server.
Types.ts

export interface Product {
    id:string;
    name:string;
    description:string;
    price:number;
}

This is basically the interface where we specify the datatypes which are being used in product.ts file.

Conclusion

Deno is having a great future in the field of web development and can someday replace node. For the people who are starting node and having a thought that node is dead, in my opinion, that's not true as we can't replace the current technologies which are made in node to Deno. But the current features in Deno makes it a little more superior to node. But currently continuing with node is a better option as both are nearly the same.

The Github link to this code is https://github.com/Swayamsvk/Deno_REST
This blog is inspired by This youtube video

New Features on my current react project

Swayam Samyak Debasis — Wed, 25 Mar 2020 13:31:36 +0000

Actually, I have made a GitHub account finder using React and GitHub API. Now, I want to add features so that it becomes a complete MERN project. Any suggestions about the features.

What are the recent javascript technologies that I should use in my project?

Swayam Samyak Debasis — Tue, 24 Mar 2020 16:17:26 +0000

Actually,I am going to work on a new project which is a chatroom using web sockets in node.What are the other recent technologies I should use in this project to keep myself updated with the recent technologies.

What are some of the good project ideas that use the concept of web sockets?

Swayam Samyak Debasis — Mon, 23 Mar 2020 12:49:47 +0000

Actually, we are a two-person team and want to build something interesting using web sockets with nodejs. Any suggestions are welcome.