From Native to Web – Renewing Sticker Shop

John Edvard Reiten
LINE Fukuoka / UIT Team B / Front-End Engineer

https://linedevday.linecorp.com/2021/ja/sessions/145
https://linedevday.linecorp.com/2021/en/sessions/145
https://linedevday.linecorp.com/2021/ko/sessions/145

Transcript

2. Self Introduction Who am I? - John Edvard Reiten - 32 years old viking from Norway - From a city with 3000 people - Joined LINE Fukuoka as a front- end developer in 2020 - Likes learning Japanese
3. Agenda - What is Sticker Shop, how has it changed - Motivation, why did we migrate - What options do we have available when replacing native with web - Challenges with web compared to native - Closing statement
4. Sticker Shop What is Sticker Shop?
5. Native Sticker set of my son
6. Web Sticker set of my son
7. Comparing native and web Sticker set of my son Native Web
8. Motivation Why did we migrate from native to web?
9. Migration improvements Speed Maintenance +
10. Maintenance One code base instead of two Unify design Same behavior on Android and iOS
11. Speed Quicker release cycles Less development time and testing time Release for everyone
12. Still opens inside LINE Using a webView Native Web
13. Frameworks What options do we have available when replacing native with web?
14. Frameworks So many options
15. React
16. Challenges Challenges with web compared to native
17. - Browser navigation challenges - Custom history stack is more difficult Android back button
18. Possible workaround
19. Challenges with software keyboard - Scroll behavior is different on iOS when keyboard is open - Cannot open keyboard before user interaction Software keyboard
20. - Sticky titlebar - Input in the middle - Fixed footer - Footer and titlebar act like static elements when the keyboard is open Software keyboard
21. Video Sticky elements Out of flow
22. Share feature Native share feature - Limited share functionality
23. Web share API Screenshot taken from MDN - Can share content the same way as Native - Limited browser support
24. Copy link
25. Challenges with web Swipe to go back - No built in support to swipe back - Need to create it ourselves on web
26. - Animation between pages - Both pages are displayed during the page transition Slide animation
27. Slide animation Screenshot + Video Settings General
28. Challenges with web Read silent (manner) mode - Web pages don’t know if your device is muted
29. Overcome these challenges Options - Research frameworks, tools, and libraries - Try to fix these problems in the beginning of development
30. General migration challenges Integration with other apps - Other applications may be affected Many entry points to Sticker Shop - It’s difficult to know where all the users come from - It’s easy to miss existing functionality
31. Keep backward compatibility - Only add new URLs, or add extra query parameters - Make sure redirect rules are in place if you absolutely need to change a URL Need to adjust URLs? Need to adjust APIs? - Only add new attributes - Don’t remove or change names, it can break existing applications
32. Release strategy How much to release - Gradual release or full release?
33. Gradual release Benefits - Can monitor server load by releasing to only a few users - Time to fix errors and bugs not discovered during development - Can compare the “effectiveness” between the old and new version
34. Making strategic choices
35. Making strategic choices - Who are your users? - Know your users to better understand what to create Know your users Know your market - What are you creating? - It’s not necessary to support what you don’t need
36. Thank you