Angular 2 Versus React_ There Will Be Blood — Medium

7232019 Angular 2 Versus React_ There Will Be Blood mdash Medium

httpslidepdfcomreaderfullangular-2-versus-react-there-will-be-blood-medium 111

142016 Angular 2 versus React There Will Be Blood mdash Medium

httpsmediumcomhousecorangular-2-versus-react-there-will-be-blood-66595faafd51ibbo53mgi 111

A n g u l a r 2 v e r s u s R e a c t T h e r e W i l l B e B l o o d

A n g u l a r 2 h a s r e a c h e d B e t a a n d a p p e a r s p o i s e d t o b e c o m e t h e h o t n e w

f r a m e w o r k o f 2 0 1 6 I t rsquo s t i m e f o r a s h o w d o w n L e t rsquo s s e e h o w i t s t a c k s u p

a g a i n s t 2 0 1 5 rsquo s d a r l i n g R e a c t

D i s c l a i m e r I e n j o y e d w o r k i n g i n A n g u l a r 1 b u t s w i t c h e d t o R e a c t i n 2 0 1 5 I

j u s t p u b l i s h e d a P l u r a l s i g h t c o u r s e o n R e a c t a n d F l u x ( f r e e t r i a l ) S o y e s I rsquo m

b i a s e d B u t I rsquo m a t t a c k i n g b o t h s i d e s

A l r i g h t l e t rsquo s d o t h i s T h e r e w i l l b e b l o o d

Y o u rsquo r e C o m p a r i n g A p p l e s a n d O r a n g u t a n s

P h o t o c r e d i t j w c a r r o l






S i g h Y e s A n g u l a r i s a f r a m e w o r k R e a c t i s a l i b r a r y S o m e s a y t h i s

d i ff e r e n c e m a k e s c o m p a r i n g t h e m i l l o g i c a l N o t a t a l l

C h o o s i n g b e t w e e n A n g u l a r a n d R e a c t i s l i k e c h o o s i n g b e t w e e n b u y i n g a n o ff - t h e -

s h e l f c o m p u t e r a n d b u i l d i n g y o u r o w n w i t h o ff - t h e - s h e l f p a r t s

T h i s p o s t c o n s i d e r s t h e m e r i t s o f t h e s e t w o a p p r o a c h e s I c o m p a r e R e a c t rsquo s

s y n t a x a n d c o m p o n e n t m o d e l t o A n g u l a r rsquo s s y n t a x a n d c o m p o n e n t m o d e l

T h i s i s l i k e c o m p a r i n g a n o ff - t h e - s h e l f c o m p u t e r rsquo s C P U t o a r a w C P U A p p l e s

t o a p p l e s

A n g u l a r 2 A d v a n t a g e s

L e t rsquo s s t a r t b y c o n s i d e r i n g A n g u l a r 2 rsquo s a d v a n t a g e s o v e r R e a c t

L o w D e c i s i o n F a t i g u e

S i n c e A n g u l a r i s a f r a m e w o r k i t p r o v i d e s s i g n i fi c a n t l y m o r e o p i n i o n s a n d

f u n c t i o n a l i t y o u t o f t h e b o x W i t h R e a c t y o u t y p i c a l l y p u l l a n u m b e r o f o t h e r

l i b r a r i e s o ff t h e s h e l f t o b u i l d a r e a l a p p Y o u rsquo l l l i k e l y w a n t l i b r a r i e s f o r

r o u t i n g e n f o r c i n g u n i d i r e c t i o n a l fl o w s w e b A P I c a l l s t e s t i n g d e p e n d e n c y

m a n a g e m e n t a n d s o o n T h e n u m b e r o f d e c i s i o n s i s p r e t t y o v e r w h e l m i n g

T h i s i s w h y R e a c t h a s s o m a n y s t a r t e r k i t s ( I rsquo v e p u b l i s h e d t w o )

A n g u l a r o ff e r s m o r e o p i n i o n s o u t o f t h e b o x w h i c h h e l p s y o u g e t s t a r t e d

m o r e q u i c k l y w i t h o u t f e e l i n g i n t i m i d a t e d b y d e c i s i o n s T h i s e n f o r c e d

c o n s i s t e n c y a l s o h e l p s n e w h i r e s f e e l a t h o m e m o r e q u i c k l y a n d m a k e s

s w i t c h i n g d e v e l o p e r s b e t w e e n t e a m s m o r e p r a c t i c a l

