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

Inversion of Control in a Vue Application

Rahul Kadyan
March 20, 2020
Technology
0
280

Inversion of Control in a Vue Application

Using dependency injection for building loosely coupled applications. The talk focuses on the inversion of control techniques specifically dependency injection, and how it can be implemented in an application.

Rahul Kadyan

March 20, 2020
Tweet

More Decks by Rahul Kadyan

See All by Rahul Kadyan
New Vue. New Compiler. Let's Unpack
znck
4
2.4k
Head first into composition API
znck
0
100
Future of Vue – JSFoo VueDay 2019
znck
0
390
React to Vue: why and how?
znck
0
30
Collocation in Modern Web
znck
0
23
Choosing Vue.js
znck
0
20

Other Decks in Technology

See All in Technology
AWS Security Hubを有効化したけど見てない人に向けたDevSecOpsの実現方法 / #kayac_andpad_event
muziyoshiz
0
210
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
1
220
DMMオンラインサロン エンジニア採用資料/ for-software-engineers
onlinesalon
0
3.6k
継続的なコツコツ技術広報とブランディング磨き込みの過程と課題/engineering-brand
nishiuma
0
110
CSSパフォーマンスに関する計測結果
poteboy
3
1.4k
DMMプラットフォームにおける GKE を利用した プラットフォームエンジニアリングへの 取り組み
pospome
1
190
エンタープライズSaaSへの挑戦〜顧客の事業を成長させるプロダクトマネジメントとは？〜 / pmconf2023
route06
2
1k
GPT APIを使ったテキスト生成コンペ@YANS2023に参加した話
naohachi89
2
880
pmconf 2023 プロダクトと事業を無限にスケールするための最強のロードマップの作り方 / The Greatest Roadmap for Unlimited Scaling your Business and Products
yamamuteki
16
9.6k
SOLID Is Dead, Long Live SOLID
lemiorhan
4
220
re:Invent2023で登場した運用開発用の可視化ツールたちを実際に見てみよう
yoshimi0227
0
330
ライブラリとの上手な付き合い方
sekido
PRO
0
170

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
53
33k
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
Atom: Resistance is Futile
akmur
257
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.3k
Practical Orchestrator
shlominoach
179
9.4k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
What's new in Ruby 2.0
geeforr
335
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
271
12k
Building Effective Engineering Teams - LeadDev
addyosmani
22
1.2k
Bash Introduction
62gerente
603
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
44
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M

Transcript

  1. Inversion of Control
    in a Vue Application

    View Slide

  2. Rahul
    Kadyan
    Core Team Member
    Ex-organiser, VueBLR
    @znck0

    View Slide

  3. 1. What is it?
    2. Why do we need it?

    3. How do we use it?
    Inversion of Control

    View Slide

  4. Growing Complexity

    View Slide

  5. Shared State

    View Slide

  6. What is Inversion of Control?

    View Slide

  7. Program Control Flow

    View Slide

  8. Dependencies

    View Slide

  9. Chicken
    Tikka Masala

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Chicken
    Tikka Masala

    View Slide

  15. View Slide

  16. Chicken
    Tikka Masala
    Inversion
    of Control

    View Slide

  17. View Slide

  18. View Slide

  19. Chicken
    Tikka Masala
    Inversion
    of Control

    View Slide

  20. Why do need we need
    Inversion of Control?

    View Slide

  21. Simple

    View Slide

  22. Simple is to Reason

    View Slide

  23. SOLID

    View Slide

  24. Single responsibility principle
    Open closed principle
    Liskov substitution principle
    Interface segregation principle
    Dependency inversion principle

    View Slide

  25. How do we use
    Inversion of Control?

    View Slide

  26. We
    are
    already
    using
    it.

    View Slide

  27. Props
    define
    dependencies.

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Props Vuex Provide/Inject
    Local Global Contextual

    View Slide

  37. UI Logic Business Logic

    View Slide

  38. Composition Functions

    View Slide

  39. General Purpose
    Dependency Injection
    Container

    View Slide

  40. View Slide

  41. Inversify.js

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. UI Business
    Props Vuex Provide/Inject Inversify.js

    View Slide

  56. @znck0

    View Slide