search

phil-ociraptor / sos-landing

Landing page for Summer of Shipping. (May evolve into much more than a landing page)
https://summerofshipping.com
12 stars 9 forks source link

Project Tracker UI - Engineering Plan #29

Open phil-ociraptor opened 4 years ago

phil-ociraptor commented 4 years ago

Objective

Our eventual goal (but not quite yet) is to create a new page under /projects which pulls from a data source and renders the UI designed in #10 . Assume that the data can be accessed either via a public HTTP endpoint (no auth required) or can be read from a static file.

Because that is a rather large objective, we must first make large decisions and then break down tasks into parallelizable chunks of work. Decisions on the following are in scope:

In previous projects, I've used Redux and Redux-Observable, but that might be overkill. Discussion is open.

Owner and Collaborators

This is a task primarily for @OmarMoghazy and @omri08. Once the large decisions have been made, loop in @Hi-Van and @pandevim if you need some support with tasks here and there.

Deliverables

  1. A document outlining some of the large architectural decisions.
  2. A list of tasks to break up work. @phil-ociraptor will help out with this
phil-ociraptor commented 4 years ago

For the data format, check out what @justonsky has done for #23:

https://sleepy-easley-48bf25.netlify.app/.netlify/functions/projects https://sleepy-easley-48bf25.netlify.app/.netlify/functions/persons

OmarMoghazy commented 4 years ago

Spike MobX for state management:

https://github.com/OmarMoghazy/react-mobx-todolist

After A LOT of setup issues I got MobX to work . create-react-app doesnt support decorators which are important in MobX so I had to do the react configurations myself. I followed this guide: https://wing324.github.io/2019/07/27/How-to-set-up-a-React-Project-without-create-react-app/

What I liked about MobX: It is incredibly simple. All we have to do is add the @observer decorator before the component class and pass the global "store" object to it as a prop. Any changes made to this object are echoed to all other components and they are automatically re-rendered. This is my first time working with a state management framework so I am a little blown away. I believe MobX will make things very easy for us compared to just using state or context.