I a d m i r e h o w t h e A n g u l a r c o r e t e a m h a s e m b r a c e d T y p e S c r i p t w h i c h l e a d s

t o t h e n e x t a d v a n t a g e hellip

T y p e S c r i p t = C l e a r P a t h

S u r e T y p e S c r i p t i s n rsquo t l o v e d b y a l l b u t A n g u l a r 2 rsquo s o p i n i o n a t e d t a k e o n w h i c h

fl a v o r o f J a v a S c r i p t t o u s e i s a b i g w i n R e a c t e x a m p l e s a c r o s s t h e w e b a r e

f r u s t r a t i n g l y i n c o n s i s t e n t

mdash i t rsquo s p r e s e n t e d i n E S 5 a n d E S 6 i n r o u g h l y e q u a l

n u m b e r s a n d i t c u r r e n t l y o ff e r s t h r e e d i ff e r e n t w a y s t o d e c l a r e c o m p o n e n t s

T h i s c r e a t e s c o n f u s i o n f o r n e w c o m e r s ( A n g u l a r a l s o e m b r a c e s d e c o r a t o r s

i n s t e a d o f e x t e n d s mdash

m a n y w o u l d c o n s i d e r t h i s a p l u s a s w e l l )

W h i l e A n g u l a r 2 d o e s n rsquo t r e q u i r e T y p e S c r i p t t h e A n g u l a r c o r e t e a m c e r t a i n l y

e m b r a c e s i t a n d d e f a u l t s t o u s i n g T y p e S c r i p t i n d o c u m e n t a t i o n T h i s m e a n s





r e l a t e d e x a m p l e s a n d o p e n s o u r c e p r o j e c t s a r e m o r e l i k e l y t o f e e l f a m i l i a r

a n d c o n s i s t e n t A n g u l a r a l r e a d y p r o v i d e s c l e a r e x a m p l e s t h a t s h o w h o w t o

u t i l i z e t h e T y p e S c r i p t c o m p i l e r ( t h o u g h a d m i t t e d l y n o t e v e r y o n e i s

e m b r a c i n g T y p e S c r i p t y e t b u t I s u s p e c t s h o r t l y a f t e r l a u n c h i t rsquo l l b e c o m e t h e

d e f a c t o s t a n d a r d ) T h i s c o n s i s t e n c y s h o u l d h e l p a v o i d t h e c o n f u s i o n a n d

d e c i s i o n o v e r l o a d t h a t c o m e s w i t h g e t t i n g s t a r t e d w i t h R e a c t

R e d u c e d C h u r n

2 0 1 5 w a s t h e y e a r o f J a v a S c r i p t f a t i g u e R e a c t w a s a k e y c o n t r i b u t o r A n d

s i n c e R e a c t h a s y e t t o r e a c h a 1 0 r e l e a s e m o r e b r e a k i n g c h a n g e s a r e l i k e l y

i n t h e f u t u r e R e a c t rsquo s e c o s y s t e m c o n t i n u e s t o c h u r n a t a r a p i d p a c e

p a r t i c u l a r l y a r o u n d t h e l o n g l i s t o f F l u x fl a v o r s a n d r o u t i n g T h i s m e a n s

a n y t h i n g y o u w r i t e i n R e a c t t o d a y i s l i k e l y t o f e e l o u t o f d a t e o r r e q u i r e

b r e a k i n g c h a n g e s w h e n R e a c t 1 0 i s e v e n t u a l l y r e l e a s e d

I n c o n t r a s t A n g u l a r 2 i s a c a r e f u l m e t h o d i c a l r e i n v e n t i o n o f a m a t u r e

c o m p r e h e n s i v e f r a m e w o r k S o A n g u l a r i s l e s s l i k e l y t o c h u r n i n p a i n f u l w a y s

a f t e r r e l e a s e A n d a s a f u l l f r a m e w o r k w h e n y o u c h o o s e A n g u l a r y o u c a n

t r u s t a s i n g l e t e a m t o m a k e c a r e f u l d e c i s i o n s a b o u t t h e f u t u r e I n R e a c t i t rsquo s

y o u r r e s p o n s i b i l i t y t o h e r d a b u n c h o f d i s p a r a t e f a s t - m o v i n g o p e n - s o u r c e

l i b r a r i e s i n t o a c o m p r e h e n s i v e w h o l e t h a t p l a y s w e l l t o g e t h e r I t rsquo s t i m e -

