This talk discusses the pros and cons of Angular and React and shows how they're similar, as well as how they're different. Deepu will defend React, Matt will defend Angular. We'll even show you the same app created with React and Angular via JHipster.
3. About Matt
Hick from the Sticks
Open Source Connoisseur
Web Framework Aficionado
Developer Advocate
VW Buses and Vans
Java Hipster
#Devoxx @deepu105 | @mraible#Devoxx17
4. 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
#Devoxx @deepu105 | @mraible#Devoxx17
5. 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
#Devoxx @deepu105 | @mraible#Devoxx17
6. The Rise of MV* Frameworks
#Devoxx @deepu105 | @mraible#Devoxx17
8. How many of you have experienced
“Yet Another Framework Syndrome”
#Devoxx @deepu105 | @mraible#Devoxx17
9. 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
#Devoxx @deepu105 | @mraible#Devoxx17
14. 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
#Devoxx @deepu105 | @mraible#Devoxx17
20. 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
#Devoxx @deepu105 | @mraible#Devoxx17
24. 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
#Devoxx @deepu105 | @mraible#Devoxx17
29. 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!)
#Devoxx @deepu105 | @mraible#Devoxx17
30. It’s Time to Vote!
#Devoxx @deepu105 | @mraible#Devoxx17
32. 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
#Devoxx @deepu105 | @mraible#Devoxx17
34. 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.
#Devoxx @deepu105 | @mraible#Devoxx17
36. 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
#Devoxx @deepu105 | @mraible#Devoxx17
37. Which one is easier to learn?
#Devoxx @deepu105 | @mraible#Devoxx17
38. 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
#Devoxx @deepu105 | @mraible#Devoxx17
39. Which one has a better ecosystem?
#Devoxx @deepu105 | @mraible#Devoxx17
40. 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
#Devoxx @deepu105 | @mraible#Devoxx17
42. How We Did It
Generated apps with both Angular and React
Used JHipster, because we’re hip!
Gathered statistics:
Performance
Accessibility
Lines of Code
#Devoxx @deepu105 | @mraible#Devoxx17
43. 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
#Devoxx @deepu105 | @mraible#Devoxx17
55. 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
#Devoxx @deepu105 | @mraible#Devoxx17
58. 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!
#Devoxx @deepu105 | @mraible#Devoxx17
59. Want to learn more about JHipster?
Come to our BOF tonight!
#Devoxx @deepu105 | @mraible#Devoxx17
62. 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
#Devoxx @deepu105 | @mraible#Devoxx17