Home

Design Principles

• Less code
• Pure functions are first class citizens.
• Easy debugging

Technology Overview

• React, Apollo, RxJS, Immer
• Java Server: Redis
• Node Server: Express
• MongoDB
• Data Visualization: WebGL, D3, Canvas, SVG, WebWorker, Progressive Rendering

React

Reduce react code. Simple code are robust and easy to reason.

• Use hooks instead of Components;
• No more withConnect, withGraphQL.
• No more redux, reselect. Components generally don't need such complication. System core components will still keep global state in redux.

GraphQL

Universal Single Graph Data Layer

Partial query caching

Resource caching is especially valuable in a GraphQL server because it unlocks partial query caching — a design pattern that lets the GraphQL layer cache responses from underlying APIs and then assemble them into arbitrary query results without refetching from the server.

Apollo caches static resources and get data from REST API for dynamic resources only:

• getSeries, getEpisodes are static ones
• getUserProgress will change along with time, therefore it is dynamic.

Incremental adoption

It is adopted in an 'opt-in' fashion. We can connect existing REST api to GraphQL

RxJS

Single event streaming

Immer

Interoperability

Developers get constant reminders that they are not using 'pure javascript' with immutablejs, therefore cannot focus on business logic constantly. Immer is adopted because developers always manipulate plain javascript objects.

Performance

Performance is not a significant factor of this design.

Debugging

immutablejs code are difficult to debug, while reducers that are in plain ES6 are easy to debug and test.

ReGL

Smooth Rendering

We need to complete all of our updating and drawing before the browser wants to draw the next frame. With 60 frames a second, that works out to less than 17ms to do all of our calculations and updates.

Why GL?

We pass computation from CPU to the GPU.

• A vertex shader updates a special value called gl_Position that determines where a vertex is positioned on screen.
• A fragment shader updates a special value called gl_FragColor that determines which color a pixel will be.