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

Don't let compilation set the length of your coffee break

Miroslav Jonaš
February 23, 2023
Programming
0
22

Don't let compilation set the length of your coffee break

Miroslav Jonaš

February 23, 2023
Tweet

More Decks by Miroslav Jonaš

See All by Miroslav Jonaš
Vanquishing deployment dragons with Nx wizardry
meeroslav
0
2
The other JavaScript performance (no one is talking about)
meeroslav
0
94
Age of monorepos (NgDe)
meeroslav
0
17
Age of monorepos (Armada JS 2022)
meeroslav
0
94
The Age of monorepos (JSNation)
meeroslav
0
100
Nx - The Obvious Choice
meeroslav
0
110
The Age of monorepos
meeroslav
0
120
Nx - The Easy Choice / AngularVienna
meeroslav
0
110
Nx - The Easy Choice
meeroslav
0
200

Other Decks in Programming

See All in Programming
初めましてLaravel、君のことを教えてくれ！ 〜春に就職したばかりの新卒エンジニアが調べた内部仕様と、そのプロセス〜
amixedcolor
0
180
Building Shared UIs across Platforms with Compose
heyitsmohit
1
160
Chatwork プロダクト本部 紹介資料（エンジニア向け）
chatwork_hr
1
2.6k
Jetpack Compose の Side-effect を使いこなす / DroidKaigi 2023
star_zero
1
770
ユニットテスト並行化の導入と運用：Goでの事例紹介
shohata
1
450
締切とはなにか、どういう効果があるのか #scrummikawa
murabayashi
0
320
Precondition with schema directives
quramy
0
270
Software Architecture
hschwentner
6
1.5k
Kotlinハイパフォーマンスプログラミング
ohmae
5
3.3k
RDRA, ICONIX, DDDの実践から得た学び
hsawaji
5
790
作って学ぶadbプロトコル / Create and learn adb protocols
ntsk
0
920
[2023/09/15]ER図クエスト 過ぎ去りしドキュメントを求めて 〜複雑性に眠る秘宝〜
tosite
0
110

Featured

See All Featured
Infographics Made Easy
chrislema
236
17k
Side Projects
sachag
450
39k
Code Review Best Practice
trishagee
53
13k
Producing Creativity
orderedlist
PRO
336
38k
The Cost Of JavaScript in 2023
addyosmani
9
1.5k
A Tale of Four Properties
chriscoyier
150
21k
How GitHub Uses GitHub to Build GitHub
holman
466
280k
The Invisible Side of Design
smashingmag
292
49k
We Have a Design System, Now What?
morganepeng
40
6.3k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
177
9.8k
Adopting Sorbet at Scale
ufuk
66
8.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.2k

