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

F l u x & R e a c t F l u x & R e a c t We b A p p l i c a t i o n D e v e l o p me n t Ma r k R e p k a

T o p i c s C o v e r e d • I n t r o d u c t i o n t o We b D e v e l o p me n t  G e t t o k n o w s o me o f t h e b a s i c t e r ms a n d t e c h n o l o g i e s f o r g e n e r a l w e b s o 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 o 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 o 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 o 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 o s i n g n o t e s  Ma i n t h i n g s t o r e me mb e r • L i v e D e mo • Q u e s t i o n s ?  

I n t r o d u c t i o n t o We b D e v e l o 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 o c r e a t e w e b p a g e s  C o n s i s t s o f t a g s e n c l o s e d i n a n g l e b r a c k e t s : < h t ml > s o 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 o r d e s c r i b i n g t h e l o o k a n d f o r ma t t i n g o f a d o 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 o 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 o 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 o k n o w n a s E C MA S c r i p t  P r o g r a mmi n g l a n g u a g e o 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 o f w e b s i t e s a n d w e b a p p l i c a t i o n s •

F l u x F l u x A n a r c h i t e c t u r e f o 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 o n s

F l u x O v e r v i e w Data in a Flux application fmows in a single direction: • N O T a c o 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 o n s h a v e t h r e e ma j o r p a r t s  D i s p a t c h e r  S t o r e s  V i e w s ( R e a c t C o mp o n e n t s ) The views may cause a new action response to • S t r u c t u r e a n d D a t a F l o w  U n i d i r e c t i o n a l d a t a fm o w i s c e n t r a l t o user input 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 o 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 o d e s w i t h d i s t i n c t i n p u t s a n d o u t p u t s • D e s i g n e d b y F a c e b o o k a n d I n s t a g r a m • P r o v i d e d a s O p e n S o u r c e s o f t w a r e

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 o w i n a F l u x a p p l i c a t i o n • H a s n o r e a l i n t e l l i g e n c e o f i t s o w n  I t i s a s i mp l e me c h a n i s m f o r d i s t r i b u t i n g t h e a c t i o n s t o t h e s t o r e s • E a c h s t o r e r e g i s t e r s i t s e l f a n d p r o v i d e s a c a l l b a c k • A l l s t o r e s i n t h e a p p l i c a t i o n r e c e i v e t h e a c t i o n v i a t h e c a l l b a c k s a n d c a n c h o o s e t o a c t o n t h e m F a c e b o o k , t h e c r e a t o r s o f F l u x , p r o v i d e c o d e f o r a n e x a mp l e D i s p a t c h e r t o 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 o d e t o t h e r i g h t .

F l u x : S t o r e s • S t o r e s c o n t a i n t h e a p p l i c a t i o n s t a t e a n d l o g i c  S i mi l a r t o t h e mo d e l a n d c o n t r o l l e r i n a t r a d i t i o n a l MV C a p p l i c a t i o 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 o v i d e s i t w i t h a c a l l b a c k • C o 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 o d o w i t h v a r i o u s a c t i o 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 o 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 o u p d a t e t h e i r i n t e r n a l s t a t e • •

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 o 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 o v i d e s t h e U I s i d e o f y o u r w e b a p p l i c a t i o n React • Wh e n a n a c t i o n i s c a p t u r e d b y t h e s t o r e a n e v e n t i s e mi t t e d t o a n y v i e w t h a t i s l i s t e n i n g t o t h a t s t o r e . • T h e v i e w c a l l s i t s o w n s e t S t a t e ( ) o r f o r c e U p d a t e ( ) me t h o d s t o u p d a t e a c c o r d i n g l y  Mo r e o n t h i s i n t h e R e a c t s e c t i o n n e x t … • •

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 o r b u i l d i n g u s e r i n t e r f a c e s

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 o mp o n e n t s  E a c h r e a c t c o mp o n e n t h a n d l e s o 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 o r ma t  A l l o w s f o 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 o d e • T r a n s l a t e s d i r e c t l y i n t o 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 o w s e r w i t h n o a d d i t i o 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 o o k a n d I n s t a g r a m  P o w e r s t h e U I o f b o t h o f t h e s e w e b s i t e s • P r o v i d e d a s O p e n S o u r c e s o f t w a r e

R e a c t : I n t r o t o J S X • 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 o n t h a t l o o k s s i mi l a r t o X ML / H T ML • O fg e r s a c o n c i s e a n d f a mi l i a r s y n t a x f o r d e fj n i n g c o mp o n e n t s w i t h o p t i o 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 o r c a s u a l d e v e l o 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 o mp o n e n t i s d i s p l a y e d t h r o u g h i t s r e n d e r f u n c t i o n . T h i s f u n c t i o n r e t u r n s s o me J S X t h a t d e fj n e s h o w t h e c o mp o n e n t w i l l d i s p l a y o n t h e p a g e .

R e a c t : I n t r o t o J S X • T h i s R e n d e r f u n c t i o n a n d s o 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 o s o 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 o f R e a c t c o mp o n e n t s f r o 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 • • •