[PPT] - F l u x & R e a c t F l u x & R e a c t PowerPoint Presentation

SLIDE 1

F l u x F l u x & & R e a c t R e a c t

We b A p p l i c a t i

n

D e v e l

p

me n t Ma r k R e p k a

SLIDE 2

T

p

i c s C

v

e r e d

I

n t r

d

u c t i

n

t

We

b D e v e l

p

me n t

 G e t t

k

n

w

s

me
f

t h e b a s i c t e r ms a n d t e c h n

l
g

i e s f

r

g e n e r a l w e b s

f

t w a r e

F

l u x

 A n a r c h i t e c t u r e f

r

b u i l d i n g c l i e n t

s

i d e w e b a p p l i c a t i

n

s

R

e a c t

 A J a v a S c r i p t l i b r a r y f

r

b u i l d i n g u s e r i n t e r f a c e s

C

l

s

i n g n

t

e s

 Ma i n t h i n g s t

r

e me mb e r

L

i v e D e mo

Q

u e s t i

n

s ?

 

SLIDE 3

I n t r

d

u c t i

n

t

We

b D e v e l

p

me n t

H

y p e r T e x t Ma r k u p L a n g u a g e ( H T ML )

 T h e s t a n d a r d ma r k u p l a n g u a g e u s e d t

c

r e a t e w e b p a g e s  C

n

s i s t s

f

t a g s e n c l

s

e d i n a n g l e b r a c k e t s : < h t ml > s

me

t h i n g < / h t ml >

C

a s c a d i n g S t y l e S h e e t s ( C S S )

 T h e s t a n d a r d s t y l e s h e e t l a n g u a g e u s e d f

r

d e s c r i b i n g t h e l

k

a n d f

r

ma t t i n g

f

a d

c

u me n t w r i t t e n i n a ma r k u p l a n g u a g e , u s u a l l y H T ML .  U s e s a J S O N

l

i k e s t r u c t u r e t

d

e fj n e c l a s s e s a n d a t t r i b u t e s f

r

e a c h H T ML t a g

J

a v a S c r i p t ( J S )

 A l s

k

n

w

n a s E C MA S c r i p t  P r

g

r a mmi n g l a n g u a g e

f

H T ML a n d t h e We b  E n a b l e s ma n y mo r e d y n a mi c f e a t u r e s

f

w e b s i t e s a n d w e b a p p l i c a t i

n

s

SLIDE 4

F l u x F l u x

A n a r c h i t e c t u r e f

r

b u i l d i n g c l i e n t

s

i d e w e b a p p l i c a t i

n

s

SLIDE 5

F l u x O v e r v i e w

N

O T a c

d

e l i b r a r y .

 T h i s i s j u s t a d e s i g n p a t t e r n

F

l u x a p p l i c a t i

n

s h a v e t h r e e ma j

r

p a r t s

 D i s p a t c h e r  S t

r

e s  V i e w s ( R e a c t C

mp
n

e n t s )

S

t r u c t u r e a n d D a t a F l

w

 U n i d i r e c t i

n

a l d a t a fm

w

i s c e n t r a l t

t

h e F l u x p a t t e r n  T h e d i s p a t c h e r , s t

r

e s a n d v i e w s a r e i n d e p e n d e n t n

d

e s w i t h d i s t i n c t i n p u t s a n d

u

t p u t s

D

e s i g n e d b y F a c e b

k

a n d I n s t a g r a m

P

r

v

i d e d a s O p e n S

u

r c e s

f

t w a r e

Data in a Flux application fmows in a single direction: The views may cause a new action response to user input

SLIDE 6

F l u x : D i s p a t c h e r

T

h e d i s p a t c h e r i s t h e c e n t r a l h u b t h a t ma n a g e s a l l d a t a fm

w

i n a F l u x a p p l i c a t i

n
H

a s n

r

e a l i n t e l l i g e n c e

f

i t s

w