Transcript

  1. DON’T LET COMPILATION SET THE
    LENGTH OF YOUR COFFEE BREAK
    Rares Matei
    @__rares
    Miroslav Jonas
    @meeroslav
    AgentConf ‘23 nx.dev

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. Rares Matei
    @__rares
    Miroslav Jonas
    @meeroslav

    View Slide

  6. Coffee App
    “we roast then post”
    specialty coffee delivery service

    View Slide

  7. Coffee App
    util-http util-stripe
    coffee-origin-screen grind-size-screen payment-screen
    ui-coffee-components payments-service

    View Slide

  8. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    util-http
    payment-screen

    View Slide

  9. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    util-http
    payment-screen

    View Slide

  10. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    npm run test:util-http

    View Slide

  11. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    npm run build:util-http

    View Slide

  12. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build

    View Slide

  13. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build
    Coffee e2e
    lint
    serve

    View Slide

  14. Coffee e2e
    lint
    serve
    Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build

    View Slide

  15. Coffee e2e
    lint
    serve
    Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build 1x build

    View Slide

  16. Coffee e2e
    lint
    serve
    Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build 1x build
    5x build

    View Slide

  17. Coffee e2e
    lint
    serve
    Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build 1x build

    View Slide

  18. Coffee e2e
    lint
    serve
    Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build build
    build
    build
    build
    build 1x build
    3x build

    View Slide

  19. View Slide

  20. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  21. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  22. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  23. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build
    build
    build
    build
    HOW?

    View Slide

  24. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build
    build
    build
    build

    View Slide

  25. View Slide

  26. View Slide

  27. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    test
    lint
    test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  28. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    lint
    test test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  29. View Slide

  30. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    lint
    test test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    deploy
    Coffee e2e
    lint
    serve
    build

    View Slide

  31. Coffee app
    util-stripe
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment-screen
    util-http
    lint
    test test test
    test
    test
    test test
    test
    lint lint
    lint lint
    lint
    lint
    lint
    build
    build build
    build
    build
    build
    build
    Coffee e2e
    lint
    serve
    build

    View Slide

  32. Simple?

    View Slide

  33. Simple?

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. ☁
    DISTRIBUTED CACHING
    "
    npm run build:coffee-app

    View Slide

  38. ☁
    "
    npm run build:pizzaroni
    # $ %
    npm run lint:admin
    npm run lint:admin
    npm run build:coffee-app
    npm run build:coffee-app
    npm run build:coffee-app
    DISTRIBUTED CACHING

    View Slide

  39. ☁
    "
    npm run build:pizzaroni
    # $ %
    npm run lint:admin
    npm run lint:admin
    npm run build:pizzaroni
    npm run build:coffee-app
    npm run lint:admin
    nx affected build
    nx affected test
    nx affected lint
    npm run build:coffee-app
    npm run build:coffee-app
    npm run build:coffee-app
    DISTRIBUTED CACHING
    CI

    View Slide

  40. ☁
    "
    npm run build:pizzaroni
    # $ %
    npm run lint:admin
    npm run lint:admin
    npm run build:pizzaroni
    npm run build:pizzaroni
    npm run lint:admin
    nx affected build
    nx affected test
    nx affected lint
    &
    &
    &
    &
    &
    DISTRIBUTED CACHING
    CI

    View Slide

  41. nx affected build
    nx affected test
    nx affected lint
    nx affected e2e
    CI

    View Slide

  42. git pull origin/main
    npm run build:coffee-app
    "
    nx affected build
    nx affected test
    nx affected lint
    nx affected e2e
    Instant
    Replay
    CI

    View Slide

  43. " $
    ⌨
    ( )

    View Slide

  44. " $
    ⌨
    Instant
    Replay
    ✅ ✅

    View Slide

  45. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e

    View Slide

  46. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e
    lint
    lint
    lint lint

    View Slide

  47. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e
    lint
    lint
    lint lint
    ✅ ✅
    ✅
    ❌

    View Slide

  48. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e

    View Slide

  49. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e
    lint
    lint
    lint lint
    ✅ ✅
    ✅

    View Slide

  50. Coffee app
    coffee-origin-screen grind-size-screen
    ui-coffee-components
    util-http
    Coffee e2e
    lint
    lint
    lint lint
    ✅ ✅
    ✅
    ✅

    View Slide

  51. 90 + 11 = ?

    View Slide

  52. 90 + 11 = 101

    View Slide

  53. 167 + 51 = ?

    View Slide

  54. 167 + 51 = 218

    View Slide

  55. 258 + 99 = ?

    View Slide

  56. View Slide

  57. Coffee app
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment
    util-http
    test
    lint
    test test
    test
    test
    test
    test
    lint lint
    lint lint
    lint
    lint
    build
    build build build
    build
    build
    build
    Coffee e2e
    e2e test

    View Slide

  58. Coffee app
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment
    util-http
    test
    lint
    test test
    test
    test
    test
    test
    lint lint
    lint lint
    lint
    lint
    build
    build build build
    build
    build
    build
    Coffee e2e
    e2e test

    View Slide

  59. Coffee app
    coffee-origin-screen grind-size-screen
    payments-service
    ui-coffee-components
    payment
    util-http
    Coffee e2e
    t

    View Slide

  60. Coffee a
    coffee-origin-screen
    ui-coffee-components
    uti
    test
    lint
    test
    test
    lint
    lin
    build
    b
    build
    idle agent time
    build
    lint

    View Slide

  61. Coffee a
    coffee-origin-screen
    ui-coffee-components
    uti
    test
    lint
    test
    test
    lint
    lin
    build
    b
    build
    build
    lint

    View Slide

  62. build
    lint
    coffee-app e2e
    coffee-app build
    lib 2
    lib 1
    coffe
    test
    lint
    build
    & &

    View Slide

  63. ☁
    e2e
    e2e
    e2e
    Distributed
    execution
    AGENT 1
    AGENT 2
    AGENT 3

    View Slide

  64. AGENT 1
    AGENT 2
    AGENT 3
    e2e
    e2e
    lint
    test
    Instant
    Replay
    e2e
    build

    View Slide

  65. ☁
    AGENT 1
    AGENT 2
    AGENT 3
    e2e
    e2e
    e2e
    Distributed
    execution

    View Slide

  66. AGENT 1
    AGENT 2
    AGENT 3
    e2e
    e2e
    e2e
    AGENT 4
    AGENT 5
    ☁
    Distributed
    execution

    View Slide

  67. AGENT 1
    AGENT 2 e2e
    e2e
    e2e
    ☁
    Distributed
    execution

    View Slide

  68. Come on, how slow can it be?

    View Slide

  69. View Slide

  70. USING MONOREPOS IS GOOD FOR
    THE ENVIRONMENT

    View Slide

  71. RECAP

    View Slide

  72. SPLIT APPS

    View Slide

  73. USE AFFECTED

    View Slide

  74. SHARE CACHE

    View Slide

  75. DISTRIBUTE WORK

    View Slide

  76. THANK
    YOU!
    Rares Matei
    @__rares
    Miroslav Jonas
    @meeroslav
    AgentConf ‘23 nx.dev

    View Slide