c o n s u m i n g f r u s t r a t i n g a n d a n e v e r - e n d i n g j o b

B r o a d T o o l i n g S u p p o r t

A s y o u rsquo l l s e e b e l o w I c o n s i d e r R e a c t rsquo s J S X a b i g w i n H o w e v e r y o u n e e d t o

s e l e c t t o o l i n g t h a t s u p p o r t s J S X R e a c t h a s b e c o m e s o p o p u l a r t h a t t o o l i n g

s u p p o r t i s r a r e l y a p r o b l e m t o d a y b u t n e w t o o l i n g s u c h a s I D E s a n d l i n t e r s

a r e u n l i k e l y t o s u p p o r t J S X o n d a y o n e A n g u l a r 2 rsquo s t e m p l a t e s s t o r e m a r k u p

i n a s t r i n g o r i n s e p a r a t e H T M L fi l e s s o i t d o e s n rsquo t r e q u i r e s p e c i a l t o o l i n g

s u p p o r t ( t h o u g h i t a p p e a r s t o o l i n g t o i n t e l l i g e n t l y p a r s e A n g u l a r rsquo s s t r i n g

t e m p l a t e s i s o n t h e w a y ) T h a t s a i d A n g u l a r rsquo s a p p r o a c h c o m e s w i t h i t s o w n

s e t o f g o t c h a s w h i c h i s a g o o d s e g u e f o r d i s c u s s i n g R e a c t rsquo s a d v a n t a g e s hellip

R e a c t A d v a n t a g e s

A l r i g h t l e t rsquo s c o n s i d e r w h a t s e t s R e a c t a p a r t

J S X

J S X i s a n H T M L - l i k e s y n t a x t h a t c o m p i l e s d o w n t o J a v a S c r i p t M a r k u p a n d

c o d e a r e c o m p o s e d i n t h e s a m e fi l e T h i s m e a n s c o d e c o m p l e t i o n g i v e s y o u a

h a n d a s y o u t y p e r e f e r e n c e s t o y o u r c o m p o n e n t rsquo s f u n c t i o n s a n d v a r i a b l e s I n

c o n t r a s t A n g u l a r rsquo s s t r i n g - b a s e d t e m p l a t e s c o m e w i t h t h e u s u a l d o w n s i d e s





N o c o d e c o l o r i n g i n m a n y e d i t o r s l i m i t e d c o d e c o m p l e t i o n s u p p o r t a n d r u n -

t i m e f a i l u r e s Y o u rsquo d n o r m a l l y e x p e c t p o o r e r r o r m e s s a g i n g a s w e l l b u t t h e

A n g u l a r t e a m c r e a t e d t h e i r o w n H T M L p a r s e r t o fi x t h a t ( B r a v o )

I f y o u d o n rsquo t l i k e A n g u l a r s t r i n g - b a s e d t e m p l a t e s y o u c a n m o v e t h e t e m p l a t e s

t o a s e p a r a t e fi l e b u t t h e n y o u rsquo r e b a c k t o w h a t I c a l l ldquo t h e o l d d a y s rdquo w i r i n g

t h e t w o fi l e s t o g e t h e r i n y o u r h e a d w i t h n o c o d e c o m p l e t i o n s u p p o r t o r

c o m p i l e - t i m e c h e c k i n g t o a s s i s t T h a t d o e s n rsquo t s e e m l i k e a b i g d e a l u n t i l

y o u rsquo v e e n j o y e d l i f e i n R e a c t C o m p o s i n g c o m p o n e n t s i n a s i n g l e c o m p i l e -

t i m e c h e c k e d fi l e i s o n e o f t h e b i g r e a s o n s J S X i s s o s p e c i a l

F o r m o r e o n w h y J S X i s s u c h a b i g w i n s e e J S X T h e O t h e r S i d e o f t h e C o i n

R e a c t F a i l s F a s t a n d E x p l i c i t l y

W h e n y o u m a k e a t y p o i n R e a c t rsquo s J S X i t w o n rsquo t c o m p i l e T h a t rsquo s a b e a u t i f u l

t h i n g I t m e a n s y o u k n o w i m m e d i a t e l y e x a c t l y w h i c h l i n e h a s a n e r r o r I t

t e l l s y o u i m m e d i a t e l y w h e n y o u f o r g e t t o c l o s e a t a g o r r e f e r e n c e a p r o p e r t y

