BLoC

 BLoC

flutter meetup #2の資料です

3c4e24fd827c789cb67a9f759f057b06?s=128

Shinnosuke Kugimiya

May 31, 2018
Tweet

Transcript

  1. © DMM.com !LHNZTIJO 'MVUUFS.FFUVQ5PLZP #-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 ͜͏͍ͨ͠ 91MBUGPSN"EBQUFS

  12. © DMM.com  #-P$ͷΨΠυϥΠϯ

  13. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVUTBOEPVUQVUTBSFTJNQMF4USFBNT4JOLTPOMZ  %FQFOEFODJFTNVTUCFJOKFDUBCMFBOEQMBUGPSN BHOPTUJD 

    /PQMBUGPSNCSBODIJOHBMMPXFE  *NQMFNFOUBUJPODBOCFXIBUFWFSZPVXBOUJGZPV GPMMPXUIFQSFWJPVTSVMFT " #VUNBZ*TVHHFTUSFBDUJWFQSPHSBNNJOH
  14. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVU͸4JOLɺPVUQVU͸4USFBNͰ࣮૷͢Δ  ґଘΦϒδΣΫτ͸֎͔Β஫ೖՄೳͰɺϓϥοτ ϑΥʔϜʹґଘ͠ͳ͍΋ͷͰ͋Δ͜ͱ 

    ϓϥοτϑΥʔϜͷ෼ذ͸μϝ  dΛकͬͯΕ͹ɺ࣮૷͸ͳΜͰ΋͍͍Α  ͨͩ͠ɺ3FBDUJWF1SPHSBNNJOHͰ૊Ήͷ͕͓͢͢ΊͩΑ
  15. © DMM.com  #-P$ͱ6*ͷܨ͗

  16. © DMM.com #-P$ͱ6*ͷܨ͗   &BDIDPNQMFYFOPVHIDPNQPOFOUIBTB DPSSFTQPOEJOH#-P$  $PNQPOFOUTTIPVMETFOEJOQVUTBTJTz 

    $PNQPOFOUTTIPVMETIPXPVUQVUTBTDMPTFBT QPTTJCMFUPBTJTz  "MMCSBODIJOHTIPVMECFCBTFEPOTJNQMF#-P$ CPPMFBOPVUQVUT
  17. © DMM.com #-P$ͷΨΠυϥΠϯ   ͦΕͧΕͷzे෼ʹෳࡶͳzίϯϙʔωϯτʹ͸#-P$ ͕Ұͭ͋Δʢzे෼ʹෳࡶͳzͷ౓߹͍͸֤ࣗͰ൑அʣ  JOQVUʹૹΔσʔλ͸BTJTͰ 

    PVUQVUʹྲྀ͢ετϦʔϜ΋Ͱ͖Δ͚ͩlBTJTzͰ  ͢΂ͯͷ෼ذ͸#-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Λ࢖͏ ·ͱΊ