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

Empowering your React application with Flow typ...

Avatar for Olena Sovyn Olena Sovyn
December 06, 2019
Technology
0
54

Empowering your React application with Flow type system

Avatar for Olena Sovyn

Olena Sovyn

December 06, 2019
Tweet

More Decks by Olena Sovyn

See All by Olena Sovyn
Hidden Gems in Code Reviews
Avatar for Olena Sovyn kiwka
0
52
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
680
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
91
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
750
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
510
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
320
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
410

Other Decks in Technology

See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
160
Webアクセシビリティ技術と実装の実際
Avatar for tomokusaba tomokusaba
0
210
Ultra Ethernet (UEC) v1.0 仕様概説
Avatar for Masayuki Kobayashi markunet
3
110
生成AI活用によるPRレビュー改善の歩み
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
5
2k
【SLO】"多様な期待値" と向き合ってみた
Avatar for kaita z63d
2
290
Kiro のクレジットを使い切る！
Avatar for otanikohei otanikohei2023
0
110
男（監査）はつらいよ - Policy as CodeからAIエージェントへ
Avatar for Kengo Suzuki ken5scal
5
720
AI が Approve する開発フロー / How AI Reviewers Accelerate Our Development
Avatar for Hiroka Zaitsu zaimy
1
260
LLM活用の壁を超える：リクルートR&Dの戦略と打ち手
Avatar for Recruit recruitengineers
PRO
1
220
DX Improvement at Scale
Avatar for ntk1000 ntk1000
2
230
ヘルシーSRE
Avatar for Hiroki Takatsuka tk3fftk
2
230

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
75
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
170
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
310
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
84
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
140
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k

Transcript

  1. Empowering your React application with Flow type system Olena Sovyn

    @frontendgirl

  2. @frontendgirl

  3. None

  4. Why?

  5. Benefits 1. No unused properties 2. Improved refactoring experience 3.

    Documentation in place @frontendgirl

  6. How?

  7. None
  8. None

  9. What are the rules?

  10. 1. Be as exact as possible @frontendgirl

  11. 1. Be as exact as possible No error Error @frontendgirl

  12. 2. Spot “black holes” Black holes are functions return values

    of which have type any, even though their types can be more specific based on the function internal logic

  13. 2. Spot “black holes” . flowconfig No error eslint-plugin-flowtype @frontendgirl

  14. 3. Use meaningful type names @frontendgirl

  15. Let’s do our codebases automagically better! 1. Be as exact

    as possible 2. Spot “black holes” 3. Meaningful type names Check also: What? How? Why? 1. No unused properties 2. Improved refactoring 3. Documentation in place find and follow simple rules @frontendgirl http://frontendgirl.com/flow-best-practices/