Migrate to React from Knockout

[lipis]

Best practices:

• Knockout to React Migration

• Ideas for migration a viewmodel (refactor: Migrate ListViewModel to React #14078)

Refactoring goals:

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

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