An intro to DraftJS, and its immutable data model

This submission has been added to the schedule

An intro to DraftJS, and its immutable data model

Submitted May 2, 2017

Technical level: Intermediate

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.

ReactFoo 2017