©2019 Wantedly, Inc. 8FC7JFXBT
 'BODZBOEFGGFDUJWF
 7JFX QPUBUPUJQT !XBLXBL 3ZP4BLBHVDIJ 2019.3.27 -

©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

©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

©2019 Wantedly, Inc. What’s fancy?

©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

©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

©2019 Wantedly, Inc. Why is it effective?

©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?

©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…!

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

©2019 Wantedly, Inc. How achieve them?

©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

©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

©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.

©2019 Wantedly, Inc. Thanks