Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebView as 
Fancy and effective 

WebView as 
Fancy and effective 

Ryo Sakaguchi

March 27, 2019

More Decks by Ryo Sakaguchi

Other Decks in Programming


  1. ©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
  2. ©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
  3. ©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
  4. ©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
  5. ©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?
  6. ©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…!
  7. ©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
  8. ©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
  9. ©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.