Goal

• Performance
• Code of simplicity
• Using React && RxJS
• Design concepts to be concerned later in other project
• Responsive design
• PWA and Web Component are also introduced after a time
• And so on overengineering

Redux Sample

Library

Main

• React (with @types)
• RxJS
• Typescript
• SCSS (with @types)

Sub

• ImmutableJS
• RecyclerListView

Performance

Condition

I tried to make it as slow as possible.

• Develope mode
• Disable Cache
• CPUx6 Throttling
• 2500 List
• Checkbox ON/OFF

Load Result: 773ms

Rendering Result: 6.4ms To the unusual point.
App, TodoTemplate, and TotoInsert are excluded from rendering.

Design

Responsive

Fluid Size

A method of fluidly resizing in response to various devices.

It is a way to respond to the distance between the eye and the device, the size and resolution of the device.

Principle

Use visual angles to determine the fit size(I called) for each device. source: Legibility: how to make text convenient to read,

Calculation process

1. Size specification
2. Angle calculations in the devices that would look the smallest(or can you specify which device to reference?)
3. Generate a fit size for each device based on the angle
4. Provides fluidity between devices