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. 8FC7JFX
   BT
 'BODZ
   BOE
   FGGFDUJWF
   
 7JFX QPUBUPUJQT
    !XBLXBL
   3ZP
   4BLBHVDIJ 2019.3.27 -
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
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
4. ©2019 Wantedly, Inc. What’s fancy?
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
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
7. ©2019 Wantedly, Inc. Why is it effective?
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?
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…!
10. ©2019 Wantedly, Inc. May the Force be with you
11. ©2019 Wantedly, Inc. How achieve them?
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
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
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.
15. ©2019 Wantedly, Inc. Thanks