12 votes

Build Your Own: React, ProseMirror, and Redux

3 comments

  1. smores
    Link
    Hey folks! I'm a software engineer on the Oak team at the New York Times (Oak is the name of the collaborative text editor that the newsroom uses to write the stories that go on nytimes.com). Last...

    Hey folks! I'm a software engineer on the Oak team at the New York Times (Oak is the name of the collaborative text editor that the newsroom uses to write the stories that go on nytimes.com).

    Last year, while working on Oak, we decided to take a step back and learn, as a team, how the tools we used really worked. In particular, we'd spent years trying to get ProseMirror to play well with React and Redux, but had struggled to reconcile their not-quite-compatible philosophies about DOM and state management.

    What we sketched out became “Build Your Own”. “Build Your Own” is a five-part syllabus that breaks down React, ProseMirror, and Redux, and walks through how to build them back up from scratch. It’s based on (and includes) the absolutely wonderful “Build your own React” tutorial from Rodrigo Pombo. Inspired by that tutorial, we wrote similar walkthroughs for building Redux and the ProseMirror EditorView component as well. Finally, to ensure that everyone felt comfortable with the terminology and fundamentals of using the library, we built quick refresher courses on the basics of React and ProseMirror. I'm around to answer any questions that anyone might have about the courses, the team, or the Times! Hope you enjoy!

    9 votes
  2. [2]
    skybrian
    Link
    Looks nice! If I ever use ProseMirror for real, this will be useful. A minor terminology nit: the Redux documentation is careful to say that the store is effectively a singleton, but doesn't...

    Looks nice! If I ever use ProseMirror for real, this will be useful.

    A minor terminology nit: the Redux documentation is careful to say that the store is effectively a singleton, but doesn't actually call it a singleton.

    That's because the singleton design pattern was originally about making sure you can never create more than one of an object per VM. In Java, the constructor would be made private and there would be a getter that always returns the same object. It's pretty bad because libraries would effectively be referencing the global indirectly, so you can't even create another one for testing.

    It looks like Redux and ProseMirror don't actually make that mistake; it may be common and expected that an application has only one store that's referenced by a global variable, but libraries don't have a way to access the global without being configured to use it, and so you can create more than one store if you need to. (For example, there can be more than editor on a web page.)

    1 vote
    1. smores
      Link Parent
      Thanks! That's a good point; technically you can call createStore as many times as you want, so it doesn't really follow the singleton design pattern. Its usage in that sentence is sort of...

      Thanks!

      That's a good point; technically you can call createStore as many times as you want, so it doesn't really follow the singleton design pattern. Its usage in that sentence is sort of redundant, anyway; I'll trim it out. Thanks for pointing it out!

      2 votes