In the process of implementing the data architecture, I need to structure the things a little bit.

Flow

I need to have some kind of type safety , to ensure that I can build the app in a maintainable way. I am a fan of Typescript (a version of Javascript that is stable and has most of the features of ES*). Sadly my early attempts of using it with React were not successful s most of the libraries require some kind of setup to use it in combination with Typescript. To name one: storybook.

So I start looking for alternatives. I have heard a lot about Flow for the last few months. So it seems like something worth trying. This ended in something like this:

// @flow

export type Context = "day" | "week" | "month" | "year" | "life";
export type Id = string;

export interface Event {
  id: Id;
  summary: string;
  context: Context;
  start: Date;
  end: Date;
}

export interface EventsSource {
  get(id: Id): Promise<?Event>;
  find(criteria: any, sourceArgs: any): AsyncGenerator<Event, void, void>;
  put(Event): Promise<any>;
  delete(id: Id): Promise<any>;
}
Types.js

It is far away from being perfect. Type annotations for object destructure are sometimes verbose, and occasionally you need to find a way to express what you want:

find(criteria: any, sourceArgs: any): AsyncGenerator<Event, void, void>;

Its integration with Visual Studio Code, wasn't perfect. The official guide asks you to remove the native support of Javascript. This disables the shortcuts of "go to definition" that I use it a lot.

But comparing it with Typescript have one nice benefit. You can incrementally add types to your sources.

So for the moment, it looks good enough.

Prettier

I spend a lot of time moving, aligning, indenting text, so I start searching for a solution that could save me some time. The new kid in the market seems to be Prettier. The defaults are acceptable, so I live with them.

Prettier

Data Model

If you follow the post from the last day, the architecture looks like this:

Model Description get find put delete
EventsGoogle Interface to all Google Events
EventsMemCache An In-Memory temporal Store (mostly for testing)
EventsIndexedDb An local permanent cache Interface
EventsSync A sync between a data source like google and a local cache like EventsMemCache or EventsIndexedDb
EventsApi A collection of EventsSync

So I have the minimum to visualize all the google calendar events. But that visualization is a task for tomorrow.