t h a t d o e s n rsquo t e x i s t I n f a c t t h e J S X c o m p i l e r s p e c i fi e s t h e l i n e n u m b e r

w h e r e t h e t y p o o c c u r r e d T h i s b e h a v i o r r a d i c a l l y s p e e d s d e v e l o p m e n t

I n c o n t r a s t w h e n y o u t y p o a v a r i a b l e r e f e r e n c e i n A n g u l a r 2 n o t h i n g

h a p p e n s a t a l l A n g u l a r 2 f a i l s f a i l s q u i e t l y a t r u n t i m e i n s t e a d o f c o m p i l e

t i m e I t f a i l s s l o w l y I l o a d t h e a p p a n d w o n d e r w h y m y d a t a i s n rsquo t d i s p l a y i n g

N o t f u n

R e a c t i s J a v a S c r i p t - C e n t r i c

C o n t r a s t i n g h o w A n g u l a r

a n d R e a c t h a n d l e a m i s s i n g c l o s i n g t a g





H e r e i t i s T h i s i s t h e f u n d a m e n t a l d i ff e r e n c e b e t w e e n R e a c t a n d A n g u l a r

U n f o r t u n a t e l y A n g u l a r 2 r e m a i n s H T M L - c e n t r i c r a t h e r t h a n J a v a S c r i p t -

c e n t r i c A n g u l a r 2 f a i l e d t o s o l v e i t s m o s t f u n d a m e n t a l d e s i g n p r o b l e m

A n g u l a r 2 c o n t i n u e s t o p u t ldquo J S 991261 i n t o H T M L R e a c t p u t s

ldquo H T M L 991261 i n t o J S

I c a n rsquo t e m p h a s i z e t h e i m p a c t o f t h i s s c h i s m e n o u g h I t f u n d a m e n t a l l y

i m p a c t s t h e d e v e l o p m e n t e x p e r i e n c e A n g u l a r rsquo s H T M L - c e n t r i c d e s i g n

r e m a i n s i t s g r e a t e s t w e a k n e s s A s I c o v e r i n ldquo J S X T h e O t h e r S i d e o f t h e

C o i n rdquo J a v a S c r i p t i s f a r m o r e p o w e r f u l t h a n H T M L T h u s i t rsquo s m o r e l o g i c a l

t o e n h a n c e J a v a S c r i p t t o s u p p o r t m a r k u p t h a n t o e n h a n c e H T M L t o

s u p p o r t l o g i c H T M L a n d J a v a S c r i p t n e e d t o b e g l u e d t o g e t h e r s o m e h o w

a n d R e a c t rsquo s J a v a S c r i p t - c e n t r i c a p p r o a c h i s f u n d a m e n t a l l y s u p e r i o r t o

A n g u l a r E m b e r a n d K n o c k o u t rsquo s H T M L - c e n t r i c a p p r o a c h

H e r e rsquo s w h y hellip

R e a c t rsquo s J a v a S c r i p t - c e n t r i c d e s i g n = s i m p l i c i t y

A n g u l a r 2 c o n t i n u e s A n g u l a r 1 rsquo s a p p r o a c h o f t r y i n g t o m a k e H T M L m o r e

p o w e r f u l S o y o u h a v e t o u t i l i z e A n g u l a r 2 s u n i q u e s y n t a x f o r s i m p l e t a s k s

l i k e l o o p i n g a n d c o n d i t i o n a l s F o r e x a m p l e A n g u l a r 2 o ff e r s b o t h o n e a n d

t w o w a y b i n d i n g v i a t w o s y n t a x e s t h a t a r e u n f o r t u n a t e l y q u i t e d i ff e r e n t

myVar One-way binding

ngModel=myVar Two-way binding

I n R e a c t b i n d i n g m a r k u p d o e s n rsquo t c h a n g e b a s e d o n t h i s d e c i s i o n ( i t rsquo s h a n d l e d

e l s e w h e r e a s I rsquo d a r g u e i t s h o u l d b e ) I n e i t h e r c a s e i t l o o k s l i k e t h i s

myVar

A n g u l a r 2 s u p p o r t s i n l i n e m a s t e r t e m p l a t e s u s i n g t h i s s y n t a x

ltulgt

ltli ngFor=hero of heroes





heroname

ltligt

ltulgt

T h e a b o v e s n i p p e t l o o p s o v e r a n a r r a y o f h e r o e s I h a v e m u l t i p l e c o n c e r n s

