@FARZAD_YZ

✈️ ENGINEER

💻 ENGINNER

Living in

🇫🇮

@

User interface is

Challenging

Command line

Direct manipulation ui

Why User Interface is hard?

Run on different platforms

Platforms are different

Partial standards

Styling challenges

SOurces of Data

Unpredictable consumers

Accessibility

internationalization

State management

Renderer = View

(State)

Renderer = View

(State)

Behavior

Explicitness

Predictable

Explicit state

Renderer = View

(State)

Explicit UI

Own mistakes in state management

IMplicit states

before fetching

after fetching

isFetching: true

 type FetchingState =
  | BeforeFetching
  | Fetching
  | FetchedValidData
  | FetchedCorruptedData
  | FetchedError type FetchingState =
  | BeforeFetching
  | Fetching
  | FetchedValidData
  | FetchedCorruptedData
  | FetchedError type FetchingState =
  | BeforeFetching
  | Fetching
  | FetchedValidData
  | FetchedCorruptedData
  | FetchedError type FetchingState =
  | BeforeFetching
  | Fetching
  | FetchedValidData
  | FetchedCorruptedData
  | FetchedError

Missing states

Error

Empty

Conflicting states

 type LayoutProps = {
  main?: boolean;
  header?: boolean;
  right?: boolean;
}

type LayoutProps = {
  main?: boolean;
  header?: boolean;
  right?: boolean;
}

<Layout main />
<Layout header />
<Layout right />

8

3

type LayoutType =
    | Main
    | Header
    | Right

<MainLayout />
<HeaderLayout />
<RightLayout />

optional

Boolean

type LayoutProps = {
  main?: boolean;
  header?: boolean;
  right?: boolean;
}

const layoutProps = {
  isMain: false,
  isHeader: false,
  isRight: false
}

Uncertainty

Limited values

Complexity growth

Priority will matter

isLoading: boolean

2 ^ N

2 ^ N

isMain: true;
isHeader: true;

derived states

 const ArticleList = ({list}) => {
  return (
    {list.length === 0 ? <p>Empty list</p> : null}
  )
}
 
const Article = ({ article }) => (
  <div>
    {article.pictures.length ? (
      <>
        <Picture src={article.pictures[0].url} />
        <PictureCaption>{article.pictures[0].caption}</PictureCaption>
      </>
    ) : null}
  </div>
); const ArticleList = ({list}) => {
  return (
    {list.length === 0 ? <p>Empty list</p> : null}
  )
}
 
const Article = ({ article }) => (
  <div>
    {article.pictures.length ? (
      <>
        <Picture src={article.pictures[0].url} />
        <PictureCaption>{article.pictures[0].caption}</PictureCaption>
      </>
    ) : null}
  </div>
); const ArticleList = ({list}) => {
  return (
    {list.length === 0 ? <p>Empty list</p> : null}
  )
}
 
const Article = ({ article }) => (
  <div>
    {article.pictures.length ? (
      <>
        <Picture src={article.pictures[0].url} />
        <PictureCaption>{article.pictures[0].caption}</PictureCaption>
      </>
    ) : null}
  </div>
);

 switch(event.type) {
  case "SET_CHECKING":
    return {
      ...state,
      checking: true,
      error: undefined
    }
  case "CHECK_SUCCESS":
    return {
      ...state,
      checking: false,
      status: event.payload
    }
  case "CHECK_FAILURE":
    return {
      ...state,
      checking: false,
      error: event.payload
    }
  default:
    return state;
} switch(event.type) {
  case "SET_CHECKING":
    return {
      ...state,
      checking: true,
      error: undefined
    }
  case "CHECK_SUCCESS":
    return {
      ...state,
      checking: false,
      status: event.payload
    }
  case "CHECK_FAILURE":
    return {
      ...state,
      checking: false,
      error: event.payload
    }
  default:
    return state;
} switch(event.type) {
  case "SET_CHECKING":
    return {
      ...state,
      checking: true,
      error: undefined
    }
  case "CHECK_SUCCESS":
    return {
      ...state,
      checking: false,
      status: event.payload
    }
  case "CHECK_FAILURE":
    return {
      ...state,
      checking: false,
      error: event.payload
    }
  default:
    return state;
} switch(event.type) {
  case "SET_CHECKING":
    return {
      ...state,
      checking: true,
      error: undefined
    }
  case "CHECK_SUCCESS":
    return {
      ...state,
      checking: false,
      status: event.payload
    }
  case "CHECK_FAILURE":
    return {
      ...state,
      checking: false,
      error: event.payload
    }
  default:
    return state;
}

