DEV Community: Fadhil Radhian

Revolutionizing UI Development : The Story Behind React's Creation

Fadhil Radhian — Sun, 06 Aug 2023 05:07:22 +0000

“Updating the DOM is the hardest task of UI development” (Jordan Walke, Creator of React)

If you've ever created projects using native Javascript DOM or jQuery or have dabbled with MVC-styled frontend frameworks, you probably agree with what Jordan Walke said.

Updating the DOM can be a cumbersome process, requiring multiple steps for every little update. You also need to be very careful to not introduce any bug.

Before the rise of frameworks, many web developers use jQuery as substitute for using native Javascript DOM API (many still use to this day though) to develop their projects. Here is a simple example of procedural, step-by-step, programming using jQuery to update the DOM :

$(document).ready(function () {
  let totalPrice = 0;

  // Function to update the shopping cart's total price
  function updateTotalPrice() {
    $('#total-price').text(totalPrice.toFixed(2));
  }

  // Function to add a new item to the shopping cart
  function addItemToCart(name, price) {
    const newItem = `<li>${name} - $${price.toFixed(2)}</li>`;
    $('#cart-items').append(newItem);
    totalPrice += price;
    updateTotalPrice();
  }

  // Event handler for the "Add Item" button
  $('#add-item').on('click', function () {
    const itemName = prompt('Enter the item name:');
    const itemPrice = parseFloat(prompt('Enter the item price:'));

    if (!itemName || isNaN(itemPrice) || itemPrice <= 0) {
      alert('Invalid input. Please enter a valid item name and price.');
      return;
    }

    addItemToCart(itemName, itemPrice);
  });
});

Can you see there are many places in the example that can lead to bugs if you are not careful ?

The State of Web Development in Early 2010s

Before React came into the picture, many teams used existing frameworks like Backbone, Knockout, Ember, or AngularJS to simplify frontend development. These frameworks used the concept of MVC (Model, View, Controller) to handle DOM rendering and updates.

Those frameworks required careful management of relationships between models (data) and views (DOM). This tedious work of relationship management often resulted in bugs and made UI updates a challenging task. Let's take a look at updating list of items using one of the popular framework before React, Backbone.js as an example:

Example: Backbone.js DOM Update

const ItemModel = Backbone.Model.extend({
  defaults: {
    content: '',
  },
});

const ItemView = Backbone.View.extend({
  tagName: 'li',

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function () {
    this.$el.text(this.model.get('content'));
    return this;
  },
});

const ItemCollection = Backbone.Collection.extend({
  model: ItemModel,
});

const itemCollection = new ItemCollection();
const container = document.getElementById('item-list');

itemCollection.add({ content: 'Item 1' });
itemCollection.add({ content: 'Item 2' });

itemCollection.each(function (model) {
  const itemView = new ItemView({ model: model });
  container.appendChild(itemView.render().el);
});

Can you see how complicated it is ?

Then came React, a library created by Jordan Walke and Facebook team, which shifted away from the traditional MVC approach and introduced a revolutionary way of handling DOM updates. The core idea behind React was to focus solely on the "V" of MVC, which stands for View. Instead of tediously managing the relationships between models (data) and views (DOM), React proposed a different approach:

"Instead of tediously managing the relationships between models (data) and views (DOM), why don’t we just rerender (remove and build) parts of the DOM from scratch?"

React also focused on declarative approach, which means you write what will happen on the UI, not how, using JSX that will be transpiled to Javascript using Babel.

Example: React DOM Update (using Class Component because the first version of React used it)

import React, { Component } from 'react';

class ItemList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2'],
    };
  }

  addItem = () => {
    const { items } = this.state;
    this.setState({ items: [...items, `New Item ${items.length + 1}`] });
  };

  render() {
    const { items } = this.state;

    return (
      <div>
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.addItem}>Add Item</button>
      </div>
    );
  }
}

Can you see it is much simpler and than the Backbone example ? With Hooks, React also becomes simpler.