n

 I t i s a s i mp l e me c h a n i s m f

r

d i s t r i b u t i n g t h e a c t i

n

s t

t

h e s t

r

e s

E

a c h s t

r

e r e g i s t e r s i t s e l f a n d p r

v

i d e s a c a l l b a c k

A

l l s t

r

e s i n t h e a p p l i c a t i

n

r e c e i v e t h e a c t i

n

v i a t h e c a l l b a c k s a n d c a n c h

s

e t

a

c t

n

t h e m F a c e b

k

, t h e c r e a t

r

s

f

F l u x , p r

v

i d e c

d

e f

r

a n e x a mp l e D i s p a t c h e r t

g

e t s t a r t e d . T h i s i s s e e n i n t h e r e q u i r e ( ‘ fm u x ’ ) . D i s p a t c h e r s t a t e me n t i n t h e c

d

e t

t

h e r i g h t .

SLIDE 7

F l u x : S t

r

e s

S

t

r

e s c

n

t a i n t h e a p p l i c a t i

n

s t a t e a n d l

g

i c

 S i mi l a r t

t

h e mo d e l a n d c

n

t r

l

l e r i n a t r a d i t i

n

a l MV C a p p l i c a t i

n
R

e g i s t e r s i t s e l f w i t h t h e d i s p a t c h e r a n d p r

v

i d e s i t w i t h a c a l l b a c k

C
n

t a i n s a s w i t c h s t a t e me n t t h a t c a n d e c i d e w h a t t

d
w

i t h v a r i

u

s a c t i

n

s t h a t a r e d i s p a t c h e d b y t h e D i s p a t c h e r

E

mi t s e v e n t s t

a

n y l i s t e n i n g V i e w s t e l l i n g t h e m t

u

p d a t e t h e i r i n t e r n a l s t a t e

SLIDE 8

F l u x : V i e w s

F

l u x w a s d e s i g n e d t

p

a i r w e l l w i t h t h e R e a c t l i b r a r y w h i c h p r

v

i d e s t h e U I s i d e

f

y

u

r w e b a p p l i c a t i

n
Wh

e n a n a c t i

n

i s c a p t u r e d b y t h e s t

r

e a n e v e n t i s e mi t t e d t

a

n y v i e w t h a t i s l i s t e n i n g t

t

h a t s t

r

e .

T

h e v i e w c a l l s i t s

w

n s e t S t a t e ( )

r

f

r

c e U p d a t e ( ) me t h

d

s t

u

p d a t e a c c

r

d i n g l y

 Mo r e

n

t h i s i n t h e R e a c t s e c t i

n

n e x t …

React

SLIDE 9

R e a c t R e a c t

A J a v a S c r i p t l i b r a r y f

r

b u i l d i n g u s e r i n t e r f a c e s

SLIDE 10

R e a c t O v e r v i e w

J

u s t t h e U s e r I n t e r f a c e

 H a n d l e s t h e V i n t h e MV C d e s i g n p a t t e r n

S

i mp l e C

mp
n

e n t s

 E a c h r e a c t c

mp
n

e n t h a n d l e s

n

e t h i n g

U

s u a l l y w r i t t e n i n J S X f

r

ma t

 A l l

w

s f

r

X ML / H T ML

l

i k e s y n t a x d i r e c t l y i n t h e J a v a S c r i p t c

d

e

T

r a n s l a t e s d i r e c t l y i n t

J

a v a S c r i p t

 C a n b e r u n d i r e c t l y i n a s t a n d a r d w e b b r

w

s e r w i t h n

a

d d i t i

n

a l l i b r a r i e s r e q u i r e d

D

e s i g n e d b y F a c e b

k

a n d I n s t a g r a m

 P

w

e r s t h e U I

f

b

t

h

f

t h e s e w e b s i t e s

P

r

v

i d e d a s O p e n S

u

r c e s

f

t w a r e

SLIDE 11

J

