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.

ReactJS vs AngularJS - Head to Head comparison

7,165 views

Published on

ReactJS Israel - 3 hour - live head to head battle

Published in: Technology
  • Login to see the comments

ReactJS vs AngularJS - Head to Head comparison

  1. 1. ANGULAR2 REACT VS
  2. 2. MEGA MEETUP
  3. 3. hackademy.co.il
  4. 4. Nir Kaufman Boris Dinkevich
  5. 5. AGENDA Frameworks Overview Round 1 Round 2 Q&A Panel Live Coding Prepare Questions
  6. 6. ANGULAR2 REACT ROUND 1
  7. 7. REACT OVERVIEW
  8. 8. HISTORY Released in 2013 Production version from day one Dedicated teams at Facebook
  9. 9. THE BASE Webpack React Redux Win!
  10. 10. Game engine User Todos Study React Root App Add TodoTodos Todo … Study Redux Win! Todo … Todo …
  11. 11. THE TWO PROBLEMS Update the state Update the UI
  12. 12. VIRTUAL DOM Only make browser do the changes Never worry about $watch Support super element-heavy pages
  13. 13. State React Components Virtual DOM Browser DOM React Native Text etc Our code React +
  14. 14. DOM <div> <input> value=‘100’class=‘’ <div> <input> class=‘’ Virtual DOM value=‘’ Just a simple diff!
  15. 15. Update the state… Once in a galaxy far far away… MVVC...
  16. 16. Component
  17. 17. Component Service Service
  18. 18. Component Service Service Service
  19. 19. Component Service Service Service Service
  20. 20. Component Service Service Service Service Service
  21. 21. Component Service Component Service Service Service Service Service
  22. 22. Component Model ComponentComponent Service Service Service Service Service Service Service
  23. 23. MVVC
  24. 24. User Interface Dispatcher Stores UNI-DIRECTIONAL DATA FLOW StoresStores
  25. 25. UI IS RENDERED
  26. 26. UI IS RENDERED SOMETHING HAPPENED
  27. 27. UI IS RENDERED SOMETHING HAPPENED STATE CHANGED
  28. 28. UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED
  29. 29. UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED
  30. 30. FLUX
  31. 31. Redux The leader in Flux frameworks One single store of state!
  32. 32. SINGLE STATE Easy to re-render Easy to debug Easy to do server rendering
  33. 33. Current State Next State Reducers (processors) Action Update UI…Event…
  34. 34. TADA!(applause)
  35. 35. ANGULAR OVERVIEW
  36. 36. ANGULAR2 IS A NEW FRAMEWORK - built from scratch to be a development platform - dedicated team at google and around the world - currently in BETA 3
  37. 37. TARGETING DESKTOP & MOBILE - Abstract rendering layer - Server side rendering - Natural native-script support
  38. 38. CUTTING EDGE TECHNOLOGIES - Use of WebWorkers - Shadow DOM components - server-side pre-rendering, offline compile
  39. 39. EACH APP IS UNIQUE
  40. 40. CHOOSE YOUR TOOLS - build-tool agnostic: webpack, gulp, grunt etc.. - language support: ES5, ES6, TypeScript, Dart
  41. 41. CHOOSE YOUR STYLE & DATA FLOW - Object oriented style: plain classes - Reactive style: RxJS built-in - MV* style: build your data model layer with services - Flux / Redux: uni-direction data-flow
  42. 42. Components Dispatcher ActionsStores FLUX
  43. 43. Current State Next State Reducers (processors) Action Update UI…Event… REDUX
  44. 44. MVC Style Model Model Model Http Logger Auth Component Component Component
  45. 45. DEVELOPMENT PLATFORM
  46. 46. ALL ASPECTS OF MODERN WEB APPS - Animation module (js, css & Web animation API) - Internationalization (I18N) & accessibility - Powerful component router - Form system - (two-way data binding, 
 change tracking, validation, and error handling)
  47. 47. ABSTRACTIONS - Http module for server-side communication - Dependency injection for modularity and testability - Core directives for declarative dynamic templates
  48. 48. ECOSYSTEM
  49. 49. Released 2013 (2+ years) Used extensively in production https://github.com/facebook/react/ wiki/Sites-Using-React REAL WORLD USE Beta 3 Released in 2016 currently used in production only inside of Google
  50. 50. • Massive adoption abroad by startups and companies • Initial adoption in Israel • Active and growing React community • Multiple companies started PoC the technology • Initial adoption in Israel • Community interest exploding DEVELOPERS
  51. 51. • Active and growing React community • Huge amounts of quality Courses & Books • Community interest exploding • official conferences in Europe & USA • large amount of angular local communities around the world • massive amount of Books, Videos, Tutorials, Courses and posts COMMUNITY
  52. 52. • Gradual small improvements • Easy upgrade path (angular hah!) • milestones and development process (public) • tutorials and tools for easier migration from angular 1.x • dedicate team of 28 google engineers +community contributors ROADMAP
  53. 53. • Extensive eco system • Components for every need • Growing eco system • Angular 1.x components are currently in migration process • Easy integration with components made in other frameworks / libraries 3RD PARTY
  54. 54. TECHNICAL
  55. 55. • ES6/7 Focused • TypeScript adding extensive JSX support • ES6 / TypeScript focused (ES5 and Dart as well) • Standart HTML / CSS (react??) LANGUAGE
  56. 56. • Webpack & Babel • Webpack /gulp / grunt / etc… • TSC or Babel • Angular CLI (game changer!) BUILD TOOLS
  57. 57. • What is VirtualDOM • encapsulated structure and style • part of web components spec • exciting technology (not invented..) VIRTUAL / SHADOW DOM
  58. 58. • JSX - Next slide • Standart JavaScript - (.js or .ts) • Standard HTML - can be written as a separate file, valid, (.html) • Standard CSS - can be written as a separate file, valid (.css) • directives - declarative abstractions, extends element behaviour. • bind to native element properties and events - no wrappers! TEMPLATE ENGINES
  59. 59. JSX <div> <Component /> <h1>Regular HTML tags</h1> 
 
 <Hello title=‘React rules!’/> <ComponentWithChildren> <StuffInside /> Some text with { 4 - 3 } expressions in it.
 </ComponentWithChildren>
 </div>
  60. 60. Components const Hello = ({ title }) => <h1>{ title }</h1>; hello.jsx hello.css h1 {
 font-weight: bold;
 }
  61. 61. hello.js import {Component} from 'angular2/core';
 
 @Component({
 selector: 'hello-angular',
 templateUrl: 'hello.html',
 styleUrls: ['hello.css']
 })
 
 class HelloAngular { . . . } hello.css h1 {
 font-weight: bold;
 } hello.html <h1>{{ title }}</h1>
  62. 62. • FLUX • Zone.js - proxy for all the async methods in the browser • two-way, one-way, one-time binding mechanism • Flux, RxJS (streaming) and ‘classic’ Model style data flows • No $digest, $apply, $scope, $watch CHANGE DETECTION
  63. 63. • No need for browser • Mocking tools • Build in E2E (click()) (next slide) • No need for browser • Mocking tools out of the box • Testable from the ground up thanks to dependency injection TESTS
  64. 64. React Tests const component = TestUtils.renderIntoDocument(
 <MyComponent />
 );
 
 const button = component
 .findRenderedDOMComponentWithTag('button')
 .getDOMNode();
 
 const label = component
 .findRenderedDOMComponentWithTag('h1')
 .getDOMNode();
 
 TestUtils.Simulate.click(button);
 
 expect(label.textContent)
 .toEqual('I have been clicked!');
  65. 65. (next slide) Server Rendering • Server rendering support (angular universal) • WebWorker support
  66. 66. Server rendering import { renderToString } from ‘react-dom/server';
 
 // Render the component to a string
 const html = renderToString(
 <div>
 <h1>Hello from the server!</h1>
 </div>
 );
 import { render } from ‘react-dom';
 
 render(
 <div>
 <h1>Hello from the server!</h1>
 </div>,
 document.getElementById('app')
 );
  67. 67. • React Native • Same code on Android & iOS • Using Native Components! • No crappy WebView wrappers (ionic/ cordova/etc) • Server side rendering for web- mobile • Natural integration with native- script (native components, no cordova) MOBILE
  68. 68. • React Chrome extension • Easy “state” inspection • Great action replay with redux • redux dev tool for redux • built-in inspection tool • TypeScript support through IDE’s and sourceMaps https://github.com/gaearon/redux-devtools DEBUGGING
  69. 69. ANGULAR2 REACT ROUND 2
  70. 70. CODE
  71. 71. Angular is a development platform aimed for modern most demanding web and mobile applications. Angular2 built from several modules working together to supply high level abstractions and API’s for building complex applications with ease. Nuth said FINAL WORDS
  72. 72. We are looking for rockstars to join our band jobs@500tech.com HIRING
  73. 73. ANGULAR2 REACT Q&A

×