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
50

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
46
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
640
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
84
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
680
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
390
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
290
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
390

Other Decks in Technology

See All in Technology
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
170
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
Avatar for Takashi Kawasaki espresso3389
0
120
Connect 100+を支える技術
Avatar for Yamakan kanyamaguc
0
190
KubeCon + CloudNativeCon Japan 2025 に行ってきた！ & containerd の新機能紹介
Avatar for Honahuku honahuku
0
120
MobileActOsaka_250704.pdf
Avatar for AKAI Tadaaki akaitadaaki
0
110
asken AI勉強会(Android)
Avatar for 佐藤忠 tadashi_sato
0
170
20250707-AI活用の個人差を埋めるチームづくり
Avatar for shnjtk shnjtk
4
3.3k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
Avatar for Phil Huang pichuang
0
220
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
6.2k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for markhor64456 airhelpsupport
0
270
Glacierだからってコストあきらめてない？ / JAWS Meet Glacier Cost
Avatar for sasaki taishin
1
140
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
1
190

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k

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/