The Fundamentals of ReactJSA library for building user interfaces

Jyoti Puri@jyo_pur

Challenging the established best practices

@srijan #SrijanWW

Modern web application are complex

Developing and maintaining them is hard hard hard…

@srijan #SrijanWW

Traditional MV* Frameworks@srijan #SrijanWW

Model(Data)

Controller(Manages data

flow, logic)

View(Mutable

Templates - HTML + Extensions)

- 3 tier architecture- criss-cross data flow- data bindings

Follow best practices

@srijan #SrijanWW

It looks like…My UI is

not reliable

Give me something simplified

I want something predictabl

e

What is React@srijan #SrijanWW

A LIBRARY FOR BUILDING USER INTERFACES

Is it yet another MVC framework ?

NO

React challenges the best practices established by MV* frameworks

@srijan #SrijanWWReact Philosophy ?

Functional Approach to UI rendering

Unidirectional Data Flow

Do not mutate - re render

An Abstraction of Immutable Virtual DOM

@srijan #SrijanWWReact Component

Components and not templates

React Components are Functions whose output is DOM state

Components are not just widgets - they reflect actual application

structure

@srijan #SrijanWW

React Component

DATA(as

props)

Component

Definition

DOM

EVENTS(as

state)

Combine DOM

rendering with display

logic

State Machine

s

@srijan #SrijanWW

…

A Simple React Component

https://jsfiddle.net/reactjs/69z2wepo/

@srijan #SrijanWWJSX Syntax

JSX = JS + XML

Its a convenience for writing markup in JS.React has a JSX -> JS pre-compiler.

JSX is not HTML

is safe from XSS issues

https://jsfiddle.net/reactjs/5vjqabv3/

@srijan #SrijanWW

…

A Component with Props

https://jsfiddle.net/69z2wepo/50585/

@srijan #SrijanWW

…

Reactive State

https://jsfiddle.net/69z2wepo/50586/

@srijan #SrijanWWComposable Components

- React components can be composed within other React components

- Composable elements are tested reliable pieces

- Comparability isolates complexity

@srijan #SrijanWW Controlled Components

State of inputs is managed by browser.

ButReact provides support for

controlled components in which case the state of input components

in the DOM is controlled by component state.

…

@srijan #SrijanWWSynthetic event handling

React provides synthetic event handling and bubbling with

optimized memory footprints.

It complies with W3C recommendations.

@srijan #SrijanWWEvents

- react attaches synthetic events to components- they are camelCased- for instance onChange of input below

…

@srijan #SrijanWW

…

Callbacks as Props

https://jsfiddle.net/69z2wepo/50588/

@srijan #SrijanWWUnidirectional Data Flow

@srijan #SrijanWWDo Not Mutate Re-render

How does it performs

Mutation comes with complexity

Describe how your view looks

like, do not worry to update

it !

@srijan #SrijanWWVirtual DOM

DOM - Document Object ModelIts way of representing structured documents via objects.

DOM was never designed and optimized for Dynamic UI

Virtual DOM is a layer of abstraction over actual DOMIts much faster

Virtual DOM magic works with:- batching updates- minimal diff

@srijan #SrijanWWVirtual DOM

@srijan #SrijanWWCurrent AdoptionIn 3 Years

Jyoti Puri@jyo_pur

Thank You!

Take this conversation online by tweeting using the hashtag #SrijanWW