WebView as Fancy and effective View

potatotips #60

- confetti.mp4
https://drive.google.com/file/d/1NeMERkFhgQoNXwi9382zKmsrYDDgYYrD/view?usp=sharing

- chart.mp4
https://drive.google.com/file/d/1K1WwhUz3izrKoSnpthKLubZnwV2AgvkR/view?usp=sharing

Transcript

1. ©2019 Wantedly, Inc.
   8FC7JFXBT

   'BODZBOEFGGFDUJWF

   7JFX
   QPUBUPUJQT
   !XBLXBL 3ZP4BLBHVDIJ
   
   2019.3.27 -
   

   View Slide

2. ©2019 Wantedly, Inc.
   Ryo Sakaguchi
   • Wantedly, Inc - Wantedly People
   • Android/CI/CD/UI
   • Kotlin/Sake/Beer/MtG/Guitar…
   • Twitter/GitHub: @wakwak3125
   • SW-7284-4903-0124
   

   View Slide

3. ©2019 Wantedly, Inc.
   1. What’s fancy?
   • Case1: Confettiʢࢴਧઇʣ
   • Case2: Chart
   2. Why is it effective?
   • Fewer worries about platform difference
   • What is the DarkSide?
   3. How achieve them?
   • Confetti: TransparentWebView
   • Chart: Try to imitate the “Native”
   Today’s topics What I talk today
   

   View Slide

4. ©2019 Wantedly, Inc.
   What’s fancy?
   

   View Slide

5. ©2019 Wantedly, Inc.
   Case1 What’s fancy and effective?
   Confettiʢࢴਧઇʣ
   This effect appears when someone 

   who connected with you in Wantedly People 

   changed the Job.
   • Show confetti effect on the screen.
   • WebGL
   • TransparentWebView
   • See real confetti and developed
   together with designer.
   • Bundle the minified .js file
   

   View Slide

6. ©2019 Wantedly, Inc.
   Case2 What’s fancy and effective?
   Chart
   To see the history of your connection
   • Show chart on the screen
   • React/Recharts
   • React component lib 

   that wrap D3
   • Static hosted on S3
   

   View Slide

7. ©2019 Wantedly, Inc.
   Why is it effective?
   

   View Slide

8. ©2019 Wantedly, Inc.
   1. Less Platform difference
   • In most case, you don’t need to care

   about platform difference
   2. Same Experience
   • You can provide the same experience to

   all users!
   3. Faster development
   • The same code runs on both iOS/Android
   Why is it effective?
   

   View Slide

9. ©2018 Wantedly, Inc.
   DarkSide Why is it effective?
   It’s based on Web
   You should have some friends who can do frontend well
   • You may face the problem about

   browser’s behavior differences.
   • You need some modern web
   frontend knowledge.
   • webpack
   • babel
   • npm/yarn
   • and so on…!
   

   View Slide

10. ©2019 Wantedly, Inc.
    May the Force be with you
    

    View Slide

11. ©2019 Wantedly, Inc.
    How achieve them?
    

    View Slide

12. ©2019 Wantedly, Inc.
    Confetti How achieve them?
    TransparentWebView
    WebView that support overlay the view
    • Override onTouchEvent and return
    false.
    • Set background color to
    transparent at init block
    

    View Slide

13. ©2019 Wantedly, Inc.
    Chart How achieve them?
    Imitate the Native
    Make ambiguous the border-line between Native and Web.
    • I have some ideas.
    • Set the same background color
    • Faster, Faster, Faster!!
    • Use some native component
    • Kind of Toolbar
    

    View Slide

14. ©2019 Wantedly, Inc.
    Wrap-Up WebView as Fancy and effective View
    WebView helps you to 

    make something good thing!
    • You can overlay the WebView
    • You have the options to use
    WebView.
    • But it has some DarkSide.
    

    View Slide

15. ©2019 Wantedly, Inc.
    Thanks
    

    View Slide