Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enabling team development of a secret React Nat...

Enabling team development of a secret React Native app that has been in operation for four years.

Avatar for Shinnosuke Yamamoto

Shinnosuke Yamamoto

October 02, 2021
Tweet

More Decks by Shinnosuke Yamamoto

Other Decks in Programming

Transcript

  1. ࡉ෼Խ͞Εͯͳ͍ 
 Component 😇 σΟϨΫτϦ௚ʹ͍ͬͺ͍ ࠶ར༻͋·Γ͞Εͯͳ͍ ap p !"" component

    s # !"" AnimatedProgressCircle.j s # !"" AnnounceItemView.j s # !"" BarChart.j s # !"" CaloriePieChartPanelView.j s # !"" CarouselView.j s # !"" Chart.j s # !"" ChartTabBar.j s # !"" ChartView.j s # !"" DailyRecordBloodGlucoseView.j s # !"" DailyRecordBloodPressureView.j s # !"" DailyRecordBodyFatPercentageView.j s # !"" DailyRecordBodyTemperatureView.j s # !"" DailyRecordHeartRateView.j s # !"" DailyRecordHistoryView.j s # !"" DailyRecordListItemView.j s # !"" DailyRecordMealView.j s # !"" DailyRecordSleepView.j s # !"" DailyRecordWaistView.j s # !"" DailyRecordWeightView.j s # !"" DateInputTable.j s # !"" DateSpecificationBar.j s # !"" GoalWeightBar.j s # !"" HealthNewsItemView.j s # !"" InputButtonView.j s # !"" InputFooter.j s # !"" InputTable.j s # !"" KeyboardSpace.j s # !"" LineChart.j s # !"" LoginFormTable.j s # !"" MainTabBar.j s # !"" MealGridImageView.j s # !"" MealInputImageView.j s # !"" MealSectionHeader.j s # !"" MyDataTabBar.j s # !"" PepUpDatePicker.android.j s # !"" PepUpDatePicker.ios.j s # !"" PepUpDatePickerProps.j s # !"" PepUpSituationPicker.android.j s # !"" PepUpSituationPicker.ios.j s # !"" PickerInputTable.j s # !"" PieChartPanel.j s # !"" ProgressCircle.j s # !"" SleepBarChart.j s # !"" SortableListItem.j s # !"" StepPieChartPanelView.j s # !"" SummaryPanel.j s # !"" SummaryView.j s # !"" TextInputForTcomb.j s # %"" ValidateFormComponent.j s !"" container s # !"" DailyRecordChartSelectionScreen.j s # !"" DailyRecordDetailScreen.j s # !"" DailyRecordIconsView.j s # !"" DailyRecordInputScreen.j s # !"" DailyRecordMealDetailScreen.j s # !"" DailyRecordMealScreen.j s # !"" DailyRecordPreferenceScreen.j s # !"" GoalPreferenceScreen.j s # !"" HomeScreen.j s # !"" IndicatorView.j s # !"" InputStackNavigatorScreen.j s # !"" LicenseScreen.j s # !"" LoginIDConfigScreen.j s # !"" LoginScreen.j s # !"" MainTabNavigatorScreen.j s # !"" MealCamera.j s # !"" MealCameraRoll.j s # !"" MealEditScreen.j s # !"" MealInputScreen.j s # !"" MealPhotoTabNavigatorScreen.j s # !"" MedicineNotebookConfigScreen.j s # !"" MyDataDailyRecordScreen.j s # !"" MyDataMedicineHistoryScreen.j s # !"" MyDataMedicineNotebookScreen.j s # !"" MyDataTabNavigatorScreen.j s # !"" NotificationConfScreen.j s # !"" OtherMenusScreen.j s # !"" PasswordConfigScreen.j s # !"" PepUpRootNavigatorScreen.j s # !"" PepUpStackNavigatorScreen.j s # !"" PepUpWebView.j s # !"" ProfileCameraRoll.j s # !"" ProfileScreen.j s # !"" QrCameraScreen.j s # !"" SetupLocaleScreen.j s # !"" StartScreen.j s # !"" TermsOfUseView.j s # %"" TwoFactorAuthenticationScreen.js
  2. sr c !"" asset s !"" component s # !""

    legac y # !"" atom s # !"" molecule s # !"" organism s # !"" template s # %"" page s !"" domain s # !"" common s # !"" object s # %"" service s !"" locale s !"" routes %"" store s !"" action s !"" reducer s !"" statu s %"" storage s ap p !"" action s !"" asset s !"" component s !"" container s !"" cor e !"" locale s !"" model s !"" reducer s !"" saga s %"" storage #FGPSF"GUFS
  3. sr c !"" asset s !"" component s # !""

    legac y # !"" atom s # !"" molecule s # !"" organism s # !"" template s # %"" page s !"" domain s # !"" common s # !"" object s # %"" service s !"" locale s !"" routes %"" store s !"" action s !"" reducer s !"" statu s %"" storage s ap p !"" action s !"" asset s !"" component s !"" container s !"" cor e !"" locale s !"" model s !"" reducer s !"" saga s %"" storage Atomic Designతʹࡉ෼Խ
  4. Α͔ͬͨ͜ͱ🥳 • Fat Component͕ੜ·Εʹ͘͘ͳͬͨ • Atomic Designʹैͬͯ৽ن࣮૷ / ϦϑΝΫλ͢Δલఏ •

    Componentͷʮ࢖͍·Θ͠౓߹͍ʯ͕Θ͔Γ΍͘͢ͳͬͨ • ൚༻త UI Component: atoms / molecules • ઐ༻త UI Component: organisms / templates / pages
  5. FlowType to TypeScript 1. σΟϨΫτϦઓུΛݟ௚ͨ͠ • 1σΟϨΫτϦ͋ͨΓͷϑΝΠϧ਺͕ଟ͗͢ΔͱɺTSԽͨ࣌͠ʹࠩ෼Λݟ͖Εͳ͍ 2. zxbodya/ fl

    owts Λ࢖ͬͯɺͻͱ·ͣશ෦ίʔυTSԽͨ͠ • babelͷTSԽPRͰ΋࢖ΘΕ͍ͯΔ • FlowTypeͰ͔ͬ͠Γܕఆٛͯͨ͠ͱ͜Ζ͸ɺ͖ͪΜͱܕ͍ͭͨ 3. खಈͰίϯύΠϧΤϥʔΛ௵͍ͯ͘͠ • ܕ෇͚͍ͯ͠Δ΋ͷ͕গͳ͔ͬͨͷͰɺnull / unde fi ned ͷෆ੔߹͕͍ͬͺ͍Ͱͨ
  6. ಋೖͨ͠΋ͷ • Bugsnag • JavaScript૚޲͚ • ը໘ભҠͷཤྺ΋औͬͯ͘ΕΔͷͰศར • (Web frontʹ߹ΘͤͯೖΕ͕ͨɺSentryͷ΄͏͕ྑ͍ͱࢥ͏)

    • Firebase Crashlytics • ωΠςΟϒ૚޲͚ • JSͷϩά΋औΕΔ͕͋·Γ࢖͑ͳ͍ͷͰɺωΠςΟϒ૚༻ͱͯ͠Δ