Giter VIP home page Giter VIP logo

flyme's Introduction

Approach and solution

Possible approaches:

  • Server side rendering. Requests are polled and cached every 3min and 24 hours and cached on the server. Then delivered to clients with no 'compute' latency on the server. Basically a shared cache. Less work for avinors server.
  • Set up own server that polls and cach the data in e.g redis locally. Then clients query this server instead. Same concept as SSR but does not require a SSR framework atleast.
  • Client side queries on relevant aiports only. Longer time per fetch if on switch, but can be alliviated with with private caching, seeing alot of the same airports will be queried each time. Can also use last_update to reduce payload each time.
  • Client side fetch-all-data-every-3-minutes. Longer initial wait time, more memory that is unused, more queries to server, but once loaded it can give a super fast user experience after initial load.

Choosen approach

Client side queries on relevant aiports only

  • Might not be ideal, but fastest to implement and no server involved
  • Uses a cors server on heroku to prevent CORS errors

How to use

Clone repo and run yarn && yarn vite

In addition, the application is deployed to two urls:

image

Interesting questions to answer

  • webworkers?
    • Might be nice, but as payload is small the parsing/formatting time might very well be equal to the copy operation between the treads.
  • shared vs local cache?
    • Depends on the approach (ssr or client-side). Would prefer not to add custom cache logic atleast. Fetch API and XHR has build in cache with ttt, but might have problems with server headeres(cors etc)
  • test?
    • No. Always nice but not on this small project

Some of the edge cases to handle:

TODOs and notes about the implementation:

  • to inconsisten with typescript () and ({}) inputs.
  • takes some shortcuts with type 'any' when it gets complicated. Also still some typescript errors lying around. Not good.
  • incosistent with type/interface naming
  • not using update_key to minimize the paylaod
  • error handling not ideal
  • error handling for CORS not ideal
  • visulize unmatched flights not ideal
  • responsiveness not ideal. Only works on a certain range of screen sizes (not on mobile)
  • not added proper private caching
  • pushed directly to master. But only member so not the worst thing that can happen

TODO:

  • add new remote repo
    • git remote add origin [email protected]:andykamp/FlyMe.git
    • git branch -M main
    • git push -u origin main

flyme's People

Contributors

andykamp avatar github-classroom[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.