DEV Community

yysun
yysun

Posted on

Redux vs. The React Context API vs. AppRun

Recently, I have read a great post titled Redux vs. The React Context API. It is the type of the post I liked. It uses a simple example to explain the concept behind the scene. The example looks simple, but it let us understand the concept without distractions. After a few minutes of reading, I have learned Redux and Context API and started to think what if we do the same thing in the AppRun applications. Without further ado, I created the same example on glitch.com.

AppRun Example

You can see the live demo on glitch.com: https://apprun-state-2-components.glitch.me

I will describe the thought process of AppRun to help you understand and compare it with Redux and the Context API.

The HTML

The HTML has the site structure.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>AppRun</title>
</head>
<body>
  <div id="root">
    <div class="app">
      <div class="nav" id="user-avatar">
      </div>
      <div class="body">
        <div class="sidebar">
          <div class="user-stats" id="user-stats">
          </div>
        </div>
        <div class="content">main content here</div>
      </div>
    </div>
  </div>
  <script src="main.tsx"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can see we mainly use HTML and do not need to have the component structure.

// No need
<App>
  <Nav>
    <UserAvatar />
  </Nav>
  <Body>
    <Sidebar>
      <UserStats />
    </Sidebar>
  </Body>
</App>
Enter fullscreen mode Exit fullscreen mode

Since we are not forced into the component structure, we leverage the HTML and mount the components to the HTML elements.

The Main Program

In the AppRun application, we mount components to HTML elements.

import './style.css';

import app from 'apprun';

import UserAvatar from './UserAvatar';
import UserStats from './UserStats';

new UserAvatar().mount('user-avatar');
new UserStats().mount('user-stats');

app.run('/set-user', {
  avatar: "https://github.com/yysun/apprun/blob/master/logo.png?raw=true",
  name: "AppRun",
  followers: 1234,
  following: 123
});
Enter fullscreen mode Exit fullscreen mode

We only need two components <UserAvatar/> and <UserStats/>. We mount them to the <div> elements that have id of ‘user-avatar’ and ‘user-stats’ respectively.

Then we publish an AppRun event ‘/set-user’ with the user data as the event parameter.

The Components

The components subscribe and handle the AppRun events. They get the user data from the event parameter and create a new component state. AppRun then calls the view function with the new state. The view function creates the Virtual DOM using JSX. AppRun then renders the DOM.

The UserAvatar Component

The UserAvatar component displays the avatar image. The state is the avatar URL.

import app, {Component} from 'apprun';

export default class extends Component {
  state = '';

  view = (state) => <img className="user-avatar small" alt="user avatar" src={state} />;

  update = {
    '/set-user': (_, user) => user.avatar,
  }
}
Enter fullscreen mode Exit fullscreen mode

The UserStats Component

The UserStats component displays the user’s avatar image, name, and other information. The state is the user object.

import app, {Component} from 'apprun';

export default class extends Component {
  state = {} ;

  view = (user) => <>
    <div>
      <img className="user-avatar " alt="user avatar" src={user.avatar}/>
      {user.name}
    </div>
    <div className="stats">
      <div>{user.followers} Followers</div>
      <div>Following {user.following}</div>
    </div>
  </>;

  update = {
    '/set-user': (_, user) => user,
  }
}
Enter fullscreen mode Exit fullscreen mode

AppRun Supports the JSX fragment. We can create a list of elements without a root element to group them. The list of the elements is inserted into the element that the component is mounted to. It helps us to fine-tune and gets a perfect HTML structure.

That’s all.

Conclusion

Two things have made the AppRun application easier and straightforward. One is that we can mount components to the elements. Two is that we use events to pass the data and trigger the serials of processes including updating the component states and rendering the DOM.

You can re-mix the example on glitch.com. https://glitch.com/edit/#!/remix/apprun-state-2-components

For more information about AppRun, please visit:

GitHub logo yysun / apprun

AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.

AppRun Build NPM version Downloads License twitter Discord Chat

Introduction

AppRun is a lightweight alternative to other frameworks and libraries. It has a unique architecture inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.

Use a Counter as an example.

// define the initial state
const state = 0;
// view is a function to display the state (JSX)
const view = state => <div>
  <h1>{state}</h1>
  <button onclick="app.run('-1')">-1</button>
  <button onclick="app.run('+1')">+1</button>
</div>;

// update is a collection of event handlers
const update = {
  '+1': state => state + 1,
  '-1': state => state - 1
};

// start the app
app.start(document.body, state
Enter fullscreen mode Exit fullscreen mode

Have fun coding and send PRs.

Top comments (3)

Collapse
 
jess profile image
Jess Lee

Just wanted to share that you can embed glitch and github repos with this syntax, respectively:

{% glitch https://apprun-state-2-components.glitch.me/ %}
{% github https://github.com/yysun/apprun %}

Collapse
 
yysun profile image
yysun

Thanks for letting me know.

Collapse
 
chadsteele profile image
Chad Steele

Great article! Thanks!
I think you'll like this alt to redux as well.
dev.to/chadsteele/eventmanager-an-...