Slide 1

Slide 1 text

4೥ӡ༻ͨ͠ ൿ఻ͷReact NativeΞϓϦΛ νʔϜ։ൃͰ͖ΔΑ͏ʹͨ͜͠ͱ mrtry 2021/10/02

Slide 2

Slide 2 text

ࣗݾ঺հ • ͱΒ͍(@mrtry) • Yamamoto Shinnosuke • גࣜձࣾJMDC (tech lead) • v0.56.0͙Β͍͔Β৮ͬͯΔ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

಺੡νʔϜ΍ͬͯ͘Ұਓ໨ͱͯ͠ೖࣾͨ͠ • WebϑΝʔετͰαʔϏεϦϦʔεͨ͠ • ۀ຿ҕୗͷਓ(1໊)ʹ͓ئ͍͠ɺΞϓϦΛޙ௥͍Ͱग़ͨ͠ • ձࣾʮΞϓϦͷPV૿͖͔͑ͯͨΒɺ։ൃνʔϜ࡞ͬͯ಺੡͍ͨ͠ʯ • ࢲʮԶ͕Ұਓ໨ʹͳΔͧʯ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ࡉ෼Խ͞Εͯͳ͍ 
 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

Slide 7

Slide 7 text

Fat Component 😇 render : 15L͙Β͍ ϩδοΫ: 400L͙Β͍

Slide 8

Slide 8 text

FlowType + JavaScript ౰࣌ɺTS࠾༻͸গͳΊͩͬͨ

Slide 9

Slide 9 text

ΤϥʔτϥοΧʔ ͕ͳ͍ ΫϥογϡݪҼ͕Θ͔ΒΜ😇

Slide 10

Slide 10 text

ʮൿ఻ͷΞϓϦʯͷνʔϜ։ൃɺݫ͍͠

Slide 11

Slide 11 text

ෳ਺ਓͰ։ൃ͠΍͍͢Α͏ʹ੔͑Δͧ

Slide 12

Slide 12 text

࠷௿ݶ੔͑ͨ νʔϜ։ൃ؀ڥ

Slide 13

Slide 13 text

࠷௿ݶ੔͑ͨνʔϜ։ൃ؀ڥ • ͱΓ͋͑ͣAtomic DesignΛ࠾༻ͨ͠ • TypeScriptಋೖͨ͠ • ΤϥʔτϥοΧʔಋೖͨ͠

Slide 14

Slide 14 text

ͱΓ͋͑ͣAtomic DesignΛ࠾༻ͨ͠

Slide 15

Slide 15 text

ͱΓ͋͑ͣAtomic DesignΛ࠾༻ͨ͠ • PresentationalͱContainer͸ɺ͔Ζ͏ͯ͡ผΕ͍ͯΔ • Presentational͕Fat Componentʹͳ͍ͬͯΔ • ͱΓ࣮͋͑ͣ૷ํ਑ͱͯ͠Atomic DesignΛऔΓೖΕͯ੔ཧͨ͠

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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తʹࡉ෼Խ

Slide 18

Slide 18 text

Α͔ͬͨ͜ͱ🥳 • Fat Component͕ੜ·Εʹ͘͘ͳͬͨ • Atomic Designʹैͬͯ৽ن࣮૷ / ϦϑΝΫλ͢Δલఏ • Componentͷʮ࢖͍·Θ͠౓߹͍ʯ͕Θ͔Γ΍͘͢ͳͬͨ • ൚༻త UI Component: atoms / molecules • ઐ༻త UI Component: organisms / templates / pages

Slide 19

Slide 19 text

TypeScriptΛಋೖͨ͠

Slide 20

Slide 20 text

FlowType͸ಋೖ͞Ε͍͕ͯͨɺݫ͔ͬͨ͠ • IDEͷαϙʔτ͕ऑ͘ɺطଘίʔυͷಡղʹίετ͕͔͔Δ • FlowType͸ಋೖ͞Ε͍ͯΔ͕ɺҰ෦͔͠ܕఆٛ͞Ε͍ͯͳ͍ • ϥΠϒϥϦʹFlowTypeͰܕ͍ͭͯͳ͍ → ੜͷJSॻ͘ͷͱେͨ͠มΘΒͳ͍ঢ়گͰ͸ 😇 → TypeScriptʹ͍ͨ͠😇

