Logo Awesome React

Awesome React

Making The DOM Declarative

React gave us a great tool for building UIs declaratively by abstracting away the details of putting DOM trees together and adding events to them. When you use React, you rarely have to use imperative methods like appendTo and addEventListener directly. But what about the rest of the DOM's imperative APIs? In this talk, we'll explore how we can extend what React taught us about making the DOM declarative to other imperative APIs as well!

CONTENTS

0:05 - Story
2:42 - Intro
3:45 - React Training shameless plug
5:03 - Agenda
5:58 - Old imperative jQuery coding
13:36 - Rebuilding the app declaratively with React
16:20 -
18:45 - We’ve lost all append() calls
19:40 - The meaning of declarative programming
20:23 - Using React declarative model for own API
20:41 - Imperative API example app
23:42 - Sharing code as component
25:53 - Building declarative abstraction over imperative API
27:03 - React Media Component
28:25 - HipReact Chat App example
29:28 - Making imperative scrolling
33:32 - Making scrolling declarative
36:26 - Autoscroll problem and solution
42:45 - Question: How would you handle scrolling to the bottom if you’re sending message?
43:38 - Question: should amount of code increase if using declarative approach?

RESOURCES

React Training
https://reacttraining.com/

React Media Component
https://github.com/ReactTraining/react-media