DEV Community: Muhamad Amir Azmi

React vs Vue - Local Component State

Muhamad Amir Azmi — Mon, 09 Aug 2021 07:59:15 +0000

React and Vue are some of the most popular front end frameworks that makes the web application becomes Single Page Application (SPA). Those frameworks using components approach for building UI for web application. So, it is necessary to have some kind of temporary data store for each component that can store any value and update the UI and content based on the value stored.

How Both Framework Store Temporary Data

Both in React and Vue have their own way to store local component data state but the concept pretty much the same which is to store temporary data for in the component.

React

In React, they have 2 ways to write a component which are the Class Based component and Functional Based component. The Function Based Component becomes more popular these days after the arrival of the React Hooks including the useState() hooks.

First, let see how to store temporary data in Class Based component.

Class Based Component

import React, { Component } from 'react'

export default class App extends Component {

  // This is where the temp data stored
  state = {
    input: ''
  }

  componentDidMount() {
    // This is how to save data into the state
    this.setState({
      input: 'Please insert your input'
    })
  }

  render() {
    return (
      <div>
        {/* This is how to use the state */}
        <p>{this.state.input}</p>
      </div>
    )
  }
}

The temporary local data for the component will be store in the state object inside the class. Then, the use of 'this' keyword is important when referencing the local state since the state is in the class object.

To store any data into the state, the this.setState() method need to be used as the code shown above.

Functional Based Component

import React, { useState, useEffect } from 'react'

export const App = () => {
  // This is where the temp data stored
  const [input, setInput] = useState('')

  useEffect(() => {
    // This is how to save data into the state
    setInput('Please insert your input')
  }, [])

  return (
    <div>
      {/* This is how to use the state */}
      <p>{input}</p>
    </div>
  )
}

The temporary data for the functional component is being store in the useState() hooks. The useState() hooks can be used multiple times according on how many state we want in the component.

To use the state, we can directly call the variable that has being use in the useState() on top of our component. To update and save a new data to the state, use the setInput for example, to update the input state in the component.

Vue

In Vue, the way the store temporary data quite different (just the codes are different but the concept still the same). In Vue, we are using the data(){} function in the component object. Let's look how to use data() function.

<template>
<!-- This is how to use the state -->
  <p>{{input}}</p>
</template>

<script>
export default {
  // This is where the temp data stored
  data(){
    return{
      input: ''
    }
  },
  created(){
    // This is how to save data into the state
    this.input = 'Please insert your input'
  }
}
</script>

By local data will be return in as object in the data() function inside the component object. Then, to use the state, same as the React functional component, directly call using the state variable.

However, to update the state, the this keyword need to be used to access the state in the component object. Simply by reassign the state using this.[state], will automatically update the state into new one.

Conclusion

Both frameworks have their own way how to store, update and manage the local component state. I believe there are more detailed explanation about state but these are all what I understand through my experience and my self study.

If there are anything missing about local component state for these frameworks, feel free to share in the comment below.

Reference

React Class Component State - https://reactjs.org/docs/faq-state.html
React useState - https://reactjs.org/docs/hooks-state.html
Vue Data Function - https://vuejs.org/v2/guide/components.html

My Experience Converting Django Template to ReactJS

Muhamad Amir Azmi — Tue, 03 Aug 2021 09:41:48 +0000

During my time at MEGASAP, July 2021, they have given me a task to convert the existing Django templates for their attendance tracking dashboard for employee and employer to React due to scalability and better UX in the future. However, they do not want to buy or have another server just to host React front end, so I need to include React directly in Django as an app using "django-admin startapp" command.

Since the React embedded in Django application, I cannot use the common "npx create-react-app" way because the common way will generate the files that might not be accessible in Django statics. So, I need to combine certain library and using Webpack to compile all the Javascript file into one main file (main.js) and directly put the "main.js" into Django static folder.
To enable developing the front end using React, these are the front end tools I need to get set up:

Webpack ⇒ setting up the Javascript, SASS, CSS, Images and others file compilation into a single "main.js" file and output the file into Django static folder.
Babel ⇒ to enable the latest Javascript syntax being convert into older version so that old browser can access the content.
React, React Router, React Hooks ⇒ the typical React library for developing the React application, together with front end routing system and global state management using Context API.
Others React Library ⇒ React i18n for internationalization or language translation, React Helmet for dynamically changing the or any tag based on any condition given.
Other Library ⇒ axios for fetching the data through API from Django Rest Framework.

As for backend, which is the Django, the API need to be built since all the communication for Django to React through REST API. So, the Django Rest Framework has been used.

Working at MEGASAP for a short while really give me some new experience on how to work with React and Django, and how to start a React application without any boilerplate.

Application Requirement

Muhamad Amir Azmi — Fri, 25 Jun 2021 13:47:40 +0000

Introduction

The requirements should not to be too excessive. For now, make sure to take the absolute minimum set of requirements. Not the things that "nice to have" and optional. Just the minimum requirements for the minimum viable product.

It's okay to not have a complete requirements in the beginning. The requirements can always be changed as the project development grows.

Take note that, the requirements should not contain anything related with classes, object orientation yet for this stage.

To show how the system requirements works, let's have an imaginary application idea that we want to build.

Example Application ⇒ Restaurant Reservation and Food Delivery Application

FURPS+ Requirements

One of the most commonly used model is acronym FURPS+. The FURPS+ requirement can fulfilled the functional and non functional requirements of an application.