{
  status: undefined,
  checking: false,
  error: undefined
}

Problematic
conventions

type HealthCheckState
  =
  | Idle
  | Checking
  | Success status
  | Failure error

{
  status: undefined,
  checking: false,
  error: undefined
}

Grouping relevant data

Event, Action

document.getElementById("button")
  .addEventListener("click", e => {
  // Run side effects
})

dispatch({ type: "authorize_session" });

function authorizeHandler(state) {
  if (state.session.isLoggedIn) {
    dispatch({ type: "session_authorized" });
  } else {
    if (isSessionValidForRefreshing(state.session.lastLoggedIn))
    {
      dispatch({ type: "retry_session" });
    } else {
      if (state.session !== undefined) {
        dispatch({ type: "session_logout" });
      }
    }
  }
}

Event handlers

renderers

login()

logout()

checkout()

addToCart()

LoginView

LogoutView

CheckoutView

CartView

Separately modeled

FSM
& Statecharts

FSM(State + Event) => NextState + SideEffects

Purity vs Idempotence

Reducing logic

Finite state machines

 Machine({
  id: "session",
  initial: "logged_out",
  states: {
    logged_out: {
      on: {
        LOGIN: "authorizing"
      },
      id: "session_error",
      initial: "empty",
      states: {
        empty: {},
        present: {
          onEntry: "showError",
          on: {
            RETRY: "authorizing"
          }
        }
      }
    },
    logged_in: {
      on: {
        LOGOUT: "authorizing"
      }
    },
    authorizing: {
      on: {
        SUCCESS: "logged_in",
        ERROR: "logged_out"
      }
    }
  }
}) Machine({
  id: "session",
  initial: "logged_out",
  states: {
    logged_out: {
      on: {
        LOGIN: "authorizing"
      },
      id: "session_error",
      initial: "empty",
      states: {
        empty: {},
        present: {
          onEntry: "showError",
          on: {
            RETRY: "authorizing"
          }
        }
      }
    },
    logged_in: {
      on: {
        LOGOUT: "authorizing"
      }
    },
    authorizing: {
      on: {
        SUCCESS: "logged_in",
        ERROR: "logged_out"
      }
    }
  }
}) Machine({
  id: "session",
  initial: "logged_out",
  states: {
    logged_out: {
      on: {
        LOGIN: "authorizing"
      },
      id: "session_error",
      initial: "empty",
      states: {
        empty: {},
        present: {
          onEntry: "showError",
          on: {
            RETRY: "authorizing"
          }
        }
      }
    },
    logged_in: {
      on: {
        LOGOUT: "authorizing"
      }
    },
    authorizing: {
      on: {
        SUCCESS: "logged_in",
        ERROR: "logged_out"
      }
    }
  }
}) Machine({
  id: "session",
  initial: "logged_out",
  states: {
    logged_out: {
      on: {
        LOGIN: "authorizing"
      },
      id: "session_error",
      initial: "empty",
      states: {
        empty: {},
        present: {
          onEntry: "showError",
          on: {
            RETRY: "authorizing"
          }
        }
      }
    },
    logged_in: {
      on: {
        LOGOUT: "authorizing"
      }
    },
    authorizing: {
      on: {
        SUCCESS: "logged_in",
        ERROR: "logged_out"
      }
    }
  }
}) Machine({
  id: "session",
  initial: "logged_out",
  states: {
    logged_out: {
      on: {
        LOGIN: "authorizing"
      },
      id: "session_error",
      initial: "empty",
      states: {
        empty: {},
        present: {
          onEntry: "showError",
          on: {
            RETRY: "authorizing"
          }
        }
      }
    },
    logged_in: {
      on: {
        LOGOUT: "authorizing"
      }
    },
    authorizing: {
      on: {
        SUCCESS: "logged_in",
        ERROR: "logged_out"
      }
    }
  }
})

