$30 off During Our Annual Pro Sale. View Details »

From Native to Web – Renewing Sticker Shop

From Native to Web – Renewing Sticker Shop


November 11, 2021

More Decks by LINE DEVDAY 2021

Other Decks in Technology


  1. None
  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

  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