S X i s a J a v a S c r i p t s y n t a x e x t e n s i

n

t h a t l

k

s s i mi l a r t

X

ML / H T ML

O

fg e r s a c

n

c i s e a n d f a mi l i a r s y n t a x f

r

d e fj n i n g c

mp
n

e n t s w i t h

p

t i

n

a l a t t r i b u t e s a n d s t a t e

I

t ' s mo r e f a mi l i a r f

r

c a s u a l d e v e l

p

e r s s u c h a s d e s i g n e r s

E

a c h R e a c t c

mp
n

e n t i s d i s p l a y e d t h r

u

g h i t s r e n d e r f u n c t i

n

. T h i s f u n c t i

n

r e t u r n s s

me

J S X t h a t d e fj n e s h

w

t h e c

mp
n

e n t w i l l d i s p l a y

n

t h e p a g e .

R e a c t : I n t r

t
J

S X

SLIDE 12

R e a c t : I n t r

t
J

S X

T

h i s R e n d e r f u n c t i

n

a n d s

me

h e l p e r J a v a S c r i p t v a r i a b l e s l e t s u s d

s
me

r e a l l y u s e f u l t h i n g s !

D

y n a mi c a l l y c r e a t i n g a n u mb e r

f

R e a c t c

mp
n

e n t s f r

m

v a l u e s i n a J a v a S c r i p t a r r a y

SLIDE 13

Mo

r e c

mp

l e x R e a c t c

mp
n

e n t s c a n h a v e s

me

s t a t e i n f

r

ma t i

n

t h a t h e l p s t h e m d e c i d e h

w

t h e y s h

u

l d r e n d e r a n d d i s p l a y .

 T h i s c

u

l d i n c l u d e d a t a l i k e

u

r l i t t l e e x a mp l e a r r a y f r

m

b e f

r

e

S
me

i n i t i a l s t a t e c a n b e d e fj n e d i n a c

mp
n

e n t b y

v

e r r i d i n g t h e g e t I n i t i a l S t a t e ( ) f u n c t i

n
R

e a c t : C

m

p

n

e n t S t a t e

SLIDE 14

I

f t h e s t a t e c h a n g e s i t w i l l t r i g g e r a c a l l t

t

h e r e n d e r me t h

d

s

t

h e c

mp
n

e n t c a n b e u p d a t e d

I

n t h i s s i mp l e e x a mp l e , s t a t e i s j u s t a s i n g l e i n t e g e r v a l u e c a l l e d ‘ s

me

N u mb e r ’ w h i c h h

l

d s t h e n u mb e r

f

c l i c k s

We

b B r

w

s e r V i e w

R e a c t : C

m

p

n

e n t S t a t e

SLIDE 15

R e a c t : C

m

p

n

e n t L i f e c y c l e

C

mp
n

e n t s h a v e t h r e e ma i n p a r t s

f

t h e i r l i f e c y c l e

Mo

u n t i n g : A c

mp
n

e n t i s b e i n g i n s e r t e d i n t

t

h e D O M

 g e t I n i t i a l S t a t e ( ) i s i n v

k

e d b e f

r

e a c

mp
n

e n t i s mo u n t e d  c

mp
n

e n t Wi l l Mo u n t ( ) i s i n v

k

e d i mme d i a t e l y b e f

r

e mo u n t i n g

c

c u r s  c

mp
n

e n t D i d Mo u n t ( ) i s i n v

k

e d i mme d i a t e l y a f t e r mo u n t i n g

c

c u r s

U

p d a t i n g : A c

mp
n

e n t i s b e i n g r e

r

e n d e r e d t

d

e t e r mi n e i f t h e D O M s h

u

l d b e u p d a t e d

 s h

u

l d C

mp
n

e n t U p d a t e ( ) i s i n v

k

e d w h e n a c

mp
n

e n t d e c i d e s w h e t h e r a n y c h a n g e s w a r r a n t a n u p d a t e t