React also introduced the concept of a virtual DOM, a lightweight representation of the actual DOM. Rather than updating the DOM directly, React compared the virtual DOM with the previous version, identified the differences (diffing) and applied only the necessary updates to the actual DOM. This approach significantly improved performance and made complex UI updates much more manageable in comparison to the frameworks in the past.

The Aftermath

Initially, React's idea seemed radical and "unlikely to work" even for internal Facebook developers. Facebook also had a UI framework of their own named Bolt.js. However, once they gave it a try, they fell in love with it—just like countless web developers worldwide after React was open-sourced. The rest, as they say, is history.

In conclusion, React's ability to simplify DOM updates while improving performance has made it a popular choice among developers worldwide, leaving a lasting impact on frontend development practices. The journey of DOM updates in frontend development has seen remarkable transformations, from the challenges of Vanilla JS to the structured approach of Backbone.js and the revolutionary virtual DOM of React.

Nowadays, there are major frameworks that performs better than React and has better developer experience, such as Svelte, Solid, Vue or Astro. But the emergence of React is an important step that has brought us closer to more efficient and maintainable UI development thus paved the way for new frameworks to rise.

Source :

How to Use && in Windows-Based Terminal

Fadhil Radhian — Thu, 25 May 2023 02:15:02 +0000

This is a short article on how to use && equivalent in Windows terminals (Powershell & command prompt).

If you try to use && in Windows, you will face an error :

The token '&&' is not a valid statement separator in this version.
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorR
   ecordException
    + FullyQualifiedErrorId : InvalidEndOfLine

This happens because Windows does not support && keyword.

What you can replace it with is ; aa. For example :

vagrant up && vagrant ssh

\\ change to :

vagrant up ; aa vagrant ssh

That's it.

Hope it helps !

Using sqlc Library for Golang Projects Will Make Your Life Easier

Fadhil Radhian — Wed, 24 May 2023 10:06:57 +0000

What SQL database library to use for your Golang projects ?

There are several popular options :

database/sql package
ORM, for example gorm
sqlx library

Each of the above options has tradeoff, because no library or tool is perfect for every use cases. But, I will give you my opinion why sqlc is the best for most use cases after using it in my own project.

Let's iterate over the above options.

database/sql package is great. It is very performant and no complex hidden abstractions. But, because of this low-level nature, you must handle everything manually, from Scanning to struct, making sure the query syntax is correct, and updating when you make changes to the query. This manual coding can often lead to bugs and error in runtime.
Using Gorm can shorten your code and handle errors in compile time. But you have to learn its methods first and go back and forth to its documentation. Also, it can run very slowly in high load, compared to database/sql package.
sqlx package is kind of in between database/sql and Gorm. It is quite performant and provides methods to bridge between Golang and SQL code, so that you don't have to dabble with Scan anymore. Its learning curve also is not steep. Only one weakness though, SQL syntax failure will not be recognized until runtime.

You may think : so, sqlx seems like a perfect choice, why should I use sqlc ?

Why use `sqlc`

Because using sqlc is basically cheating. No, I mean it.

You write your schema and queries in SQL. You write some YAML config. sqlc generates all Golang code with database/sql for you. As easy as that.

You don't have to learn more ORM syntax, no more manual Scan-ing, you get best performance with database/sql, and every SQL syntax and schema errors will be thrown at compile time. When I experience all those, I basically fall in love with this library.

But, as The Great Linux Torvalds said :

Here it is :

CREATE TABLE authors (
  id         SERIAL PRIMARY KEY,
  bio        text   NOT NULL,
  birth_year int    NOT NULL
);


-- name: GetAuthor :one
SELECT * FROM authors
WHERE id = $1;

-- name: ListAuthors :many
SELECT * FROM authors
ORDER BY id;

// This is the Go code that is generated from the above SQL query.
package db

import (
    "context"
    "database/sql"
)

type Author struct {
    ID        int
    Bio       string
    BirthYear int
}

type DBTX interface {
    QueryContext(context.Context, string, ...interface{}) (*sql.Rows, error)
    QueryRowContext(context.Context, string, ...interface{}) *sql.Row
}

