Slide 1

Slide 1 text

MODERN FRONTENDS vs Anupam Jain

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

POPULARITY

Slide 4

Slide 4 text

POPULARITY

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ENTERPRISE USE PATTERN • React • Facebook, AirBnb, Uber, Netflix, Instagram, Whatsapp, Dropbox • Angular – MadeWithAngular.com • Microsoft, NBA, Delta, VMWare, Forbes, BMW, Santander, Blender

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

PERFORMANCE

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

REACT LOAD PERFORMANCE “REALWORLD” APP

Slide 14

Slide 14 text

ANGULAR LOAD PERFORMANCE “REALWORLD” APP

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

CODE SIZE

Slide 20

Slide 20 text

REACT CODE COMPLEXITY • 158 LOC JS Framework Benchmark • ~2000 LOC Realworld App

Slide 21

Slide 21 text

ANGULAR CODE COMPLEXITY • 215 LOC JS Framework Benchmark • ~2500 LOC Realworld App

Slide 22

Slide 22 text

FEATURE COMPARISON

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

ROUTING •React-Router - •Dynamic Routes •Supports Lazy Loading •Angular Router - •Static Routes •Supports Lazy Loading

Slide 29

Slide 29 text

TRANSPILATION TARGET •React - excellent Transpilation Target •Bindings for - Purescript, Haskell, Scala, Reason •Angular – Not easily targeted

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

DEBUGGING • React • React dev tools • Redux dev tools - Can also be used with Angular+Redux. • Angular • RxJS - tap() chains. • Augury • ng.probe()

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

NATIVE APPS •React-Native •NativeScript for Angular •Ionic

Slide 37

Slide 37 text

UI LIBRARIES •React – Lots of them •Angular – Material, Ionic •React - 360 for VR. Gatsby for static sites.

Slide 38

Slide 38 text

MICROSERVICES • Much better with React? • Angular is frontend-heavy.

Slide 39

Slide 39 text

OTHER SIMILAR FEATURES • Ajax - Use Axios or Fetch in React. • Inbuilt Security, e.g. XSS Protection • Inbuilt utils for Testing. Use Enzyme in React

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

QUESTION TO ASK •Even with React, it is recommended to use Typescript. •Even with Angular, use One way binding.