Check geolocation support

Detect zone based on geolocation

watch geolocation changes only after the firt zone is detected

 type State =
  | { type: "location_pending" }
  | { type: "location_supported.zone_idle" }
  | { type: "location_supported.zone_pending" }
  | { type: "location_supported.zone_error"; error: string }
  | { type: "location_supported.zone_available.not_watching"; zone: Zone }
  | {
      type: "location_supported.zone_available.watching.listening";
      zone: Zone;
      watchId: number;
    }
  | {
      type: "location_supported.zone_available.watching.updating";
      zone: Zone;
      watchId: number;
    };

Visual behavior

UI as a whole

watch geolocation changes only after the firt zone is detected

MAKE IMPOSSIBLE STATES IMPOSSIBLE

Making Impossible States Impossible by Richard Feldman

MAKE IRRELEVANT DATA UNAVAILABLE

DO NOT TEST SOMETHING THAT IS NOT SUPPOSED TO HAPPEN

TESTING IS GOOD.

IMPOSSIBLE IS JUST BETTER.

Making Impossible States Impossible by Richard Feldman

THANK YOU!

Farzad Yousefzadeh

@FARZAD_YZ

https://the-art-of-explicit-ui.netlify.com

	type FetchingState =
	\| BeforeFetching
	\| Fetching
	\| FetchedValidData
	\| FetchedCorruptedData
	\| FetchedError

	type LayoutProps = {
	main?: boolean;
	header?: boolean;
	right?: boolean;
	}

	const ArticleList = ({list}) => {
	return (
	{list.length === 0 ? <p>Empty list</p> : null}
	)
	}

	const Article = ({ article }) => (
	<div>
	{article.pictures.length ? (
	<>
	<Picture src={article.pictures[0].url} />
	<PictureCaption>{article.pictures[0].caption}</PictureCaption>
	</>
	) : null}
	</div>
	);

	switch(event.type) {
	case "SET_CHECKING":
	return {
	...state,
	checking: true,
	error: undefined
	}
	case "CHECK_SUCCESS":
	return {
	...state,
	checking: false,
	status: event.payload
	}
	case "CHECK_FAILURE":
	return {
	...state,
	checking: false,
	error: event.payload
	}
	default:
	return state;
	}

	Machine({
	id: "session",
	initial: "logged_out",
	states: {
	logged_out: {
	on: {
	LOGIN: "authorizing"
	},
	id: "session_error",
	initial: "empty",
	states: {
	empty: {},
	present: {
	onEntry: "showError",
	on: {
	RETRY: "authorizing"
	}
	}
	}
	},
	logged_in: {
	on: {
	LOGOUT: "authorizing"
	}
	},
	authorizing: {
	on: {
	SUCCESS: "logged_in",
	ERROR: "logged_out"
	}
	}
	}
	})

	type State =
	\| { type: "location_pending" }
	\| { type: "location_supported.zone_idle" }
	\| { type: "location_supported.zone_pending" }
	\| { type: "location_supported.zone_error"; error: string }
	\| { type: "location_supported.zone_available.not_watching"; zone: Zone }
	\| {
	type: "location_supported.zone_available.watching.listening";
	zone: Zone;
	watchId: number;
	}
	\| {
	type: "location_supported.zone_available.watching.updating";
	zone: Zone;
	watchId: number;
	};

The art of explicit User interfaces

Farzad Yousefzadeh

@FARZAD_YZ

The art of explicit
User interfaces