Skip to content

My spin on the whiteboard. Inspired by Excalidraw and ExplainEverything

Notifications You must be signed in to change notification settings

jLouzado/whiteboard-clone

Repository files navigation

whiteboard-clone

Setup

yarn
yarn start

Tests

yarn test

Architecture

Loosely based on the Elm Architecture:

  • Canvas is handled natively, no VDom or anything
  • The tools on the left are rendered and managed with Snabbdom, mostly for DX sake
    • this section of the app are mostly pure functions and the updates are TDD'd
  • As far as the app is concerned state is immutable, it's just updated by the dispatcher in index.js
    • for now it's just standard objects for the state since it's relatively flat,
    • as the application gets more complex some kind of immutability solution might need to be brought in.
  • The Writing "Instruments" are initialized in the state, so that onDraw the actual instrument being used is abstracted away.

Challenges

  • I think the most challenging requirement was to only have one highlighter-stroke drawn at a time.
  • As you can see, I tried 3 different implementations to get it working
    • finally I realized I needed to clear the canvas before redrawing it 🤦‍♂

Potential Improvements

  • With some benchmarks I'd like to see the difference it would make if the mousemove listener weren't running all the time
  • extract all the side-effects out into an interpreter rather than being all mixed-in
  • the highlighter UX is not as clean as I'd like, would need to look into it more to see how it can be made smoother

About

My spin on the whiteboard. Inspired by Excalidraw and ExplainEverything

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published