Angular vs React Smackdown - Devoxx BE 2017

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 defends React, Matt defends Angular. We'll even show you the same app created with React and Angular via JHipster.

YouTube: https://youtu.be/qYEEuiI4l10

Example projects are on GitHub:

Angular: https://github.com/hipster-labs/devoxx17-jh-angular
React: https://github.com/hipster-labs/devoxx17-jh-react

And they're deployed to Heroku:

Angular: https://devoxx-17-angular.herokuapp.com/
React: https://devoxx-17-react.herokuapp.com/

Transcript

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

   View Slide

2. 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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

7. #Devoxx @deepu105 | @mraible
   #Devoxx17
   

   View Slide

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

   View Slide

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
   

   View Slide

10. https://angular.io/guide/quickstart
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

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
    

    View Slide

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

    View Slide

16. https://vimeo.com/213710634
    

    View Slide

17. View Slide

18. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

22. 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
    

    View Slide

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

    View Slide

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
    

    View Slide

25. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

26. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

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

    View Slide

28. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

35. Usability?
    #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

41. Best way to compare?
    With !
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

52. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

53. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

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

    View Slide

55. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

56. 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
    

    View Slide

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

    View Slide

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

    View Slide

59. 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
    

    View Slide

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

    View Slide

61. 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
    

    View Slide

62. #Devoxx @deepu105 | @mraible
    #Devoxx17
    

    View Slide

63. 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
    

    View Slide

64. Thank you!
    

    View Slide