$30 off During Our Annual Pro Sale. View Details »

Angular vs React in 2019

Anupam
March 01, 2019

Angular vs React in 2019

Presented in 2019 to a dev team which had asked my opinion on Angular vs React for a new Web Application project.

Anupam

March 01, 2019
Tweet

More Decks by Anupam

Other Decks in Programming

Transcript

  1. MODERN FRONTENDS vs Anupam Jain

  2. APPLES TO ORANGES • Angular is a full framework out

    of the box • No depending on a third-party library which might become unsupported in the future • Rigidly opinionated • Less dev disagreements on code structure • Forces Typescript adoption • Angular/Core is more comparable with React
  3. POPULARITY

  4. POPULARITY

  5. POPULARITY • React • Incredible FOSS adoption • 124k stars

    on React repo • 4m weekly NPM downloads • Angular • More enterprise use • “Only” 46k stars on Angular repo • 500k weekly NPM downloads
  6. ENTERPRISE USE PATTERN • React • Facebook, AirBnb, Uber, Netflix,

    Instagram, Whatsapp, Dropbox • Angular – MadeWithAngular.com • Microsoft, NBA, Delta, VMWare, Forbes, BMW, Santander, Blender
  7. STACK OVERFLOW DEV SURVEY 2018 https://insights.stackoverflow.com/survey/2018

  8. STACK OVERFLOW DEV SURVEY 2018 https://insights.stackoverflow.com/survey/2018

  9. STACK OVERFLOW DEV SURVEY 2018 https://insights.stackoverflow.com/survey/2018

  10. STACK OVERFLOW DEV SURVEY 2018 https://insights.stackoverflow.com/survey/2018

  11. PERFORMANCE

  12. PERFORMANCE •Bundle size • React - 1m dev bundle. 150k

    prod bundle. • Angular - 1.2m dev bundle. 200k prod bundle. • In development Ivy Renderer with tree shaking can have a 4K Hello World •Both support Server Side Rendering
  13. REACT LOAD PERFORMANCE “REALWORLD” APP

  14. ANGULAR LOAD PERFORMANCE “REALWORLD” APP

  15. PERFORMANCE TESTING • https://github.com/krausest/js-framework- benchmark • Results Follow -

  16. None
  17. None
  18. None
  19. CODE SIZE

  20. REACT CODE COMPLEXITY • 158 LOC JS Framework Benchmark •

    ~2000 LOC Realworld App
  21. ANGULAR CODE COMPLEXITY • 215 LOC JS Framework Benchmark •

    ~2500 LOC Realworld App
  22. FEATURE COMPARISON

  23. HIGH LEVEL CODE ORGANISATION 1 • Angular • Modules •

    No Higher Order Components • No Mixins • In development “Ivy Renderer” makes it possible. But • Client Code may require rewriting to use • Loss of Tooling. No Enforced Code Style
  24. STATE MANAGEMENT • Angular – RxJS. Do NOT use MobX.

    • Two Way bindings lead to spaghetti code • NgRx takes inspiration from Redux but incorporates RxJS. Another is NGXS which also uses modern TypeScript features • RxJS is great for HTTP calls. • React • One Way Bindings. Functional Views. • Redux. Many others • React wins big here.
  25. HIGH LEVEL CODE ORGANISATION 2 • React Promotes - •

    Functional Views, and Functional Components, which are Pure & Stateless. Very easy to Use and Test. • Hooks allow state management in pure components • Immutable data structures • Virtual-Dom abstracts away lots of complexity • Angular’s 2 Way Data Binding is much messier. It has third party support for Virtual-Dom, via ng- vdom. But it is not recommended.
  26. JSX • JSX Syntax is great! • JSX compiled to

    fast Javascript • Angular Template Syntax is bad • But Side Effect Free, which is great! • Compiled to Javascript when in AOT mode. More Complex. https://angular.io/guide/aot-compiler • Angular, you should use the third party TSX instead of inbuilt templating solution
  27. DEPENDENCY INJECTION • Angular – Has It • React –

    Doesn’t need it. but more work. https://blog.mgechev.com/2017/01/30/implementing- dependency-injection-react-angular-element-injectors/ • But I would recommend not injecting dependencies anyways. Just pass props/function args to React components. Also you can pass functions/components themselves. • React “Contexts” allow auto passing props down a tree of components. Should be used sparingly.
  28. ROUTING •React-Router - •Dynamic Routes •Supports Lazy Loading •Angular Router

    - •Static Routes •Supports Lazy Loading
  29. TRANSPILATION TARGET •React - excellent Transpilation Target •Bindings for -

    Purescript, Haskell, Scala, Reason •Angular – Not easily targeted
  30. ACTIVE DEVELOPMENT •Angular – New Ivy Renderer. Faster. Better tree

    shaking (4K hello world app). Easier build pipeline. Easy lazy-loading components. Meta Programming. •React – Fiber. Hooks. Suspense. All the meta programming capabilities provided by Ivy are already in React.
  31. NEW USER EXPERIENCE • Confusing error messages in Angular. Require

    web search. • Lots of new concepts in Angular - Typescript, RxJS, DI, Decorators, Components, Services, Templates, Directives. etc. Pipes, AoT compilation, Change detection. • Onboarding on React is definitely easier.
  32. MAINTENANCE • Angular CLI. Automatically installs deps and configures your

    application to use the dependency. Uses Angular “Schematics” which are like templates for making changes to the code. Schematics are also very helpful in automatically migrating code to new versions. • Debugging • Augury. Good Debugger for Angular. • React Dev Tools, Redux Dev Tools.
  33. DEBUGGING • React • React dev tools • Redux dev

    tools - Can also be used with Angular+Redux. • Angular • RxJS - tap() chains. • Augury • ng.probe()
  34. FLASH OF UNSTYLED CONTENT •Angular JS had a major problem

    with templates showing up before page fully loads. This was worked around with `ngCloak` etc. •May still not have a good solution.
  35. INPUT FOCUS MANAGEMENT •React •Like most other Virtual-Dom libraries, Input

    Focus Management is a problem. •Mostly solved by “defaultValue” etc. but still something to watch out for.
  36. NATIVE APPS •React-Native •NativeScript for Angular •Ionic

  37. UI LIBRARIES •React – Lots of them •Angular – Material,

    Ionic •React - 360 for VR. Gatsby for static sites.
  38. MICROSERVICES • Much better with React? • Angular is frontend-heavy.

  39. OTHER SIMILAR FEATURES • Ajax - Use Axios or Fetch

    in React. • Inbuilt Security, e.g. XSS Protection • Inbuilt utils for Testing. Use Enzyme in React
  40. QUESTION TO ASK • Proof Of Concept – Much easier

    to bang something out in React • For Large projects, with long lifetimes, with developer churn, Angular provides stability. (But does it?) • If new dev experience is important, React is better • If multiple platforms (web, mobile, desktop, embedded) will be targeted, then React will have better support • If no experienced developers are present initially to guide the project, then Angular may be a better choice • Server side rendering? Microservices? React. • Will libraries be updated regularly? If not, then Angular may be better supported • If 3rd party library/component ecosystem is important then React has more integrations
  41. QUESTION TO ASK •Even with React, it is recommended to

    use Typescript. •Even with Angular, use One way binding.