Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Use Angular for better React apps

Use Angular for better React apps

Angular is a fantastic piece of technology focused on huge apps/teams and enterprise solutions. While that’s nice and everything it’s a huge power plant with non trivial complexity, which you might not need/want, especially on component level...
React, though, does one thing and does it very well - building components…
With that said what if we took the good parts of Angular and incorporate them with React to get ultimate solution for building apps with top notch developer experience ? In this session I’ll show you how to do it ⚛⚛⚛.

Martin Hochel

December 06, 2018

More Decks by Martin Hochel

Other Decks in Programming


  1. Martin Hochel Principal SE, GDE WEB Prague / Czech Republic

    @martin_hotell medium.com/@martin_hotell github.com/hotell
  2. What I like about Angular Official style guides Architecture DI

    TypeScript guarantees Tooling Very tasty!
  3. What I dislike about Angular Component model Angular modules Proprietary

    DSL + HTML like templates Change Detection / Dirty checking
  4. What I like about React Simple/Robust Component model It’s just

    javascript (functions and classes) #dealWithIt Testability Mature / Industry standard Very tasty!
  5. What I dislike about React No official style-guides No official

    libraries - 200 routers, 100 state management libs… TypeScript ? eh? Flow? Maybe.Just.Nothing ?
  6. Episode I: TypeScript Setup yarn add -D typescript yarn add

    -D @types/{react,react-dom} yarn tsc --init --moduleResolution node --jsx react --module ESNext --lib dom,es2015
  7. Episode II: Style guides - naming (symbols/file names) DO: hero-list.tsx

    class HeroList extends Component { } WHY? readable file names. e.g MyHalfFixedDedupedDirResolver vs my-half-fixed-deduped-dir-resolver CONSIDER: <feature>.<type>.ts?x hero.service.ts class HeroService {} counter.hoc.ts function withCounter() counter.hook.ts function useCounter() AVOID: HeroList.tsx
  8. Episode II: Style guides - Application structure DO: LIFT Locate

    Identify Flat T-Dry Root Shared Core Feature
  9. Episode IV: Angular vs React State @Component() class CounterComponent {

    count = 0 after = 3 } @Injectable() class CounterService { count = 0 after = 3 } class Counter extends Component { state = {count:0} }
  10. Episode IV: Stateful services in React import {Stateful, Injectable} from

    ‘@martin_hotell/rea-di’ @Injectable() class Service extends Stateful<T> { state: T }
  11. Episode V: Angular vs React HttpClient @angular/common/http - provider -

    interceptors fetch ( low level ) Axios ( Angular 1 $http )
  12. Static Router Config Absolute/Relative path Router Outlet Lazy loading Episode

    VI: Angular vs React router Declarative component routing Absolute path only handling of 404 / exact
  13. Episode VIII: The Last CLI/Schematic Angular CLI - Core -

    @angular-devkit/core - Architect - @angular-devkit/architect - @angular-devkit/architect-cli - Builder - @angular-devkit/build-webpack - Schematics - @angular-devkit/schematics - @angular-devkit/schematics-cli
  14. Episode VIII: Angular Schematics - ng new - scaffold new

    app - ng add - add 3rd party library and setup - ng upgrade - update core libraries - ng generate <schematic> - generate.modify file based on schematic ng-new ng-add upgrade schematics
  15. Summary Leverage the best parts of Angular within React Apps

    + type safety + common style guides / patterns + robust Dependency Injection + Reactivity via Observables + CLI / productivity / refactoring / updates = Enterprise Ready