t

h e D O M

U

n mo u n t i n g : A c

mp
n

e n t i s b e i n g r e mo v e d f r

m

t h e D O M

 c

mp
n

e n t Wi l l U n mo u n t ( ) i s i n v

k

e d i mme d i a t e l y b e f

r

e a c

mp
n

e n t i s u n mo u n t e d a n d d e s t r

y

e d . C l e a n u p s h

u

l d g

h

e r e

SLIDE 16

O

n e

f

t h e mo s t i mp

r

t a n t t h i n g s i n a n y a p p l i c a t i

n

, w e b

r
t

h e r w i s e , i s p e r f

r

ma n c e . R e a c t h a s s

me

v e r y i n t e r e s t i n g f e a t u r e s t

h

e l p i mp r

v

e i t s p e r f

r

ma n c e

v

e r

t

h e r p

p

u l a r w e b f r a me w

r

k s .

T

h e D

c

u me n t O b j e c t Mo d e l ( D O M)

 S t r u c t u r e d r e p r e s e n t a t i

n
f

a d

c

u me n t

i

n t h i s c a s e

u

r w e b p a g e  A t r e e s t r u c t u r e

f

n

d

e s a n d

b

j e c t s t h a t e a c h c a n h a v e d i fg e r e n t p r

p

e r t i e s a n d me t h

d

s

I n t e r a c t i n g w i t h t h i s D O M

u

r s e l v e s i s s l

w

a n d t r i c k y t

h

a n d l e c

r

r e c t l y . R e a c t r e mo v e s t h i s d i ffjc u l t y

f

d e a l i n g d i r e c t l y w i t h t h e w e b p a g e D O M b y i n t r

d

u c i n g t h e i d e a

f

a V i r t u a l D O M

R e a c t : V i r t u a l D O M

SLIDE 17

Wh e n e v e r y

u

c a l l s e t S t a t e ( )

n

a c

mp
n

e n t , R e a c t w i l l ma r k i t a s d i r t y . A t t h e e n d

f

t h e e v e n t l

p

, w h e n a l l

f

t h e r e n d e r me t h

d

s h a v e c a s c a d e d t h r

u

g h , R e a c t l

k

s a t a l l t h e d i r t y c

mp
n

e n t s a n d c

mp

a r e s t h e r e s u l t

f

t h e n e w s t a t e t

t

h e e x i s t i n g D O M a n d d

e

s a s i n g l e c a l c u l a t e d u p d a t e .

h t t p : / / c a l e n d a r . p e r f p l a n e t . c

m/

2 1 3 / d i fg / F a c e b

k

S

f

t w a r e E n g i n e e r , C h r i s t

p

h e r C h e d e a u

T h i s me a n s t h a t , p e r a n y n u mb e r

f

u p d a t e s i n t h a t e v e n t l

p

, t h e r e i s e x a c t l y

n

e t i me w h e n t h e D O M i s b e i n g u p d a t e d .

R e a c t : V i r t u a l D O M

SLIDE 18

T h i s me t h

d

i s g r e a t n e w s f

r

p e r f

r

ma n c e s i n c e w e a r e u s u a l l y

n

l y u p d a t i n g n

d

e s a t t h e b

t

t

m
f

t h e t r e e , n

t

a t t h e t

p

! T h i s me a n s t h a t c h a n g e s a r e l

c

a l i z e d t

w

h e r e t h e u s e r i n t e r a c t s a n d d

e

s n

t

n

r

ma l l y i n v

l

v e u p d a t i n g t h e e n t i r e D O M e a c h t i me .

h t t p : / / c a l e n d a r . p e r f p l a n e t . c

m/

2 1 3 / d i fg / F a c e b

k

S

f

t w a r e E n g i n e e r , C h r i s t

p

h e r C h e d e a u

R e a c t : V i r t u a l D O M

SLIDE 19

Wh e n b u i l d i n g a n a p p l i c a t i

n