func New(db DBTX) *Queries {
    return &Queries{db: db}
}

type Queries struct {
    db DBTX
}

const getAuthor = `-- name: GetAuthor :one
SELECT id, bio, birth_year FROM authors
WHERE id = $1
`

func (q *Queries) GetAuthor(ctx context.Context, id int) (Author, error) {
    row := q.db.QueryRowContext(ctx, getAuthor, id)
    var i Author
    err := row.Scan(&i.ID, &i.Bio, &i.BirthYear)
    return i, err
}

const listAuthors = `-- name: ListAuthors :many
SELECT id, bio, birth_year FROM authors
ORDER BY id
`

func (q *Queries) ListAuthors(ctx context.Context) ([]Author, error) {
    rows, err := q.db.QueryContext(ctx, listAuthors)
    if err != nil {
        return nil, err
    }
    defer rows.Close()
    var items []Author
    for rows.Next() {
        var i Author
        if err := rows.Scan(&i.ID, &i.Bio, &i.BirthYear); err != nil {
            return nil, err
        }
        items = append(items, i)
    }
    if err := rows.Close(); err != nil {
        return nil, err
    }
    if err := rows.Err(); err != nil {
        return nil, err
    }
    return items, nil
}

So many codes generated for just a few lines of query. sqlc will also handle corner cases such as sql.Null values and other possibility of errors right off the bat.

For more code examples you can jump straight to its documentation : https://docs.sqlc.dev/en/stable/howto/update.html

Supported Databases and Languages

As the time I write this article, sqlc can support PostgreSQL and MySQL while support for SQLite is still in Beta. On side note, sqlc can also support Phyton and Kotlin but it's still in Beta stage. The maintainers also plan to support C# and Typescript in the future.

TL;DR

sqlc is a powerful tool that can make your life easier when working with SQL and Go. It's type-safe, performant, easy to use, and open source. If you're using Postgres or MySQL and looking for a way to make your SQL development more enjoyable, more efficient and reliable, then I highly recommend giving sqlc a try.

See you !

Connect with me on Linkedin : https://www.linkedin.com/in/fadhil-radhian
PS : I also provide Technical Writing service. Contact me if you're interested!

3 Things You Should Know Before Testing React App

Fadhil Radhian — Mon, 14 Feb 2022 09:37:42 +0000

Hello, folks. 👋

As I promised, here is the second part of this Testing series. Before we jump into some more code, we will discuss several important topics about testing, that will also help understand the test code later on. These are the topics :

Types of Testing
Test Driven Development
React Testing Library's Principle.

Types of Software Testing

There are many types of software testing and we can't discuss it all in this short article. We will only discuss some of them that is widely used, especially in web development :

1. Unit Test
Unit Test is when we test one unit of code, to see if it works as expected. It is done in isolation, which means testing one specific part without interacting with other part of the app.

2. Integration Test
Integration Test is done by testing how multiple units of code work together, to see if the interaction between units act as intended.

3. Functional Test
Also called Behavioral Test. In this type of test, we test a particular behavior of software by taking in mind the user flow. In another word, we mimic how the user will interact with our app and then test if the results are as expected. We will expand on this type of test later when we talk about philosophy of RTL.

4. Acceptance / End to End Test
Also called E2E Test. This type of test use actual browser and server, because it also tests the flow of data from server to browser. Commonly used library in E2E Test is Cypress and Selenium.

Test Driven Development (TDD)

When we hear testing at first, what comes to mind is we write code, then we test it afterwards to see if it works as it should. TDD is the reverse of that. It is basically a software development type where we write our tests first before we write our code. Here is simple flow in TDD :

write test ⇒ test fail ⇒ write code ⇒ test pass

While it seems to add more work for us developers, TDD actually has some huge benefits for development teams, some of them are :

Better code quality since its spec is clear before writing
Easier to maintain the codebase
Refactoring become smoother

You can refer to this article to if you want to know about them in more detail.

React Testing Library's Principle

