Migrate to React from Knockout

[lipis]

Best practices:

• Knockout to React Migration

• Ideas for migration a viewmodel (https://github.com/wireapp/wire-webapp/pull/14078)

Refactoring goals:

1. /script/components
2. /script/view_model
3. /page/template

• [x] /page/template/content
  • [x] #11351
  • [x] collection.htm
  • [x] connect-requests.htm
  • [x] conversation.htm
• [x] /page/template/content/conversation
  • [x] input-bar.htm
  • [x] message-list.htm
  • [x] title-bar.htm
• [x] /page/template/content
  • [x] history-export.htm
  • [x] history-import.htm
  • [x] preferences-about.htm
  • [x] preferences-account.htm
  • [x] preferences-av.htm
  • [x] preferences-device-details.htm
  • [x] preferences-devices.htm
  • [x] preferences-options.htm
• [x] /page/template
  • [x] detail-view.htm
• [x] /page/template/list
  • [x] archive.htm
  • [x] background.htm
  • [x] conversations.htm
  • [x] preferences.htm
  • [x] start-ui.htm
  • [x] takeover.htm (retired here https://github.com/wireapp/wire-webapp/pull/12710)
  • [x] temporary-guest.htm
• [x] /page/template/modal
  • [x] applock.htm
  • [x] giphy.htm
  • [x] group-creation.htm
  • [x] invite-modal.htm
  • [x] legal-hold.htm
  • [x] service-modal.htm
  • [x] user-modal.htm
• [x] /page/template
  • [x] modals.htm
• [x] /page/template/panel
  • [x] add-participants.htm
  • [x] conversation-details.htm
  • [x] conversation-participants.htm
  • [x] group-participant-service.htm
  • [x] group-participant-user.htm
  • [x] guest-options.htm
  • [x] message-details.htm
  • [x] notifications.htm
  • [x] participant-devices.htm
  • [x] timed-messages.htm
• [x] /page/template
  • [x] warning.htm
  • [x] wire-main.htm
• [x] /script/components/asset
  • [x] #11580
  • [x] AssetHeader.tsx
  • [x] AssetLoader.tsx
  • [x] #11560
  • [x] FileAssetComponent.tsx
  • [x] #11543
  • [x] LinkPreviewAssetComponent.tsx
  • [x] LocationAsset.tsx
  • [x] MessageButton.tsx
  • [x] #11559
• [x] /script/components/asset/controls
  • [x] AudioSeekBar.tsx
  • [x] MediaButton.tsx
  • [x] SeekBar.tsx
• [x] /script/components/calling
  • [x] FullscreenVideoCall.tsx
  • [x] GroupVideoGrid.tsx
  • [x] ParticipantMicOnIcon.tsx
  • [x] ChooseScreen.tsx
• [x] /script/components
  • [x] CopyToClipboard.tsx
  • [x] DeviceCard.tsx
  • [x] DeviceRemove.tsx
  • [x] EphemeralTimer.tsx
  • [x] #11584
  • [x] GroupList.tsx
  • [x] GuestModeToggle.tsx
  • [x] image.ts
  • [x] InfoToggle.tsx
  • [x] InputLevel.tsx
  • [x] LegalHoldDot.tsx
• [x] /script/components/list
  • [x] #11347
  • [x] #11348
  • [x] GroupedConversationHeader.tsx
  • [x] #11583
  • [x] ParticipantItem.tsx
• [x] /script/components
  • [x] LoadingBar.tsx
  • [x] mentionSuggestions.ts
  • [x] message.ts (@Yserz)
    • [x] verfied
    • [x] call
    • [x] missed
    • [x] filetyperestricted
    • [x] deleted
    • [x] decrypt error
    • [x] legalhold
    • [x] ping
    • [x] #11628
    • [x] #11661
    • [x] normal message
  • [x] messageQuote.ts
  • [x] MessageTimerButton.tsx
  • [x] modal.ts
• [x] /script/components/panel
  • [x] enrichedFields.ts
  • [x] PanelActions.tsx
  • [x] serviceDetails.ts
  • [x] userActions.ts
  • [x] userDetails.ts
• [x] /script/page
  • [x] TopPeople.tsx
• [x] /script/components
  • [x] ReceiptModeToggle.tsx
  • [x] ServiceList.tsx
  • [x] #11370
  • [x] userInput.ts
  • [x] #11350
• [ ] /script/view_model
  • [ ] CallingViewModel.ts
  • [ ] ContentViewModel.ts
  • [x] FaviconViewModel.ts
  • [x] ImageDetailViewViewModel.ts
  • [ ] ListViewModel.ts
  • [x] LoadingViewModel.ts
  • [ ] MainViewModel.ts
  • [x] ModalsViewModel.ts
  • [x] PanelViewModel.ts
  • [x] WarningsViewModel.ts
  • [x] WindowTitleViewModel.ts
• [ ] /script/view_model/bindings
  • [ ] CommonBindings.ts
  • [x] ConversationListBindings.ts
  • [x] ListBackgroundBindings.ts
  • [x] MessageListBindings.ts
  • [x] VideoCallingBindings.ts
• [x] /script/view_model/content
  • [x] AppLockViewModel.ts
  • [x] CollectionDetailsViewModel.ts
  • [x] CollectionViewModel.ts
  • [x] ConnectRequestsViewModel.ts
  • [x] EmojiInputViewModel.ts
  • [x] GiphyViewModel.ts
  • [x] GroupCreationViewModel.ts
  • [x] HistoryExportViewModel.ts
  • [x] HistoryImportViewModel.ts
  • [x] InputBarViewModel.ts
  • [x] InviteModalViewModel.ts
  • [x] LegalHoldModalViewModel.ts
  • [x] MessageListViewModel.ts
  • [x] PreferencesAVViewModel.ts
  • [x] PreferencesAboutViewModel.ts
  • [x] PreferencesAccountViewModel.ts
  • [x] PreferencesDeviceDetailsViewModel.ts
  • [x] PreferencesDevicesViewModel.ts
  • [x] PreferencesOptionsViewModel.ts
  • [x] ServiceModalViewModel.ts
  • [x] TitleBarViewModel.ts
  • [x] UserModalViewModel.ts
• [x] /script/view_model/list
  • [x] ArchiveViewModel.ts
  • [x] #11669
  • [x] PreferencesListViewModel.ts
  • [x] StartUIViewModel.ts
  • [x] TakeoverViewModel.ts (retired here https://github.com/wireapp/wire-webapp/pull/12710)
  • [x] TemporaryGuestViewModel.ts
• [x] /script/view_model/panel
  • [x] AddParticipantsViewModel.ts
  • [x] BasePanelViewModel.ts
  • [x] ConversationDetailsViewModel.ts
  • [x] ConversationParticipantsViewModel.ts
  • [x] GroupParticipantServiceViewModel.ts
  • [x] GroupParticipantUserViewModel.ts
  • [x] GuestsAndServicesViewModel.ts
  • [x] MessageDetailsViewModel.ts
  • [x] NotificationsViewModel.ts
  • [x] #11349
  • [x] TimedMessagesViewModel.ts

[rempas]

Can I ask about the reason you're migrating to React? Are there any advantages?

[kamikazebr]

https://versus.com/br/knockout-js-vs-react @Godnyx

There some advantages.

[bennycode]

@Godnyx in our app we need to update a lot of lists (conversation list, messages list, list of participants, etc.). That's where Knockout's observables don't perform well and where we see a performance boost in using React's Virtual DOM and diffing algorithm.

[infusion]

Why not setting on Svelte then if performance is an issue?