w i t h R e a c t t h e r e a r e s

me

e x t r a f e a t u r e s t h a t ma k e d e v e l

p

me n t e v e n e a s i e r

L
c

a l i z a t i

n

w i t h r e a c t

i

n t l

 O p e n S

u

r c e l i b r a r y p r

v

i d e d b y Y a h

 U

s e s t h e s t a n d a r d I C U Me s s a g e s y n t a x  P r

v

i d e s R e a c t C

mp
n

e n t s f

r

ma t d a t a a n d s t r i n g s

A

n i ma t i

n

s

 R e a c t p r

v

i d e s t h e R e a c t C S S T r a n s i t i

n

G r

u

p  S u p p

r

t s b a s i c C S S a n i ma t i

n

s a n d t r a n s i t i

n

s  Wr a p s a l l

f

t h e c

mp
n

e n t s y

u

a r e i n t e r e s t e d i n a n i ma t i n g  S p e c i fj e d i n C S S fj l e b y s

me

n a me , r e f e r e n c e d i n c

d

e b y t h a t n a me

R e a c t : H e l p f u l A d d

n

s

SLIDE 20

R e a c t : A n i ma t i

n

s

T

h e R e a c t C S S T r a n s i t i

n

G r

u

p a d d

n

a l l

w

s f

r

C S S t r a n s i t i

n

s a n d a n i ma t i

n

s w h e n a R e a c t c

mp
n

e n t e n t e r s

r

l e a v e s t h e D O M

A

n i ma t i

n

s a r e t h e n s p e c i fj e d b y n a me i n t h e C S S

SLIDE 21

C l

s

i n g : T h i n g s t

R

e me mb e r

R

e a c t h e l p s y

u

c r e a t e s ma l l s i mp l e c

mp
n

e n t s c a n b e e a s i l y r e u s e d t h r

u

g h

u

t t h e a p p l i c a t i

n
C
mp
n

e n t s c a n b e c

mb

i n e d t

g

e t h e r t

c

r e a t e mo r e c

mp

l e x i n t e r f a c e s

R

e a c t w i l l a u t

ma

t i c a l l y ma n a g e a l l U I u p d a t e s w h e n y

u

r u n d e r l y i n g d a t a c h a n g e s

P

a g e ma r k u p a n d J a v a S c r i p t b e h a v i

r

a r e d e fj n e d t

g

e t h e r i n t h e s a me fj l e , t h e J S X f

r

ma t , ma k i n g c

d

e e a s y t

r

e a d a n d f

l

l

w
D

e s i g n e d f

r

p e r f

r

ma n c e w i t h l a r g e c

mp

l e x w e b a p p l i c a t i

n

s

C

r

s

s b r

w

s e r s u p p

r

t i n F i r e f

x

, C h r

me

, I E 8 + , S a f a r i , e t c .

U

s e d b y i n d u s t r y l e a d e r s s u c h a s F a c e b

k

, I n s t a g r a m, N e t fm i x , C

d

e c a d e m y

SLIDE 22

L i v e D e mo !

L e t s c h e c k

u

t R e a c t a n d F l u x i n a c t i

n

…

SLIDE 23

E x a m p l e C

d

e a n d R e s

u

r c e s

h

t t p s : / / g i t h u b . c

m/

r e p k a m0 9 / r e a c t

fm

u x

t

e s t

 C

n

t a i n s a l l c

d

e s h

w

n i n t h i s p r e s e n t a t i

n
h

t t p : / / f a c e b

k

. g i t h u b . i

/

fm u x /

 T h e

ffjc

i a l d

c

u me n t a t i

n

f

r

F l u x , p r

v

i d e d b y F a c e b

k

.

h

t t p s : / / f a c e b

k

. g i t h u b . i

/

r e a c t /

 T h e

ffjc

i a l d

c

u me n t a t i

n

f

r

R e a c t , p r

v

i d e d b y F a c e b

k

.