RTL, or more precisely, Testing Library in general is an opinionated library, which means it has set of principles they recommend developers to follow. Its main principle is this :

The more your tests resemble the way your software is used, the more confidence they can give you.

In other words, to test the software by the way user will use the app, not just as internal code implementation. That means, Testing Library encourages us to do functional testing, which I covered above, as opposed to doing unit testing. That's why, in future test examples, we will try to do functional tests and little of unit tests .

But that does not mean unit testing is bad and functional tests are good. Not at all. Each has own best use cases. For example, unit tests are good for complex utility functions that being used in many place, to ensure they are bug-free even in edge cases.

Summary

There are several types of testing. The most important ones to understand if you just started in testing are unit tests, that test code in isolation and functional tests, which test by how the user would interact with the app.
Test Driven Development (TDD) is software development type where developers write tests first before they actually write the code that will pass those tests. It has several awesome benefits
Testing Library has set of principles, and one of them is encouraging usage of functional tests that mimic user behavior closely, as opposed to just internal code implementations

That's it folks. Thanks for reading. See you in the next part of the series.

Happy coding !

Sources :

https://www.testim.io/blog/front-end-testing-complete-overview/
https://testing-library.com/docs/guiding-principles
https://fortegrp.com/test-driven-development-benefits/

Level-Up Your React Game with Testing

Fadhil Radhian — Sat, 12 Feb 2022 04:51:38 +0000

Hi folks 👋

Are you currently learning React JS or using it in your work ?

Let's step up your React game by learning how to test a React App. In this series, we will learn how to test using packages that comes bundled with create-react-app, Jest and React Testing Library. In this first part of the series, let's understand about these two packages and a simple test.

Jest

Jest is a testing library developed by Facebook to find, run tests and determine whether the tests pass or fail. It is also the test runner that recommended by React Testing Library.

React Testing Library

React Testing Library is an open-source package, part of Testing Library package. Its job is to provide Virtual DOM for the tests and interact with the Virtual DOM while testing. For convenience, we will refer React Testing Library as RTL throughout this article.

So, basically these two packages will complement each other while testing our React app.

Getting Started with Simple Test

Let's start by using test that comes bundled with create-react-app. As you've probably done before, execute npx create-react-app or yarn create react-app in your terminal, then cd to your folder and run npm test or yarn test in your terminal. You will see the following :

Wow, we pass our first test immediately :) . You may think : "Wait, how does that happen ? And what am I testing ?". Sure, we will analyze how this test works.

Why the test pass ?

Let's open App.js file :

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

You can see that <a> tag containing Learn React text exist here. The test's job is to make sure that this element shows up correctly in the Virtual DOM. The test pass because it renders correctly, as you can test when running the project and inspect the element, the <a> tag with 'Learn React' is there :

How The Test Works

Now let's open the package.json file. Under dependencies, you will see :

As I mentioned earlier, you can see that these packages are already installed :
@testing-library/jest-dom = RTL and Jest combined
@testing-library/react = RTL core package
@testing-library/user-event = RTL package for handling user event

Those are packages needed to run the test. Then, let's identify the test files in src folder, that usually get deleted in almost every React tutorial video :)

setupTests.js :

As you can see, here Jest-DOM package is imported. This allows us to use Jest methods that we will further discuss later.
App.test.js

Here is where the action happens. Let's break down the code step by step.

import { render, screen } from '@testing-library/react';
import App from './App';

In this file, we import render method and screen object from RTL. render method's job basically is to give us Virtual DOM for testing, whereas screen object is where the methods for testing available for us to use to access the Virtual DOM created by render method. There are many methods that we can use to test our app and we will discuss some of them later.

test("renders learn react link", () => {
   // rest of the code
});

The test() method here is a method provided by Jest, which takes two arguments :

A String, for test name. It can be any name you want. I recommend the name to describe what the test is about.
A function, that contains the test. Here is where the magic happens.

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  // rest of the code
});

What happens here is we tell RTL to get 'learn react' text in the Virtual DOM.

