Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Progressive Repro Frontend #vuefes
Search
cheezenaan
November 03, 2018
Technology
3
930
Progressive Repro Frontend #vuefes
Lunch Sponsor session in Vue Fes Japan 2018
cheezenaan
November 03, 2018
Tweet
Share
More Decks by cheezenaan
See All by cheezenaan
Repro の Web SDK 開発を支える技術 / How to deal with Web SDK development at Repro
cheezenaan
3
2.9k
Other Decks in Technology
See All in Technology
Cursor Meetup Tokyo
iamshunta
2
690
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
710
Houtou.pm #1
papix
0
670
Babylon.jsでゲームを作ってみよう
limes2018
0
100
從開發到架構設計的可觀測性實踐
philipz
0
120
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
2
340
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
190
技術書典18結果報告
mutsumix
2
180
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
19
5.4k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
RailsConf 2023
tenderlove
30
1.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Rails Girls Zürich Keynote
gr2m
94
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Transcript
Progressive Repro Frontend @cheezenaan Repro inc. Vue Fes Japan 2018
Have you enjoyed Vue Fes Japan 2018? !
@cheezenaan Repro inc. Progressive Repro Frontend Vue Fes Japan 2018
What’s Repro?
IUUQTSFQSPJP
Web / App Marketing Automation IUUQTSFQSPJP
αϒεΫϦϓγϣϯΛ ղͦ͠͏ͳϢʔβʔ ͚ͩʹ ϓογϡ௨ΛૹΓ͍ͨ
αϒεΫϦϓγϣϯΛ ղͦ͠͏ͳϢʔβʔ ͚ͩʹ ϓογϡ௨ΛૹΓ͍ͨ
Repro ͳΒ αΫοͱͰ͖·͢
ઍສͷτϥϑΟοΫ ԯ௨ͷϓογϡ৴ per day
“ͱΓ͋͑ͣ Repro ೖΕΑ͏” ΛੈքنͰࢦͯ͠·͢
Ͱɺ͓Ίʔ୭Αʁ
@cheezenaan Application Engineer Loves: - TypeScript - Curry NOT callee
$ - Kyoto Animation
ΑΖ͘͠ ͓Ͷ͕͍͠·͢
͔͜͜Βຊฤ
Progressive Repro Frontend
Progressive Repro Frontend
…
࣌ʹɺྐྵ 2014
࣌ʹɺྐྵ 2014
Repro, ੜ
άϥϑΟΧϧͳ ੳը໘ΛΰϦΰϦ࣮ in RoR + jQuery
͔ΜͨΜͳϩδοΫΛ मਖ਼͢Δ͚ͩͳͷʹ DOM ߏΛ୮೦ʹ ಡΈղ͔ͳ͍ͱࢮ͵
None
IUUQTWVFKTPSH
Vue.js IUUQTWVFKTPSH
Declarative Rendering Two-way Binding IUUQTWVFKTPSH
An incrementally adoptable ecosystem IUUQTWVFKTPSH
IUUQTEPDTHPPHMFDPNQSFTFOUBUJPOE8O:TY3.J/&"S5Y[Y9)E,F)$K57YNQUHI+C&TFEJUTMJEFJEHGD@
IUUQTEPDTHPPHMFDPNQSFTFOUBUJPOE8O:TY3.J/&"S5Y[Y9)E,F)$K57YNQUHI+C&TFEJUTMJEFJEHGD@ Progressive Framework
ςΟϯʂ
None
v0.12.0
σʔλϩδοΫͱ DOM ඳըΛ
ςετ͍͢͠ʂ
ͦͷޙαʔϏε ॱௐʹΛॏͶ
IUUQTRJJUBDPNFEXBSELFOGPYJUFNTGBBEB
ʑͷ։ൃͰ ಘͨݟ ੯͠·ͣൃ৴ IUUQTRJJUBDPNFEXBSELFOGPYJUFNTGBBEB
ͦͯ͠ɺ
࣌ʹɺྐྵ 2017
ϚʔέςΟϯάػೳ֦ॆ ͳ͍ͰෳࡶԽ͢Δ ೖྗϑΥʔϜ
ίϯϙʔωϯτͷ ঢ়ଶཧͭΒͨΜ
None
IUUQTWVFYWVFKTPSH
Vuex IUUQTWVFYWVFKTPSH
Store management pattern + library IUUQTWVFYWVFKTPSH
tailored specifically for Vue.js IUUQTWVFYWVFKTPSH
ͳΔ΄Ͳ…
None
None
None
ࢼߦࡨޡ͠ͳ͕Β ݟΛͨΊͭͭ
ΞϓϦέʔγϣϯͷঢ়ଶΛ UI ͷঢ়ଶ͔ΒΓͯ͠ ू͍ͤͯ͘͞
None
ίϯϙʔωϯτͷ ݟ௨͕͠ྑ͘ͳͬͨ
ΊͰͨ͠ΊͰͨ͠ =ऴ=
ͦͯ͠ɺ
࣌ʹɺྐྵ 2018
ຖ xx0% ͢Δ ϏδωεΛࢧ͑ΔͨΊͷ ݎ࿚ͳΞʔΩςΫνϟΛ ͑ͭͭ
ΑΓεϐʔσΟʹ ܧଓతʹ ϢʔβʔՁΛ ಧ͚͍ͨ
େͳσʔλͷهɾՃ ฒྻϫʔΫϑϩʔΤϯδϯ ੳɾϚʔέςΟϯά UI / UX
େͳσʔλͷهɾՃ ฒྻϫʔΫϑϩʔΤϯδϯ ੳɾϚʔέςΟϯά UI / UX
None
͋Ε͍ͨ͠ ͜Ε͍ͨ͠
Γ͍ͨ͜ͱ͕ Γͩ͘͞Μ
None
ςΟϯʂͱ͖ͨ ͦ͜ͷ͋ͳͨ !
͓͢͢Ίͷձࣾ ͬͯ·͢
IUUQTXXXXBOUFEMZDPNDPNQBOJFTSFQSP
IUUQTXXXXBOUFEMZDPNDPNQBOJFTSFQSP
2018 2014 2017 2016 2015 v2.5.x v1.0.28 Completely Decaffeinated v3.1.x
(TBD…) v0.12 ࢲͨͪͱ ੈքΛ ࢦ͠·ͤΜ͔
End
End?
One more thing …
ϊϕϧςΟ͋Γ〼 εςοΧʔ Tγϟπ
Vue Fes ձͰ ΅͘ͱѲख
Thank you