Angular vs React Smackdown - Devoxx BE 2017

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About Deepu Javascript Evangelist Co-lead Senior product developer Robotics & Astronomy enthusiast https://www.packtpub.com/application-development/full-stack-development-jhipster #Devoxx @deepu105 | @mraible #Devoxx17

Slide 3

Slide 3 text

About Matt Hick from the Sticks Open Source Connoisseur Web Framework Aficionado Developer Advocate VW Buses and Vans Java Hipster #Devoxx @deepu105 | @mraible #Devoxx17

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

The Rise of MV* Frameworks #Devoxx @deepu105 | @mraible #Devoxx17

Slide 7

Slide 7 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 8

Slide 8 text

How many of you have experienced “Yet Another Framework Syndrome” #Devoxx @deepu105 | @mraible #Devoxx17

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

https://angular.io/guide/quickstart

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

https://vimeo.com/213710634

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 19

Slide 19 text

Getting Started Comparison #Devoxx @deepu105 | @mraible #Devoxx17

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Your Favorite Angular Features? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 22

Slide 22 text

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 #Devoxx @deepu105 | @mraible #Devoxx17

Slide 23

Slide 23 text

Your Favorite React Features? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 26

Slide 26 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 27

Slide 27 text

Framework vs Library Angular = Full fledged MVVM framework React = View rendering library Angular = React + Redux + React Router … (React & Friends) #Devoxx @deepu105 | @mraible #Devoxx17

Slide 28

Slide 28 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

It’s Time to Vote! #Devoxx @deepu105 | @mraible #Devoxx17

Slide 31

Slide 31 text

Technical Differences? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Philosophical Differences? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Usability? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Which one is easier to learn? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Which one has a better ecosystem? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Best way to compare? With

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Demo Time! #Devoxx @deepu105 | @mraible #Devoxx17

Slide 45

Slide 45 text

Angular vs React - Pretty Graphs #Devoxx @deepu105 | @mraible #Devoxx17

Slide 46

Slide 46 text

Popularity - Google Trends #Devoxx @deepu105 | @mraible #Devoxx17

Slide 47

Slide 47 text

Angular React Popularity - Hot Frameworks #Devoxx @deepu105 | @mraible #Devoxx17 https://hotframeworks.com/#top-frameworks

Slide 48

Slide 48 text

Popularity - Github stars #Devoxx @deepu105 | @mraible #Devoxx17 http://www.timqian.com/star-history

Slide 49

Slide 49 text

Popularity - NPM downloads #Devoxx @deepu105 | @mraible #Devoxx17

Slide 50

Slide 50 text

Usage - Libscore #Devoxx @deepu105 | @mraible #Devoxx17

Slide 51

Slide 51 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 52

Slide 52 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 53

Slide 53 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 54

Slide 54 text

So who wins? #Devoxx @deepu105 | @mraible #Devoxx17

Slide 55

Slide 55 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Want to learn more about JHipster? Come to our BOF tonight! #Devoxx @deepu105 | @mraible #Devoxx17

Slide 61

Slide 61 text

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 #Devoxx @deepu105 | @mraible #Devoxx17

Slide 62

Slide 62 text

#Devoxx @deepu105 | @mraible #Devoxx17

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Thank you!