From Native to Web – Renewing Sticker Shop

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Sticker Shop What is Sticker Shop?

Slide 5

Slide 5 text

Native Sticker set of my son

Slide 6

Slide 6 text

Web Sticker set of my son

Slide 7

Slide 7 text

Comparing native and web Sticker set of my son Native Web

Slide 8

Slide 8 text

Motivation Why did we migrate from native to web?

Slide 9

Slide 9 text

Migration improvements Speed Maintenance +

Slide 10

Slide 10 text

Maintenance One code base instead of two Unify design Same behavior on Android and iOS

Slide 11

Slide 11 text

Speed Quicker release cycles Less development time and testing time Release for everyone

Slide 12

Slide 12 text

Still opens inside LINE Using a webView Native Web

Slide 13

Slide 13 text

Frameworks What options do we have available when replacing native with web?

Slide 14

Slide 14 text

Frameworks So many options

Slide 15

Slide 15 text

React

Slide 16

Slide 16 text

Challenges Challenges with web compared to native

Slide 17

Slide 17 text

- Browser navigation challenges - Custom history stack is more difficult Android back button

Slide 18

Slide 18 text

Possible workaround

Slide 19

Slide 19 text

Challenges with software keyboard - Scroll behavior is different on iOS when keyboard is open - Cannot open keyboard before user interaction Software keyboard

Slide 20

Slide 20 text

- Sticky titlebar - Input in the middle - Fixed footer - Footer and titlebar act like static elements when the keyboard is open Software keyboard

Slide 21

Slide 21 text

Video Sticky elements Out of flow

Slide 22

Slide 22 text

Share feature Native share feature - Limited share functionality

Slide 23

Slide 23 text

Web share API Screenshot taken from MDN - Can share content the same way as Native - Limited browser support

Slide 24

Slide 24 text

Copy link

Slide 25

Slide 25 text

Challenges with web Swipe to go back - No built in support to swipe back - Need to create it ourselves on web

Slide 26

Slide 26 text

- Animation between pages - Both pages are displayed during the page transition Slide animation

Slide 27

Slide 27 text

Slide animation Screenshot + Video Settings General

Slide 28

Slide 28 text

Challenges with web Read silent (manner) mode - Web pages don’t know if your device is muted

Slide 29

Slide 29 text

Overcome these challenges Options - Research frameworks, tools, and libraries - Try to fix these problems in the beginning of development

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Release strategy How much to release - Gradual release or full release?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Making strategic choices

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Thank you