# Griptape Update 2021-09-23

# Agenda

• Current development
• Next release

# Current Development

# Revisiting state management

For use, state management is a must when talking about building large scale applications. A well writen application, separate concerns in a way that changes made to a data layer can be controlled and centralized in a single entity (call it, class, module, file, etc).

We were looking for various options for state management in React and Vue. But our perspective, seems that both frameworks are aiming to a very similar approach thanks to the Funcional Components of React and the Composition API of Vue.

This is an example of how we envision how those APIs might look.

# Griptape React

For React we are thinking to use the Context. Context provides a way to pass data through the component tree without having to pass props down manually at every level:

import React from 'react';

import { GriptapeContext } from '@stakeordie/griptape-react.js';
import { Sefi } from './contracts';

function Example() {
  return (
    <GriptapeContext.Provider>
      <Sefi query="balance">
        {({ result, loading, error }) =>
          result ? (
            <h1>{result.balance.amount}</h1>
          ) : null
        }
      </Sefi>
    </GriptapeContext.Provider>
  );
}

Also we would like to make some hooks available to get the same result:

import React from 'react';

import { useSefi } from '@stakeordie/griptape-react.js';

function Example() {
  const sefi = useSefi();
  const { result, loading, error } = sefi.getBalance();

  return result ? (
    <div>
      <h1>{result.balance.amount}</h1>
    </div>
  ) : null;
}

# Griptape Vue.js

On the other hand, Vue has the Composition API, which expose a similar API as the Hooks API from React:

<template>
  <div v-if="result">
    <h1>{result.balance.amount}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useSefi from './contracts';

export default defineComponent({
  setup() {
    const sefi = useSefi();
    const { result, loading, error } = sefi.getBalance();
    return { result, loading, error };
  },
});
</script>

# Next Release

• griptape.js:0.6.X
• griptape-vue.js:0.1.0 (scaffold)
• griptape-react.js:0.1.X (scaffold)