BLoC

flutter meetup #2の資料です

Transcript

1. © DMM.com !LHNZTIJO 'MVUUFS
   .FFUVQ
   5PLZP
    #-P$
2. © DMM.com w LHNZTIJO
   
   ఝٶ ͗͘Έ΍
   w "OESPJEΤϯδχΞ
   w %..DPNϥϘ
   $50ࣨॴଐ
   w ೥݄͔Β ࣗݾ঺հ 
3. © DMM.com  BHFOEB
4. © DMM.com w #-P$ͱ͸
   w #-P$ͷΨΠυϥΠϯ
   w #-P$ͱ6*
   w #-P$ͷྫ
   w 'MVUUFSͰͷ࢖͍ํ
   w ·ͱΊ BHFOEB 
5. © DMM.com  #-P$ͱ͸
6. © DMM.com #-P$ͱ͸  Business Logic Component
7. © DMM.com #-P$ͱ͸  ࣗ෼͕஌ͬͨͷ͸
   (PPHMF
   *0
   ͰͷԼهͷηογϣϯ Build reactive mobile apps with Flutter IUUQTXXXZPVUVCFDPNXBUDI W34H#&Q0*
8. © DMM.com #-P$ͱ͸  ࣮ࡍ͸೥݄ʹ%BSU
   $POG
   ͷ
   ԼهͷηογϣϯͰൃද͞Ε͍ͯΔ Flutter / AngularDart – Code sharing, better together IUUQTXXXZPVUVCFDPNXBUDI W1-)MOX)H1&
9. © DMM.com #-P$ͱ͸  ϏδωεϩδοΫΛ UI΍ϓϥοτϑΥʔϜ͔Β ෼཭͢ΔͨΊͷ ઃܭύλʔϯͷҰͭ ҰݴͰݴ͏ͱ Ͱ͋Δ
10. © DMM.com #-P$ͷϞνϕʔγϣϯ  6* .PEFM *OGSB ͜͏͍͏ঢ়ଶΛ .PEFM .PEFM .PEFM
11. © DMM.com #-P$ͷϞνϕʔγϣϯ  6* .PEFM *OGSB ͜͏͍ͨ͠
     9
    1MBUGPSN
    "EBQUFS
12. © DMM.com  #-P$ͷΨΠυϥΠϯ
13. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVUT
    BOE
    PVUQVUT
    BSF
    TJNQMF
    4USFBNT4JOLT
    POMZ
     %FQFOEFODJFT
    NVTU
    CF
    JOKFDUBCMF
    BOE
    QMBUGPSN
    BHOPTUJD
     /P
    QMBUGPSN
    CSBODIJOH
    BMMPXFE
     *NQMFNFOUBUJPO
    DBO
    CF
    XIBUFWFS
    ZPV
    XBOU
    JG
    ZPV
    GPMMPX
    UIF
    QSFWJPVT
    SVMFT
    " #VU
    NBZ
    *
    TVHHFTU
    SFBDUJWF
    QSPHSBNNJOH
14. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVU
    ͸
    4JOLɺ
    PVUQVU͸
    4USFBNͰ࣮૷͢Δ
     ґଘΦϒδΣΫτ͸֎͔Β஫ೖՄೳͰɺϓϥοτ ϑΥʔϜʹґଘ͠ͳ͍΋ͷͰ͋Δ͜ͱ
     ϓϥοτϑΥʔϜͷ෼ذ͸μϝ
     dΛकͬͯΕ͹ɺ࣮૷͸ͳΜͰ΋͍͍Α
     ͨͩ͠ɺ3FBDUJWF
    1SPHSBNNJOHͰ૊Ήͷ͕͓͢͢ΊͩΑ
15. © DMM.com  #-P$ͱ6*ͷܨ͗
16. © DMM.com #-P$ͱ6*ͷܨ͗   &BDI
    DPNQMFY
    FOPVHI
    DPNQPOFOU
    IBT
    B
    DPSSFTQPOEJOH
    #-P$
     $PNQPOFOUT
    TIPVME
    TFOE
    JOQVUT
    BT
    JTz
     $PNQPOFOUT
    TIPVME
    TIPX
    PVUQVUT
    BT
    DMPTF
    BT
    QPTTJCMF
    UP
    BT
    JTz
     "MM
    CSBODIJOH
    TIPVME
    CF
    CBTFE
    PO
    TJNQMF
    #-P$
    CPPMFBO
    PVUQVUT
17. © DMM.com #-P$ͷΨΠυϥΠϯ   ͦΕͧΕͷzे෼ʹෳࡶͳz
    ίϯϙʔωϯτʹ͸#-P$ ͕Ұͭ͋Δʢzे෼ʹෳࡶͳzͷ౓߹͍͸֤ࣗͰ൑அʣ
     JOQVUʹૹΔσʔλ͸
    BT
    JTͰ
     PVUQVUʹྲྀ͢ετϦʔϜ΋Ͱ͖Δ͚ͩ
    lBT
    JTzͰ
     ͢΂ͯͷ෼ذ͸#-P$ʹΑΔ#PPMFBOͳΞ΢τϓοτ ʹجͮ͘΂͖Ͱ͋Δ
18. © DMM.com  #-P$ͷྫ
19. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int> itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; }
20. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int> itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; } 1SPEVDU͕௥Ճ͞ΕΔͱ
21. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int> itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; } ͦΕͧΕͷ4USFBN͔Β݁Ռ͕ྲྀΕΔ
22. © DMM.com  'MVUUFSͰͷ࢖͍ํ
23. © DMM.com JOQVU΁ͷܨ͛ํ  TextField( onChanged: bloc.sink.add, decoration: InputDecoration( border: OutlineInputBorder(), ɹɹɹ hintText: “hint"), )
24. © DMM.com JOQVU΁ͷܨ͛ํ  TextField( onChanged: bloc.sink.add, decoration: InputDecoration( border: OutlineInputBorder(), ɹɹɹ hintText: “hint"), ) ΠϕϯτͱTJOLBEEΛόΠϯυ͢Δ͚ͩ
25. © DMM.com PVUQVUΛ6*ʹͭͳ͛Δํ๏  StreamBuilder<String>( stream: bloc.stream, builder: (context, snapshot) => Container( child: Text(snapshot?.data ?? ""), ), )
26. © DMM.com PVUQVUΛ6*ʹͭͳ͛Δํ๏  StreamBuilder<String>( stream: bloc.stream, builder: (context, snapshot) => Container( child: Text(snapshot?.data ?? ""), ), ) 4USFBN#VJMEFS࢖͏͚ͩ
27. © DMM.com  ·ͱΊ
28. © DMM.com  w #-P$͸6*ͱ.PEFMͱ*OGSBΛ෼͚Δ͜ͱͱɺΫϩε ϓϥοτϑΥʔϜͷίʔυγΣΞΛϞνϕʔγϣϯ ʹੜ·Εͨ
    w कΔ΂͖ΨΠυϥΠϯ͕͋Δ
    w 'MVUUFSͰ͸
    w JOQVUΛૹΔͱ͜ΖͰ͸
    TJOLBEE
    ΛόΠϯυ͢Δ
    w PVUQVUΛTVCTDSJCF͢Δʹ͸4USFBN#VJMEFSΛ࢖͏ ·ͱΊ