Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular vs React - Devoxx BE 2017

284 views

Published on

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.

Published in: Technology
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ◆◆◆ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Angular vs React - Devoxx BE 2017

  1. 1. #Devoxx @deepu105 | @mraible#Devoxx17 By Deepu K Sasidharan, XebiaLabs and Matt Raible, Okta November 9, 2017
  2. 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
  3. 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. 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. 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. 6. The Rise of MV* Frameworks #Devoxx @deepu105 | @mraible#Devoxx17
  7. 7. #Devoxx @deepu105 | @mraible#Devoxx17
  8. 8. How many of you have experienced “Yet Another Framework Syndrome” #Devoxx @deepu105 | @mraible#Devoxx17
  9. 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
  10. 10. https://angular.io/guide/quickstart
  11. 11. 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
  12. 12. https://codepen.io/gaearon/pen/ZpvBNJ
  13. 13. https://vimeo.com/213710634
  14. 14. #Devoxx @deepu105 | @mraible#Devoxx17
  15. 15. Getting Started Comparison #Devoxx @deepu105 | @mraible#Devoxx17
  16. 16. 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
  17. 17. Your Favorite Angular Features? #Devoxx @deepu105 | @mraible#Devoxx17
  18. 18. 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
  19. 19. Your Favorite React Features? #Devoxx @deepu105 | @mraible#Devoxx17
  20. 20. 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
  21. 21. #Devoxx @deepu105 | @mraible#Devoxx17
  22. 22. #Devoxx @deepu105 | @mraible#Devoxx17
  23. 23. Framework vs Library Angular = Full fledged MVVM framework React = View rendering library Angular = React + Redux + React Router … (React & Friends) #Devoxx @deepu105 | @mraible#Devoxx17
  24. 24. #Devoxx @deepu105 | @mraible#Devoxx17
  25. 25. 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
  26. 26. It’s Time to Vote! #Devoxx @deepu105 | @mraible#Devoxx17
  27. 27. Technical Differences? #Devoxx @deepu105 | @mraible#Devoxx17
  28. 28. 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
  29. 29. Philosophical Differences? #Devoxx @deepu105 | @mraible#Devoxx17
  30. 30. 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
  31. 31. Usability? #Devoxx @deepu105 | @mraible#Devoxx17
  32. 32. 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
  33. 33. Which one is easier to learn? #Devoxx @deepu105 | @mraible#Devoxx17
  34. 34. 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
  35. 35. Which one has a better ecosystem? #Devoxx @deepu105 | @mraible#Devoxx17
  36. 36. 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
  37. 37. Best way to compare? With <code>!
  38. 38. 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
  39. 39. 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
  40. 40. Demo Time! #Devoxx @deepu105 | @mraible#Devoxx17
  41. 41. Angular vs React - Pretty Graphs #Devoxx @deepu105 | @mraible#Devoxx17
  42. 42. Popularity - Google Trends #Devoxx @deepu105 | @mraible#Devoxx17
  43. 43. Angular React Popularity - Hot Frameworks #Devoxx @deepu105 | @mraible#Devoxx17 https://hotframeworks.com/#top-frameworks
  44. 44. Popularity - Github stars #Devoxx @deepu105 | @mraible#Devoxx17 http://www.timqian.com/star-history
  45. 45. Popularity - NPM downloads #Devoxx @deepu105 | @mraible#Devoxx17
  46. 46. Usage - Libscore #Devoxx @deepu105 | @mraible#Devoxx17
  47. 47. #Devoxx @deepu105 | @mraible#Devoxx17
  48. 48. #Devoxx @deepu105 | @mraible#Devoxx17
  49. 49. #Devoxx @deepu105 | @mraible#Devoxx17
  50. 50. So who wins? #Devoxx @deepu105 | @mraible#Devoxx17
  51. 51. 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
  52. 52. Other Opinions https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
  53. 53. Other Opinions https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc
  54. 54. 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
  55. 55. Want to learn more about JHipster? Come to our BOF tonight! #Devoxx @deepu105 | @mraible#Devoxx17
  56. 56. 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
  57. 57. #Devoxx @deepu105 | @mraible#Devoxx17
  58. 58. 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
  59. 59. Thank you!

×