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
49
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
650
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
87
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
700
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
400
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
400

Other Decks in Technology

See All in Technology
Yahoo!ニュースにおけるソフトウェア開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
420
Backboneとしてのtimm2025
Avatar for yu4u yu4u
4
1.7k
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
120
制約理論（ToC）入門
Avatar for Recruit recruitengineers
PRO
7
2.5k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
Avatar for Susisu susisu
7
2k
帳票Vibe Coding
Avatar for terurou terurou
0
150
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
Avatar for AEON aeonpeople
2
330
広島銀行におけるAWS活用の取り組みについて
Avatar for Masaki Mori[JAWS-UG広島] masakimori
0
150
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
Avatar for Yuki Anzai yanzm
0
200
Claude Code x Androidアプリ 開発
Avatar for Shinnosuke Kugimiya kgmyshin
1
600
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
Avatar for Yuji Yamaguchi yug1224
10
3.1k
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
430

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
480
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
185
54k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.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/