ReactFoo 2017

A conference on React

An intro to DraftJS, and its immutable data model

Submitted by Sai Kishore Komanduri (@saiki) on Tuesday, 2 May 2017

videocam_off

Technical level

Intermediate

Section

Full Talk

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +13

Abstract

This talk shall focus on DraftJS, a rich text editor framework built for React apps; and how it leverages ImmutableJS; for managing the state of an editor in its entirety, with sufficient examples.

The key takeaway insights of the talk include:

  • How DraftJS works under the hood — “What goes into”, and the “How to” of building rich text editors for React applications
  • How one can use ImmutableJS API, to manage DraftJS’s immutable data structures (apart from the DraftJS’ user-facing API)
  • The role of immutability for data models in your own application

The intended audience of the talk are JavaScipt developers who’re acquainted with ReactJS, who are either:

  • interested in building rich text editors, or
  • interested in learning about ImmutableJS, and the benefits of immutability, and immutable data in their apps

Outline

  • There are multiple paradigms of text editing on the web; WYSIWYG editors have become a defacto standard for writing long form articles

  • After a brief look at a couple of text editing paradigms; the inconsistent content-editable behaviour across browsers, and how the abstraction provided by DraftJS solves the problem…

  • …the core of the talk would be concentrated on how DraftJS leverages ImmutableJS to maintain the entire state of an editor — the content, the selection state, and a bunch of other things — using an immutable data model

  • Because of the above fact — the entire editor state being nothing but an Immutable data structure — we can conceive any imaginable state of the editor that we might want to, using the ImmutableJS API …and we shall see the same using examples, and code

  • Towards the end the talk shall discuss the benefits of immutability, immutable data structures; which one could consider while building data models for an application

Speaker bio

Sai is a Developer Evangelist at Hashnode. Apart from interacting with the global Hashnode community, his work is spread across the entire Hashnode’s tech stack. Recently, he has spearheaded the “WYSIWYG editor” project at Hashnode.

Links

Slides

https://speakerdeck.com/saiki/rich-text-editors-in-reactjs-an-intro-to-draftjs

Comments

  • 1
    Siddharth Kshetrapal (@sidkp) a year ago (edited a year ago)

    Hey Sai!

    Thanks for submitting!

    The details are too nuanced for anyone who is not making an editor using draftjs.

    The concepts that are involved in making in an editor can be pulled out and that would make a more audience friendly talk (editor state, content blocks, selection state, decorators, immutability, etc.)

    Would you be open to changing your talk a little?

    Thanks!
    - reactfoo team

  • 1
    Sai a year ago (edited a year ago)

    Hi Siddharth!

    That is an interesting idea. In fact, quite recently I had to build a plain markdown text editor; and I did end up using some of the “DraftJS” design for doing so!

    And that is what the talk is planned to be — a commentary on the design of DraftJS! The slides are from an old talk; and I shall get back to you with new slides soon! Thank you! :)

Login with Twitter or Google to leave a comment