Slide 21

Slide 21 text

FlowType to TypeScript 1. σΟϨΫτϦઓུΛݟ௚ͨ͠ • 1σΟϨΫτϦ͋ͨΓͷϑΝΠϧ਺͕ଟ͗͢ΔͱɺTSԽͨ࣌͠ʹࠩ෼Λݟ͖Εͳ͍ 2. zxbodya/ fl owts Λ࢖ͬͯɺͻͱ·ͣશ෦ίʔυTSԽͨ͠ • babelͷTSԽPRͰ΋࢖ΘΕ͍ͯΔ • FlowTypeͰ͔ͬ͠Γܕఆٛͯͨ͠ͱ͜Ζ͸ɺ͖ͪΜͱܕ͍ͭͨ 3. खಈͰίϯύΠϧΤϥʔΛ௵͍ͯ͘͠ • ܕ෇͚͍ͯ͠Δ΋ͷ͕গͳ͔ͬͨͷͰɺnull / unde fi ned ͷෆ੔߹͕͍ͬͺ͍Ͱͨ

Slide 22

Slide 22 text

̍ϲ݄͙Β͍ઓͬͨ

Slide 23

Slide 23 text

Α͔ͬͨ͜ͱ🥳 • ͢΂ͯͷϑΝΠϧͰܕνΣοΫͰ͖ΔΑ͏ʹͳͬͨ • IDE͕ΊͬͪΌॿ͚ͯ͘ΕΔΑ͏ʹͳͬͨ • ϥΠϒϥϦͷίʔυʹܕ͕ͭ͘Α͏ʹͳͬͨ • FlowTypeઃఆϑΝΠϧͷอक͕ͳ͘ͳͬͨ

Slide 24

Slide 24 text

ΤϥʔτϥοΧʔಋೖͨ͠

Slide 25

Slide 25 text

QA࣌ʹരࢮͨ͠ • Ϋϥογϡͨ͠ɺͱQAνʔϜ͔ΒใࠂΛड͚ͨ • Ϋϥογϡͷ࠶ݱ / ղܾ͕Ͱ͖ͣɺϦϦʔεΛݟૹΔ͜ͱʹͳͬͨ → ΤϥʔτϥοΧʔಋೖ͠Α͏ 😇

Slide 26

Slide 26 text

ಋೖͨ͠΋ͷ • Bugsnag • JavaScript૚޲͚ • ը໘ભҠͷཤྺ΋औͬͯ͘ΕΔͷͰศར • (Web frontʹ߹ΘͤͯೖΕ͕ͨɺSentryͷ΄͏͕ྑ͍ͱࢥ͏) • Firebase Crashlytics • ωΠςΟϒ૚޲͚ • JSͷϩά΋औΕΔ͕͋·Γ࢖͑ͳ͍ͷͰɺωΠςΟϒ૚༻ͱͯ͠Δ

Slide 27

Slide 27 text

Α͔ͬͨ͜ͱ🥳 • ҙਤ͠ͳ͍όάͷൃݟ͕Ͱ͖ΔΑ͏ʹͳͬͨ • ϩά͕खʹೖΔͷͰɺQA࣌ͷௐࠪ / ࠶ݱͷ࣌ؒΛ࡟ݮ͞Εͨ

Slide 28

Slide 28 text

·ͱΊ

Slide 29

Slide 29 text

ʮൿ఻ͷΞϓϦʯΛνʔϜ։ൃ͢ΔͨΊͷԼ४උ • ໾ׂ͕෼͔Δఔ౓ʹComponentΛࡉ෼Խ͓ͯ͜͠͏ • TypeScriptಋೖ͢ΔͱɺίʔυϦʔσΟϯά͕ॿ͔Δ • ΤϥʔτϥοΩϯάಋೖ͢ΔͱɺΫϥογϡͪ͠Όͬͯ΋ࠔΒͳ͍