D e c l a r i n g a ldquo m a s t e r t e m p l a t e rdquo v i a a p r o c e e d i n g a s t e r i s k i s c r y p t i c

T h e p o u n d s i g n i n f r o n t o f h e r o d e c l a r e s a l o c a l t e m p l a t e v a r i a b l e T h i s

k e y c o n c e p t l o o k s l i k e n e e d l e s s n o i s e ( i f p r e f e r r e d y o u c a n u s e ` v a r ` )

T h e n g F o r a d d s l o o p i n g s y m a n t i c s t o H T M L v i a a n A n g u l a r - s p e c i fi c

a t t r i b u t e

C o n t r a s t A n g u l a r 2 rsquo s s y n t a x a b o v e w i t h R e a c t rsquo s p u r e J S

ltulgt

heroesmap(hero =gt

ltligtheronameltligt

)

ltulgt

S i n c e J S s u p p o r t s l o o p i n g n a t i v e l y R e a c t rsquo s J S X c a n s i m p l y l e v e r a g e a l l t h e

p o w e r o f J S f o r s u c h t h i n g s a n d d o m u c h m o r e w i t h m a p fi l t e r e t c

J u s t r e a d t h e A n g u l a r 2 C h e a t S h e e t T h a t rsquo s n o t H T M L T h a t rsquo s n o t J a v a S c r i p t

I t rsquo s A n g u l a r

T o r e a d A n g u l a r L e a r n a l o n g l i s t o f A n g u l a r - s p e c i c

s y n t a x

T o r e a d R e a c t L e a r n J a v a S c r i p t

R e a c t i s u n i q u e i n i t s s y n t a c t i c a n d c o n c e p t u a l s i m p l i c i t y C o n s i d e r i t e r a t i n g

i n t o d a y rsquo s p o p u l a r J S f r a m e w o r k s l i b r a r i e s

Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull





Knockout data-bind=rdquoforeachrdquo

React JUST USE JS )

A l l e x c e p t R e a c t u s e f r a m e w o r k s p e c i fi c r e p l a c e m e n t s f o r s o m e t h i n g t h a t i s

n a t i v e a n d t r i v i a l i n J a v a S c r i p t a l o o p T h a t rsquo s t h e b e a u t y o f R e a c t I t

e m b r a c e s t h e p o w e r o f J a v a S c r i p t t o h a n d l e m a r k u p s o n o o d d n e w s y n t a x

i s r e q u i r e d

A n g u l a r 2 rsquo s s y n t a c t i c o d d i t i e s c o n t i n u e w i t h c l i c k b i n d i n g

(click)=rdquoonSelect(hero)

I n c o n t r a s t R e a c t a g a i n u s e s p l a i n lsquo o l J a v a S c r i p t

onClick=thisonSelectbind(this hero)

A n d s i n c e R e a c t i n c l u d e s a s y n t h e t i c e v e n t s y s t e m ( a s d o e s A n g u l a r 2 ) y o u

d o n rsquo t h a v e t o w o r r y a b o u t t h e p e r f o r m a n c e i m p l i c a t i o n s o f d e c l a r i n g e v e n t

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

W h y fi l l y o u r h e a d w i t h a f r a m e w o r k rsquo s u n i q u e s y n t a x i f y o u d o n rsquo t h a v e t o

W h y n o t s i m p l y e m b r a c e t h e p o w e r o f J S

L u x u r i o u s D e v e l o p m e n t E x p e r i e n c e

J S X rsquo s c o d e c o m p l e t i o n s u p p o r t c o m p i l e - t i m e c h e c k s a n d r i c h e r r o r

m e s s a g i n g a l r e a d y c r e a t e a n e x c e l l e n t d e v e l o p m e n t e x p e r i e n c e t h a t s a v e s

b o t h t y p i n g a n d t i m e B u t c o m b i n e a l l t h a t w i t h h o t r e l o a d i n g w i t h t i m e

t r a v e l a n d y o u h a v e a r a p i d d e v e l o p m e n t e x p e r i e n c e l i k e n o o t h e r





S i z e C o n c e r n s

H e r e rsquo s t h e s i z e o f n o t a b l e f r a m e w o r k s l i b r a r i e s m i n i fi e d

E m b e r 5 8 0 k

A n g u l a r 2 5 6 5 k ( 7 5 9 k w i t h R x J S )