Functionality ⇒ Capability, Reusability, Security (main features of an app)
Usability ⇒ Human Factors, Aesthetics, Consistency, Documentation (affects the user)
Reliability ⇒ Availability, Failure Rate & Duration, Predictability
Performance ⇒ Speed, Efficiency, Resource Consumption, Scalability
Supportability ⇒ Testability, Extensibility, Serviceability, Configurability
Design (the system design)
Implementation (how to implement the system)
Interface (the interface of internal system)
Physical (hardware and physical constraints)

Functional Requirements

The functional requirements should describes "what the application must do".
The requirements should start with:

The system must do...
The application must do...

Examples:

Allow customers to reserve a table in the restaurant before they arrived.
Allow customers to go through the menu list
Show the date availability for reservation
Show the menu availability and prices
Have the menu category
Have options for dine in, take away or delivery
Allow customers to have their account in the system
Allow customers to save any menu they want
Allow customers to view the detail and progress of food delivery
Allow customers to view the reservation details
Allow customers to change the reservation
Allow customers to cancel the reservation
Have contact section

Non-Functional Requirements

The non functional requirements should describes, maintainability, reliability, usability and availability.
So, each non functional requirements should start with:

The application should be...

Examples:

Accessible from mobile and desktop
User friendly and responsive
Available during peak hours (lunch and dinner)

Conclusion

These requirements might not be the final one and can always be changed in the future. But at least, start writing some requirements before doing anything so that you know what you want to develop later on.

The next steps will be creating Use Cases and User Stories to refine the requirements a little bit more before start designing and developing anything.

Anyway, hope this article give some useful information to you. I'm still learning and will continue creating article here so that I really understand what I'm currently learning.

If something not right in this article, please comment below so that I learn some new stuff to improve my skill.

Thank you for reading my article.

JS vs Python - Variables

Muhamad Amir Azmi — Sat, 05 Jun 2021 05:52:19 +0000

I have been doing web development for a year now and my main language is Javascript. But recently I got a new job offers that plays around Python and Django for their back end. So, I write this article as a note for me to remember the basics of Python and some comparison with my main language, Javascript.

Variables

Python has very simple way to define a variable compared to JS. In Javascript, to define a variable, a keyword need to include in front of variable name to make sure a variable is changeable or not.

Primitive Data Type

The primitive data type for both language pretty much similar:

String
Int
Float
Boolean

Javascript

// Variables

// const --> cannot change the value of a variable
const car = 'honda';   // string
const number = 20;     // number/integer
const price = 20.89;   // float
const isValid = true;  // boolean

// let --> can change and update later
let car2 = 'toyota';   // string
let number2 = 43;      // number/integer
let price2 = 23.89;    // float
let isValid2 = false;  // boolean

// return an error because cannot reassign 
// to const variable
car = 'bmw'

// does not return an error because let 
// can be reassigned
price2 = '18.38

Python

# Variables

# python does not have assignment keyword 
# and variables can be reassigned
van = 'volkswagen'; # string
age = 5;            # int
mileage = 9823.08;  # float
is_good = True;      # bool 
# (the bool in Python must be capitalize, True/False)

# does not return an error because 
# all primitive data type variable can be reassigned
van = 'car'

Multiple Assignment

Python and Javascript can do the multiple assignments but they have different approach. The multiple assignments very useful for one line assignment. The code might seems more clean. Usually I'll do multiple assignments for global or top line in the file.

Javascript

For Javascript, the variable name and value must be couple together and each variable separated with ', '.

// Multiple assignment

// const --> cannot change after initial assignment
const van = 'toyota', year = 2021, kilometers = 238.38, isBroken = true

// let --> can change after initial assignment
let car = 'honda', seats = 4, price = 2384.23, isNew = false

// Reassignment for let variable
seats = 8 // not throw an error

Python

For python, all variables name are group together on the left side and the variables value are group on the right side.

# Multiple assignment

car, seats, mileage, is_new = ('bmw', 4, 3843.49, True)

# The line above can be presented as below:
car = 'bmw'
seats = 4
mileage = 3843.39
is_new = True

Type Conversion or Casting

Both language has their own way to convert primitive data type from one to another. Typically type conversion used to convert int/number to string, string to number/int or float and float to string.

To convert the string to int/number, the string must be a string of number first.

Javascript

// Type Conversions

let seats = '4'  // string of number
let cc = '2.5'   // string of float number
let price = 28.7 // float number

// return 4 in number/int data type
parseInt(seats)
+seats

// return 2.5 in float
parseFloat(cc)
+cc

// The '+' symbol will convert the 
// string into number or float based on the string value.

// return '28.7' in string
price.toString()

// return '28.700' in string with 3 decimal places
price.toFixed(3)

// The toFixed(digits) method can be used 
// with the float data type only. 
// So, if the value is in string data type, 
// convert to parseFloat first and 
// then using toFixed() to add decimal places.

Python

As for python, the term for type conversion is casting. Here are some example for casting in Python.

# Casting

seats = '4'  # string of number
cc = '2.5'   # string of float number
price = 28.7 # float number

# return int 4
int(seats)

# return float 2.5
float(cc)

# return string '28.7'
str(price)

Check Variable Type

Checking the type of variable quite crucial when doing the conditionals. Some times, we want to execute certain code if the variable obtained from the input is in certain type.

Javascript

// Variable Type Checking

let shoe = 'vans'
console.log(typeof shoe) // return type string

Python

# Variable Type Checking

let seats = 4
print(type(seats)) # return int

Conclusion

These are some of examples and differences for variables in Python and Javascript. I know there have so many things related to basic variables for Python and Javascript, but here what I have been using and learnt so far.

In future, I'll regularly update the differences between both language so that, I understand more on both language and level up my skills even further.

Thank you for reading my article, this is my first article and I really appreciate if this article helps.