Mackerel のフロントエンドフレームワーク移行序章 / Hatena Engineer Seminar #13

by Susisu

Slide 1

Slide 1 text

M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ϑ Ϩ ʔϜϫ ʔ Ϋ Ҡ ߦ ং ষ 2 0 2 0 - 0 2 - 0 5 H a t e n a E n g i n e e r S e m i n a r # 1 3

Slide 2

Slide 2 text

ϨΨγʔϑϩϯτΤϯυ୤ग़ϓϩδΣΫτΛͲͷΑ͏ʹ্ཱ͔ͪ͛ͨ ࠓ೔ओʹ࿩͢͜ͱ

Slide 3

Slide 3 text

• id:susisu • Mackerel ։ൃνʔϜ ΞϓϦέʔγϣϯΤϯδχΞ • 2016 Πϯλʔϯ ˠ 2018 ৽ଔ • JavaScript ͕޷͖

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

M a c k e re l ͷ ։ ൃ ݴ ޠ ʢ ϑ Ϩ ʔϜϫ ʔ Ϋ ʣ • αʔόʔαΠυ: Scala (Play Framework), Go, Python • ϑϩϯτΤϯυ: TypeScript (AngularJS)

Slide 6

Slide 6 text

M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ྺ ࢙ • ։ൃ౰ॳ (2014 ೥͝Ζ) ͔Β AngularJS (v1) Λར༻ • ։ൃݴޠ͸్தͰ JavaScript ͔Β TypeScript ΁ • ͦͷޙେ͖ͳมߋ͸ͳ͘ݱࡏʹࢸΔ

Slide 7

Slide 7 text

M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ݱ ࡏ • AngularJS ͸ϨΨγʔԽ • ٕज़ࣗମ͕ݹ͘ɺ։ൃମݧ΋ϕετͰ͸ͳ͍ • αϙʔτ΋ 2021 ೥ 6 ݄຤Ͱऴྃ • ։ൃΛܧଓ͢ΔͨΊʹ͸ϑϨʔϜϫʔΫͷҠߦ͕ඞਢ ˠ AngularJS ୤ग़ϓϩδΣΫτ

Slide 8

Slide 8 text

A n g u l a r J S ୤ ग़ ϓ ϩ δΣ Ϋ τ • 2019 ೥ 9 ݄ΑΓ։࢝ • id:susisu ͕ओ୲౰ΤϯδχΞ • ݱࡏ͸ϓϩδΣΫτ͕ঃʑʹيಓʹ৐ΓɺϑϨʔϜϫʔΫͷҠߦ͕ਐΈͭ ͭ͋Δஈ֊ • ͜ͷൃදͰ͸ϓϩδΣΫτ্ཱͪ͛ͷաఔΛ঺հ͠·͢

Slide 9

Slide 9 text

Phase 0: ϓϩδΣΫτͷܭը

Slide 10

Slide 10 text

P h a s e 0 : ϓ ϩ δΣ Ϋ τ ͷ ܭ ը • ݱঢ়ͷ෼ੳͱཁ݅ͷ੔ཧΛߦ͍ɺϑϨʔϜϫʔΫҠߦͷํ਑Λܾఆ •ʢͦ΋ͦ΋Ҡߦ͢Δͷ͔ɺՄೳͳͷ͔ʣ • ͲͷϑϨʔϜϫʔΫʹҠߦ͢Δͷ͔ • ͲͷΑ͏ʹҠߦΛਐΊΔͷ͔

Slide 11

Slide 11 text

ཁ ݅ 1. ػೳ։ൃ͸ࢭΊͳ͍ 2. νʔϜɾࣾ಺Ͱϝϯςφϯε͍͚ͯ͠Δ 3. αϙʔτऴྃͷظݶ·Ͱʹ୤ग़͢Δ

Slide 12

Slide 12 text

ཁ ݅ 1 . ػ ೳ ։ ൃ ͸ ࢭ Ί ͳ ͍ • Mackerel ͸·ͩ੒௕Λଓ͚͍ͯΔαʔϏεͰɺ৽ػೳͷ։ൃ΋͋Δ • ৽چ 2 ͭͷϑϨʔϜϫʔΫͰಉ͡΋ͷΛ࡞Δͱೋ౓खؒʹͳͬͯ͠·͏ ˠ ෦෼తʹஔ͖׵͍͑ͯ͘࡞ઓΛͱΔ • ओཁͳϑϨʔϜϫʔΫ (React, Vue, Angular) Ͱ͋Ε͹ͲΕͰ΋Մೳ

Slide 13

Slide 13 text

ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ • ҠߦઌͷϑϨʔϜϫʔΫ͸ԿΛબͿ͔ • ৚݅Λߟ͑Δ • ಋೖͷ೉қ౓΍ύϑΥʔϚϯεͳͲͰٕज़తͳݒ೦͕ͳ͍ • νʔϜϝϯόʔʹ։ൃܦݧ͕͋Ε͹ల։͠΍͍͢ • ࣾ಺Ͱଞʹ࠾༻࣮੷͕͋Δͱ஌ݟͷަ׵ɾਓࡐͷަྲྀ͕͠΍͍͢

Slide 14