A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k

T o m a k e a r e a l c o m p a r i s o n I b u i l t A n g u l a r 2 rsquo s T o u r o f H e r o e s a p p i n b o t h

A n g u l a r 2 a n d R e a c t ( I u s e d t h e n e w R e a c t S l i n g s h o t s t a r t e r k i t ) T h e r e s u l t

A n g u l a r 2 7 6 4 k m i n i fi e d

R e a c t + R e d u x 2 1 6 k m i n i fi e d

S o A n g u l a r 2 i s o v e r t h r e e t i m e s t h e s i z e o f a R e a c t + R e d u x a p p o f

c o m p a r a b l e s i m p l i c i t y

N o w t h a t s a i d I a d m i t t h a t c o n c e r n s a b o u t t h e s i z e o f f r a m e w o r k s m a y b e

o v e r b l o w n

L a r g e a p p s t e n d t o h a v e a m i n i m u m o f s e v e r a l h u n d r e d k i l o b y t e s o f c o d e

mdash o f t e n

m o r e mdash

w h e t h e r t h e y rsquo r e b u i l t w i t h a f r a m e w o r k o r n o t D e v e l o p e r s n e e d

a b s t r a c t i o n s t o b u i l d c o m p l e x s o f t w a r e a n d w h e t h e r t h e y c o m e f r o m a

Dan Abramov - Live React Hot Reloading with





f r a m e w o r k o r a r e h a n d - w r i t t e n t h e y n e g a t i v e l y i m p a c t t h e p e r f o r m a n c e o f

a p p s

E v e n i f y o u w e r e t o e l i m i n a t e f r a m e w o r k s e n t i r e l y m a n y a p p s w o u l d s t i l l h a v e

h u n d r e d s o f k i l o b y t e s o f J a v a S c r i p t

mdash

T o m D a l e i n J a v a S c r i p t F r a m e w o r k s a n d

M o b i l e P e r f o r m a n c e

T o m i s r i g h t F r a m e w o r k s l i k e A n g u l a r a n d E m b e r a r e b i g g e r b e c a u s e t h e y

o ff e r m a n y m o r e f e a t u r e s o u t o f t h e b o x

H o w e v e r m y c o n c e r n i s t h i s m a n y a p p s d o n rsquo t n e e d e v e r y t h i n g t h e s e l a r g e

f r a m e w o r k s p u t i n t h e b o x I n a w o r l d t h a t rsquo s i n c r e a s i n g l y e m b r a c i n g

m i c r o s e r v i c e s m i c r o a p p s a n d s i n g l e - r e p o n s a b i l i t y p a c k a g e s R e a c t g i v e s

y o u t h e p o w e r t o ldquo r i g h t - s i z e rdquo y o u r a p p l i c a t i o n b y c a r e f u l l y s e l e c t i n g

o n l y w h a t i s n e c e s s a r y I n a w o r l d w i t h o v e r 2 0 0 0 0 0 n p m m o d u l e s t h a t rsquo s

a p o w e r f u l p l a c e t o b e

R e a c t E m b r a c e s t h e U n i x P h i l o s o p h y

R e a c t i s a l i b r a r y I t rsquo s p r e c i s e l y t h e o p p o s i t e p h i l o s o p h y o f l a r g e

c o m p r e h e n s i v e f r a m e w o r k s l i k e A n g u l a r a n d E m b e r S o w h e n y o u s e l e c t

R e a c t y o u rsquo r e f r e e t o c h o o s e m o d e r n b e s t - o f - b r e e d l i b r a r i e s t h a t s o l v e y o u r

p r o b l e m b e s t J a v a S c r i p t m o v e s f a s t a n d R e a c t a l l o w s y o u t o s w a p o u t s m a l l

p i e c e s o f y o u r a p p l i c a t i o n f o r b e t t e r l i b r a r i e s i n s t e a d o f w a i t i n g a r o u n d a n d

h o p i n g y o u r f r a m e w o r k w i l l i n n o v a t e

U n i x h a s s t o o d t h e t e s t o f t i m e H e r e rsquo s w h y

T h e p h i l o s o p h y o f s m a l l c o m p o s a b l e s i n g l e - p u r p o s e t o o l s

n e v e r g o e s o u t o f s t y l e

R e a c t i s a f o c u s e d c o m p o s a b l e s i n g l e - p u r p o s e t o o l u s e d b y m a n y o f t h e

