JOSA TechTalks - Better Web Apps with React and Redux

Better Web Apps with React & Redux

Improve your web apps with React

Ali Al-Sa’o

About Me

Ali Hussein Al-Sa’o

Senior Front End Engineer @MBC group

10+ years in web development

alsao ali-sao ali_sao

What is ReactReact is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side (Isomorphic).

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

What does it need to make it work and why

A typical modern React project needs the following to run productively and successfully

Babel : babel is a javascript transpiler that converts code from one syntax to another. Mainly responsible for converting JSX and ES6 into valid ES5 all browsers can understand

Webpack : A javascript bundler and task runner. You can uglify your code, deploy to live server , import assets as modules , lint and test your code , compile css preprocessors and tons of other tasks.

What special about ReactLet’s try to clone Facebook messenger using my React

And your old fatty jQuery

React is all about componentsWith React we can build reusable components that would allow

us to share code all over our project

Components have data containers

Components can receive data via props.

Components has inner state object.

Data flow is unidirectional.

Data containers are separating concern.

Components has data containers

Components have Lifecycle HooksDo something at a certain lifecycle time

Mounting hooks :

• componentWillMount() • render() • componentDidMount()

Updating hooks :

• componentDidUpdate()

Unmounting

• componentWillUnmount()

https://facebook.github.io/react/docs/react-component.html#componentwillmount

https://facebook.github.io/react/docs/react-component.html#render

https://facebook.github.io/react/docs/react-component.html#componentdidmount

https://facebook.github.io/react/docs/react-component.html#componentdidupdate

https://facebook.github.io/react/docs/react-component.html#componentwillunmount

What about this

Really , what about this?

React will do the magic for you

With jQuery you have to re-render the whole list

Virtual DOM VS DOM manipulation

How VDOM works

React is FunctionalDo one single thing at a time without side effects

React is super easy to debugThanks to React developer tools

React unit testing is heavenDeclarative = Predictable

React is Universalwrite once, run anywhere.

React NativeReact VR

One more thing…

اللي سرق القداحه يرجعها

Questions?

Scaling React Apps With Redux

Omar Abdelhafith

About Me

Omar Abdelhafith

Staff Software Engineer @Zendesk

iOS/Android and Backend

nsomar nsomar @ifnottrue

http://nsomar.com

Recap…

Chat Component

Messages Component

Recap…

StructureApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

Structure - StateApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

Messages Selected

Main State

Text Field State

Structure - StateApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

Messages State Chat State

Text Field StateBody State

Header State

SingletonOther Singleton

Structure - ActionsApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

Complexity grows with State

We gonna talk about 3 issues

Issue 1 Scalability

Adding more components

UserInfo Component

GifChooser Component

ScalingApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

UserInfo Component

Gif Component

Adding more components

Adding more componentsAdding GifChooser and UserInfo - App.js state grows - App.js action handling grows

Issue 2 Correctness

Updating the state

Chat Web AppUser Typing Uploading

Images

Web Sockets Messages

Web Sockets Status and

updates

Async Http requests

MQTT Searching Gifs

Searching Gifs

Updating the state- Real-life applications receive many events- These events change the state - Leads to incorrect UI updates

Example

Message Received

Message Updated

Message Deleted

Example - Off Order

Message Received

Message Updated

Message Deleted

ExampleCorrect Order Of Event Incorrect Order Of Event

Issue 3 Consistence

Consistence

Message Received

Reorder the users

Add Message

HereMaybe

Other???

Issues so far

Scalability

Consistence

Correctness

Facebook tired to solve these issues

Enter Unidirectional data flow

architectures

Unidirectional architecturesTwo popular architectures

- Flux- Redux

Unidirectional architectures

Flux

Redux

We will focus on Redux

Redux - Flow

Redux - Connect

Chat Component

Messages Component

Non Redux StructureApp

Component

Messages Component

Chat Component

Header Component

Body Component

Controls Component

Non Redux StructureApp

ComponentMessages

Component

Chat Component

Header Component

Body Component

Controls Component

Redux Store