Angular vs React Smackdown - Devoxx BE 2017

#Devoxx @deepu105 | @mraible#Devoxx17
By Deepu K Sasidharan, XebiaLabs and Matt Raible, Okta
November 9, 2017

About Deepu
Javascript Evangelist
Co-lead
Senior product developer
Robotics & Astronomy enthusiast
https://www.packtpub.com/application-development/full-stack-development-jhipster

About Matt
Hick from the Sticks
Open Source Connoisseur
Web Framework Aficionado
Developer Advocate
VW Buses and Vans
Java Hipster

What about you?
How many folks are Java developers?
How many are web developers?
Who likes JavaScript? Who likes TypeScript better?
Are you a fan of:
Angular
React
Vue.js

Today’s Agenda
The History of Angular and React
Learning Angular and React
Our favorite and not-so-favorite features
Framework Fight!
Lies, damned lies, and statistics
Our Recommendations

The Rise of MV* Frameworks

How many of you have experienced
“Yet Another Framework Syndrome”

The History of Angular
Started as AngularJS in 2009 by Miško Hevery
GWT == 3 developers, 6 months
AngularJS == 1 developer, 3 weeks
Announced Angular 2, September 2014
2.0 Released in September 2016
5.0 Released November 1, 2017

https://angular.io/guide/quickstart

The History of React
React was created by Jordan Walke in 2011 &
Open sourced in May 2013
Inspired by XHP, an HTML components
framework for PHP
Within one year, had large sites
Khan Academy, New York Times, Airbnb
+ Facebook and Instagram
16.0 released on September 26, 2017

https://codepen.io/gaearon/pen/ZpvBNJ

Getting Started Comparison

Angular CLI vs Create React App
Minimal dependencies
ES6 by default
Yarn by default
325 Lines of code (not counting
README)
PWA Score: 55/82
ng new app-name --minimal
TypeScript by default
npm by default
225 Lines of code
PWA Score: 18/36 (dev/prod)
ng generate component | service

Your Favorite Angular Features?

Matt’s Favorite Angular Features
Dependency Injection
Angular CLI
Resembles Java MVC Frameworks
Two-way Binding
Components, Services, and Directives
TypeScript
Ionic Framework
Webpack compiling TypeScript
Searchability: Angular vs AngularJS
Release Candidates in 2016
Testing Infrastructure

Your Favorite React Features?

Deepu’s Favorite React Features
One way binding
Virtual DOM
JSX
Flexibility
Component based composability
Smart & Dumb components
React Native
One way binding
Dependency fatigue
JSX
Too many options for state management
No official style guide

Framework vs Library
Angular = Full fledged MVVM framework
React = View rendering library
Angular = React + Redux + React Router … (React & Friends)

Let’s get the similarities out of the way
Both Angular and React are component-based
Both are client side MVVM frameworks for building SPAs
Both support server-side rendering
Both supports native mobile app development
Both requires a build tool like webpack for optimal usage
Both have comparable performance
Both are backed by big companies (Google & Facebook)
Both are MIT licenced (Finally!)

It’s Time to Vote!

Technical Differences?

Follows EL in HTML approach
Uses regular DOM
Typescript based (Possible to write in plain JS
but not recommended)
Supports dependency injection
Supports Lazy loading & AOT
State management by default supports one
way and 2 way binding
Technical Differences
Follows HTML in JS (JSX) approach
Uses Virtual DOM
ES6 + JSX based (Possible to use Typescript
+ TSX as well)
Does not have the concept
Lazy loading is possible, No AOT
State management is only one way binding
and libraries like Redux or MobX is used more
often for state management

Philosophical Differences?

An opinionated framework
Promotes object-oriented approach
Offers everything required to build an SPA
Differing Philosophies
A view rendering library
Promotes functional approach
Requires use of a many 3rd party libraries like
Redux, React router etc.

Usability?

Less flexible
Often results in more code for same task
compared to React
Usability
Very flexible
Often results in less code for same task
compared to Angular

Which one is easier to learn?

Learning
Angular is a framework with lot of concepts
and hence is complex to learn causing JS
fatigue
Opinionated and provides guidance for most
use cases
React itself is easier to learn but since it is
only a view renderer it would require many
other libraries for state management, routing
etc ending up in same fatigue
Limited guidance. Requires one to choose a
stack and decide on 3rd party libraries and
approaches to follow

Which one has a better ecosystem?

Ecosystem
Ecosystem is not that huge
Easier to set up for a full fledged application
out of the box
Limited choice when it comes to alternative
approaches for example state management
Huge ecosystem
Difficult to set up for a full fledged application
due to above point
Lot of choices in approaches

Best way to compare?
With <code>!

How We Did It
Generated apps with both Angular and React
Used JHipster, because we’re hip!
Gathered statistics:
Performance
Accessibility
Lines of Code

JHipster Angular vs React
PWA Score: 91
Performance: 66
Accessibility: 100
Best Practices: 81
Lines of code: 12416 (55 TypeScript)
Number of tests: 3
PWA Score: 91
Performance: 75
Accessibility: 100
Best Practices: 81
Lines of code: 15177 (126 TypeScript files)
Number of tests: 9

Demo Time!

Angular vs React - Pretty Graphs

Popularity - Google Trends

Angular React
Popularity - Hot Frameworks
https://hotframeworks.com/#top-frameworks

Popularity - Github stars
http://www.timqian.com/star-history

Popularity - NPM downloads

Usage - Libscore

So who wins?

Our Recommendation
If you have a lot of state: React
If you’re familiar with Java MVC frameworks: Angular
If you work at Facebook: React
If you work at Google: Angular
If you like structure and a helping hand: Angular
If you like flexibility: React

Other Opinions
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Other Opinions
https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc

What You Learned
The History of Angular and React
Hello World in Angular and React
Our favorite and not-so-favorite features
Similarities and Differences
Lies, damned lies, and statistics
Learning is the real skill, not knowing a web framework!

Want to learn more about JHipster?
Come to our BOF tonight!

Questions?
JHipster Sample Apps on GitHub
github.com/hipster-labs/devoxx17-jh-angular
github.com/hipster-labs/devoxx17-jh-react
Presentation at speakerdeck.com/mraible
Contact us!
@deepu105 || deepu.js.org
@mraible || raibledesigns.com

The JHipster Mini-Book
Written with Asciidoctor
Quick and to the point, 130 pages
Developed a real world app:
www.21-points.com
Free Download from
infoq.com/minibooks/jhipster-4-mini-book
@jhipster_book

Angular vs React Smackdown - Devoxx BE 2017

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Angular vs React Smackdown - Devoxx BE 2017

Similar a Angular vs React Smackdown - Devoxx BE 2017 (20)

Más de Matt Raible

Más de Matt Raible (20)

Último

Último (20)

Angular vs React Smackdown - Devoxx BE 2017