l a r g e s t w e b s i t e s i n t h e w o r l d T h a t b o d e s w e l l f o r i t s f u t u r e ( T h a t s a i d

A n g u l a r i s u s e d b y m a n y b i g n a m e s t o o )

S h o w d o w n S u m m a r y

A n g u l a r 2 i s a h u g e i m p r o v e m e n t o v e r v e r s i o n 1 T h e n e w c o m p o n e n t m o d e l

i s s i m p l e r t o g r a s p t h a n v 1 rsquo s d i r e c t i v e s i t s u p p o r t s i s o m o r p h i c u n i v e r s a l

r e n d e r i n g a n d i t u s e s a v i r t u a l D O M o ff e r i n g 3 ndash 1 0 x i m p r o v e m e n t s i n

p e r f o r m a n c e T h e s e c h a n g e s m a k e A n g u l a r 2 v e r y c o m p e t i t i v e w i t h R e a c t





T h e r e rsquo s n o d e n y i n g t h a t i t s f u l l - f e a t u r e d o p i n i o n a t e d n a t u r e o ff e r s s o m e

c l e a r b e n e fi t s b y r e d u c i n g ldquo J a v a S c r i p t f a t i g u e rdquo

H o w e v e r A n g u l a r 2 rsquo s s i z e a n d s y n t a x g i v e m e p a u s e A n g u l a r rsquo s c o m m i t t m e n t

t o H T M L - c e n t r i c d e s i g n m a k e s i t c o m p l e x c o m p a r e d t o R e a c t rsquo s s i m p l e r

J a v a S c r i p t - c e n t r i c m o d e l I n R e a c t y o u d o n rsquo t l e a r n f r a m e w o r k - s p e c i fi c H T M L

s h i m s l i k e n g W h a t e v e r Y o u s p e n d y o u r t i m e w r i t i n g p l a i n lsquo o l J a v a S c r i p t

T h a t rsquo s t h e f u t u r e I b e l i e v e i n

C o r y H o u s e i s t h e a u t h o r o f ldquo B u i l d i n g A p p l i c a t i o n s w i t h R e a c t a n d F l u x rdquo

ldquo C l e a n C o d e W r i t i n g C o d e f o r H u m a n s rdquo a n d m u l t i p l e o t h e r c o u r s e s o n

P l u r a l s i g h t H e i s a S o f t w a r e A r c h i t e c t a t V i n S o l u t i o n s a n d t r a i n s s o f t w a r e

d e v e l o p e r s i n t e r n a t i o n a l l y o n s o f t w a r e p r a c t i c e s l i k e f r o n t - e n d d e v e l o p m e n t

a n d c l e a n c o d i n g C o r y i s a M i c r o s o f t M V P T e l e r i k D e v e l o p e r E x p e r t a n d

f o u n d e r o f o u t l i e r d e v e l o p e r c o m









S i g h Y e s A n g u l a r i s a f r a m e w o r k R e a c t i s a l i b r a r y S o m e s a y t h i s

d i ff e r e n c e m a k e s c o m p a r i n g t h e m i l l o g i c a l N o t a t a l l

C h o o s i n g b e t w e e n A n g u l a r a n d R e a c t i s l i k e c h o o s i n g b e t w e e n b u y i n g a n o ff - t h e -

s h e l f c o m p u t e r a n d b u i l d i n g y o u r o w n w i t h o ff - t h e - s h e l f p a r t s

T h i s p o s t c o n s i d e r s t h e m e r i t s o f t h e s e t w o a p p r o a c h e s I c o m p a r e R e a c t rsquo s

s y n t a x a n d c o m p o n e n t m o d e l t o A n g u l a r rsquo s s y n t a x a n d c o m p o n e n t m o d e l

T h i s i s l i k e c o m p a r i n g a n o ff - t h e - s h e l f c o m p u t e r rsquo s C P U t o a r a w C P U A p p l e s

t o a p p l e s

A n g u l a r 2 A d v a n t a g e s

L e t rsquo s s t a r t b y c o n s i d e r i n g A n g u l a r 2 rsquo s a d v a n t a g e s o v e r R e a c t

L o w D e c i s i o n F a t i g u e

S i n c e A n g u l a r i s a f r a m e w o r k i t p r o v i d e s s i g n i fi c a n t l y m o r e o p i n i o n s a n d

