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.

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