The render method does it job by providing the Virtual Dom for App component. We also create linkElement variable. We then assign it to getByText method from screen object that accepts /learn react/i as argument. /learn react/i is a Regex that means learn react string and i means case-insensitive. We also can use just plain 'Learn React' string. We don't have to use Regex.

Now let's analyze the full code :

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

In the final line, what happened is we tell Jest to test whether the linkElement exists in the Virtual DOM or not.

expect is a method provided by Jest to test our app. We have to pass the part that we want to test as an argument. Then we test it with other method. As its name suggest, toBeInTheDocument() method's job is to test whether linkElement exist in the document (Virtual DOM). As we know earlier, it renders as it should, thus the test passes.

The expect method is also called the assertion, a central part of testing where we assert whether the test pass or fail, whereas toBeInTheDocument() is called matcher.

That's it! Now you know how this simple test works. But, this is not how test our app for production, it would be more complex and should simulate how our user interacts with the app. We will test with more example in the next part of this series.

Thanks for reading and have a good day!

Sources :
https://jestjs.io/
https://testing-library.com/docs/react-testing-library/intro/
https://reactjs.org/docs/faq-internals.html

Connect with me :
https://www.linkedin.com/in/fadhil-radhian/
Github : fadhilradh

Javascript Superpower - Higher Order Function

Fadhil Radhian — Fri, 12 Nov 2021 23:47:50 +0000

Yes I know, Higher Order Function seems a little bit daunting at first.

Higher order? What does order even mean ?

Don't worry, I will explain it to you with human language :)

Actually its concept is very simple.

It is just a function that takes a parameter (like normal function!) but its parameter is not usual values.

So what is it then ?

Its parameter is some part of its functionality.

But why ?

Let's step back a little bit.

In your journey as a programmer, you must have seen two functions that do stuff similarly, with only minor difference.

Sometimes you feel like "Hmm.. why I need to write this again? It is very similar to that one".

You feel like they should have been a one reusable function, and that minor difference is passed through the function's parameter.

Just like normal functions with different values as their parameter.

But how we do it ?

We do it with, yes, Higher Order Function

Basically, Higher Order function is a reusable function that takes a part of its functionality from its parameter.

Its purpose is one : Generalizing our function. To make it reusable in many places in our code with similar but slightly different use case.

Cool, isn't it ?

It is in accordance to key programming principle :
Don't Repeat Yourself (DRY).

And if you're like me, I like to write something that can be used in different places.

It feels like I invent something, and it feels satisfying.

Now let's start with a little bit of example.

Let's suppose we have a function that takes and array and return array with elements divided by 2 :

(Yes, I know this example use that 'cruel' for loop. It is on purpose, to make a function that somewhat long but simple to understand)

Now, in other place in our code, we have that 'similar but little different' function with the previous one :

Then, we have 'that' type of function, again, somewhere else in our code :

Now it feels repetitive and our code get unnecessarily big. 😞

I know how you feel.

And yes, we break DRY principle.

So, how we simplify these functions then ?

Simple : by passing that different part in the function, as parameter.

But can we pass string like " + 3 " and put it in our function ?

No, we can't do that in Javascript.

Then, how we do it ?
We make it a function and then, pass it as parameter.

Now, this is our "Use It Anywhere Function" :

We gave it a general name too, copyArrayAndManipulate()

We just have to call it with different parameter each time we need slightly different functionality (see the last line).

Now we have a reusable function, and our code get smaller and abstracted.

That's it folks!

Hopefully, now you understand Higher Order Function in Javascript. Congrats! 🎉

See you next time !

Bonus : if you are familiar with map, filter, and reduce functions, now you know how they work under the hood. Yes, they are basically Higher Order Functions that takes your array and your function, and then return a copy of your modified array. Basically the same as copyArrayAndManipulate that we use earlier!

For example = myArray.map(function(element) { return element * 2 })
Arrow version = myArray.map((element) => element * 2 )

Reach me at :
https://www.linkedin.com/in/fadhil-radhian/
Github : fadhilradh

Screenshots credit:
Twitter: @willsentance