f u n c t i o n a l i t y o u t o f t h e b o x W i t h R e a c t y o u t y p i c a l l y p u l l a n u m b e r o f o t h e r

l i b r a r i e s o ff t h e s h e l f t o b u i l d a r e a l a p p Y o u rsquo l l l i k e l y w a n t l i b r a r i e s f o r

r o u t i n g e n f o r c i n g u n i d i r e c t i o n a l fl o w s w e b A P I c a l l s t e s t i n g d e p e n d e n c y

m a n a g e m e n t a n d s o o n T h e n u m b e r o f d e c i s i o n s i s p r e t t y o v e r w h e l m i n g

T h i s i s w h y R e a c t h a s s o m a n y s t a r t e r k i t s ( I rsquo v e p u b l i s h e d t w o )

A n g u l a r o ff e r s m o r e o p i n i o n s o u t o f t h e b o x w h i c h h e l p s y o u g e t s t a r t e d

m o r e q u i c k l y w i t h o u t f e e l i n g i n t i m i d a t e d b y d e c i s i o n s T h i s e n f o r c e d

c o n s i s t e n c y a l s o h e l p s n e w h i r e s f e e l a t h o m e m o r e q u i c k l y a n d m a k e s

s w i t c h i n g d e v e l o p e r s b e t w e e n t e a m s m o r e p r a c t i c a l

I a d m i r e h o w t h e A n g u l a r c o r e t e a m h a s e m b r a c e d T y p e S c r i p t w h i c h l e a d s

t o t h e n e x t a d v a n t a g e hellip

T y p e S c r i p t = C l e a r P a t h

S u r e T y p e S c r i p t i s n rsquo t l o v e d b y a l l b u t A n g u l a r 2 rsquo s o p i n i o n a t e d t a k e o n w h i c h

fl a v o r o f J a v a S c r i p t t o u s e i s a b i g w i n R e a c t e x a m p l e s a c r o s s t h e w e b a r e

f r u s t r a t i n g l y i n c o n s i s t e n t

mdash i t rsquo s p r e s e n t e d i n E S 5 a n d E S 6 i n r o u g h l y e q u a l

n u m b e r s a n d i t c u r r e n t l y o ff e r s t h r e e d i ff e r e n t w a y s t o d e c l a r e c o m p o n e n t s

T h i s c r e a t e s c o n f u s i o n f o r n e w c o m e r s ( A n g u l a r a l s o e m b r a c e s d e c o r a t o r s

i n s t e a d o f e x t e n d s mdash

m a n y w o u l d c o n s i d e r t h i s a p l u s a s w e l l )

W h i l e A n g u l a r 2 d o e s n rsquo t r e q u i r e T y p e S c r i p t t h e A n g u l a r c o r e t e a m c e r t a i n l y

e m b r a c e s i t a n d d e f a u l t s t o u s i n g T y p e S c r i p t i n d o c u m e n t a t i o n T h i s m e a n s




































J S X




























N o t f u n































myVar


ltulgt






heroname

ltligt

ltulgt






a t t r i b u t e


ltulgt

heroesmap(hero =gt


)

ltulgt






s y n t a x




Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull






React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash




















































































J S X




























N o t f u n































myVar


ltulgt






heroname

ltligt

ltulgt






a t t r i b u t e


ltulgt

heroesmap(hero =gt


)

ltulgt






s y n t a x




Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull






React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash








































































N o t f u n































myVar


ltulgt






heroname

ltligt

ltulgt






a t t r i b u t e


ltulgt

heroesmap(hero =gt


)

ltulgt






s y n t a x




Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull






React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash












































































myVar


ltulgt






heroname

ltligt

ltulgt






a t t r i b u t e


ltulgt

heroesmap(hero =gt


)

ltulgt






s y n t a x




Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull






React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash





















































heroname

ltligt

ltulgt






a t t r i b u t e


ltulgt

heroesmap(hero =gt


)

ltulgt






s y n t a x




Ember each

Angular 1 ng-repeat

Angular 2 ngFor

bull

bull

bull






React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash






















































React JUST USE JS )




i s r e q u i r e d





















E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash























































E m b e r 5 8 0 k


A n g u l a r 1 3 2 4 k

R e a c t + R e d u x 2 0 4 k








o v e r b l o w n


mdash o f t e n

m o r e mdash









a p p s



mdash






















































a p p s



mdash








































































Documents

Angular 2 Versus React_ There Will Be Blood — Medium