Coding complex
app logic, visually

David Khourshid

Render ATL 2022

@davidkpiano

David Khourshid

David K Piano

isLoading === true;
isLoading === false;
isSuccess === true;
isError === true;
<form onSubmit={event => {
  // ๐Ÿ’ฅ side-effect!
  submitData(event);
}}>
  {/* ... */}
</form>
<form onSubmit={event => {
  submitData(event);
}}>
  {/* ... */}
</form>
const [isLoading, setIsLoading] = useState(false);

<form onSubmit={event => {
  if (isLoading) { return; }

  submitData(event);

  setIsLoading(true);
}}>
  {/* ... */}
</form>
const [isLoading, setIsLoading] = useState(false);

<form onSubmit={event => {
  if (isLoading) { return; }

  submitData(event)
    .then(() => { setIsLoading(false) })

  setIsLoading(true);
}}>
  {/* ... */}
</form>
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

<form onSubmit={event => {
  if (isLoading) { return; }

  submitData(event)
    .then(() => { setIsLoading(false) })
    .catch(err => {
      setIsLoading(false);
      setError(err);
    });

  setIsLoading(true);
}}>
  {/* ... */}
</form>
const [isLoading, setIsLoading] = useState(false);
const [isCanceled, setIsCanceled] = useState(false);
const [error, setError] = useState(null);

<form onSubmit={event => {
  if (isLoading ) { return; }

  submitData(event)
    .then(() => {
      if (isCanceled) { return; }
      setIsLoading(false)
    })
    .catch(err => {
      if (isCanceled) { return; }
      setIsLoading(false);
      setError(err);
    });

  setIsLoading(true);
}}>
  {/* ... */}
  <button
    type="button"
    onClick={() => { setIsCanceled(true) }}
  >
    Cancel
  </button>
  {/* ... */}
</form>

Low-code

No-thanks?

๐Ÿ“„

index.html

๐Ÿ“„

scripts.js

๐Ÿ“„

styles.css

โœจ

What low-code

tools can do

โ—๏ธ

What you

need to do

๐Ÿ’ป

What code can do

Abstraction

Complexity

Abstraction

Complexity

Libraries, frameworks

Functions, classes

APIs, SDKs

Abstraction

Complexity

Libraries, frameworks

Functions, classes

APIs, SDKs

Varied tools, stacks

Multiple languages, runtimes

Dynamic, changing

Abstraction

Complexity

Libraries, frameworks

Functions, classes

APIs, SDKs

Varied tools, stacks

Multiple languages, runtimes

Dynamic, changing

Abstraction

Complexity

How can visual tools balance

?

Graphics design

Games & CAD

Websites & Apps

๐Ÿ“š

User stories

๐Ÿ–ผ

Mockups

๐Ÿ”€

User flows

๐Ÿ’ป

Code

๐Ÿงช

Tests

๐Ÿ‘ฉโ€๐Ÿซ

Tutorials

๐Ÿ’ฅ

๐Ÿ“š

User stories

๐Ÿ–ผ

Mockups

๐Ÿ”€

User flows

๐Ÿ’ป

Code

๐Ÿงช

Tests

๐Ÿ‘ฉโ€๐Ÿซ

Tutorials

Designers

Stakeholders

Developers

Executable models

BPMN

Statecharts

UML

Umm...

not exactly!

Logged out

Logged in

LOG IN
[correct credentials]

  • Make API call to Supabase
  • Initiate OAuth flow
  • Ensure token is valid
  • Persist token as cookie
  • Redirect to logged in view

Given a user is logged out,

When the user logs in with correct credentials

Then the user should be logged in

๐Ÿ‘จโ€๐ŸŽจ

Designers

๐Ÿ‘ฉโ€๐Ÿ’ผ

Stakeholders

๐Ÿ‘ฉโ€๐Ÿ’ป

Developers

๐Ÿค

Common visual language

import { createMachine, assign } from 'xstate';

const machine = createMachine({
  id: 'Dog API',
  initial: 'idle',
  context: {
    dog: null
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        id: 'fetchDog',
        src: (context, event) => fetch('https://dog.ceo/api/breeds/image/random')
          .then(data => data.json()),
        onDone: {
          target: 'resolved',
          actions: assign({
            dog: (_, event) => event.data
          })
        },
        onError: 'rejected'
      },
      on: {
        CANCEL: 'idle'
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      on: {
        FETCH: 'loading'
      }
    }
  }
});

๐Ÿ’ป

Code

โคต๏ธ

Diagrams

?

๐Ÿ’ป

State
management

๐ŸŽผ

State
orchestration

๐Ÿงช

Model-based
testing

๐Ÿค–

Automated
workflows

โฏ

Simulation

โœ๏ธ

Multi-step
forms

๐Ÿ”€

Routers

๐Ÿ“š

Documentation
generation

๐Ÿ–ผ

Executable
diagrams

Low-code

Abstraction

Complexity

Pro-code

Thank you Render ATL ๐Ÿ‘

David Khourshid

Coding Complex App Logic, Visually

By David Khourshid

Coding Complex App Logic, Visually

  • 182