Slide 14 text

ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ • ֤߲໨ʹ͍ͭͯϑϨʔϜϫʔΫΛൺֱݕ౼ • ٕज़໘ ˠ ࢼݧతʹಋೖͯ͠Έͯݕূ • νʔϜ಺ͷܦݧ ˠ ϝϯόʔʹܦݧ΍։ൃ࣌ͷҹ৅ΛώΞϦϯά • ࣾ಺ͷ࣮੷ ˠ ۙ೥͸ React Λ࠾༻͍ͯ͠Δ͜ͱ͕ଟ͍ • ͜ΕΒΛ૯߹ͯ͠ React Λ࠾༻͢Δ͜ͱʹܾఆ

Slide 15

Slide 15 text

ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ ظ ݶ · Ͱ ʹ ୤ ग़ ͢ Δ • αϙʔτऴྃ (2021 ೥ 6 ݄຤) ·Ͱ 22 ϲ݄ (2019 ೥ 9 ݄࣌఺) • AngularJS ͷίʔυϕʔε͸ͦΕͳΓͷن໛͕͋Δ • εΫϦϓτͱςϯϓϨʔτΛ͋Θͤͯ໿ 52,000 ߦ • ଎౓Λग़ͭͭ͠ɺෳ਺ਓͰฒߦͯ͠࡞ۀ͠ͳ͍ͱ೉͍͠ ˠ ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ

Slide 16

Slide 16 text

ཁ ݅ 3 . α ϙʔ τ ऴ ྃ · Ͱ ʹ ୤ ग़ ͢ Δ • ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ • طଘͷίʔυϕʔεͱͷΪϟοϓΛେ͖͗͘͢͠ͳ͍ • ֶशίετΛԼ͛Δ • ଴ͪ߹Θ͕ͤൃੜ͢ΔΑ͏ͳਐΊํ͸ආ͚Δ • ͜ͷͨΊʹ͍͔ͭ͘ͷٕज़͸ͻͱ·ͣಋೖΛݟૹͬͨ • react-redux • styled-components

Slide 17

Slide 17 text

ܾ ఆ ͠ ͨ ํ ਑ · ͱ Ί • ҠߦઌϑϨʔϜϫʔΫ͸ React • ػೳ։ൃ͸ࢭΊͣʹ෦෼తʹஔ͖׵͍͑ͯ͘ • ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ

Slide 18

Slide 18 text

Phase 1: Ҡߦͷ։࢝ Phase 0: ϓϩδΣΫτͷܭը

Slide 19

Slide 19 text

P h a s e 1 : Ҡ ߦ ͷ ։ ࢝ • React ΁Ҡߦ͢ΔͨΊͷج൫੔උ • ػೳతͳ໘ • ػೳҎ֎ͷ໘ • ϚΠϧετʔϯͷઃఆ • ਐḿͷՄࢹԽ

Slide 20

Slide 20 text

ج ൫ ੔ උ : ػ ೳ త ͳ ໘ • React Ͱػೳ։ൃ͢ΔͨΊͷ४උ • جຊతͳػೳͷ࣮૷ • AngularJS ͱͷ૬ޓӡ༻ • ͜ͷൃදͰ͸ৄࡉ·Ͱ࿩͖͠Εͳ͍ͷͰɺ΋͠ڵຯ͕͋Ε͹͜ͷ͋ͱ ݸผʹฉ͍͍ͯͩ͘͞

Slide 21

Slide 21 text

A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ αʔϏε ίϯϙʔωϯτ

Slide 22

Slide 22 text

A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

Slide 23

Slide 23 text

A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

Slide 24

Slide 24 text

A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

Slide 25

Slide 25 text

A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

Slide 26

Slide 26 text

ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ ໘ • ϚΠϧετʔϯͷઃఆ • ࣮ࡍʹখ͞ͳίϯϙʔωϯτΛ React ΁Ҡߦͯ͠Έͯɺશମͷ࡞ۀΛେ ·͔ʹݟੵ΋Γ

Slide 27

Slide 27 text

ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ ໘ • ਐḿʢίʔυߦ਺ʣͷՄࢹԽ • ࡞ۀ଎౓ͷʢେࡶ೺ͳʣࢦඪ • ॏཁɿϞνϕʔγϣϯͷҡ࣋ • Mackerel ͷػೳΛ׆༻ • ίʔυߦ਺ΛαʔϏεϝτϦοΫͱͯ͠౤ߘ • ΧελϜμογϡϘʔυͰҰཡͰ͖ΔΑ͏ʹ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Phase 2: ෳ਺ਓମ੍΁ Phase 1: Ҡߦͷ։࢝

Slide 30

Slide 30 text

P h a s e 2 : ෳ ਺ ਓ ମ ੍ ΁ • ج൫͕͋Δఔ౓੔ͬͨͨΊɺෳ਺ਓମ੍Ͱͷ React ΁ͷҠߦΛ։࢝ • ϓϩδΣΫτΛيಓʹ৐͍ͤͯ͘ஈ֊

Slide 31

Slide 31 text

ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜ ͱ ʹ ΑΔ ม Խ • ৘ใͷڞ༗͕ඞཁ ˠ Scrapbox Λ׆༻ • ։ൃ೔ࢽͰݱঢ়ͷڞ༗΍ɺ࣭໰ίʔφʔͰٙ໰ͷղܾ • ҰਓͰ͸ݟ͚ͭʹ͔ͬͨ͘ج൫ͷෆඋ͕໌֬ʹͳΔ͜ͱ΋ • ܧଓతʹ੔උΛߦ͏ • AngularJS ͷίʔυ͕ݮগ܏޲ʹసͨ͡

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

· ͱ Ί • Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯ঺հ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ • ҠߦΛਐΊΔதͰͲͷΑ͏ͳ޻෉Λ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτ͸يಓʹ৐Γͭͭ͋Δஈ֊