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
47
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
85
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
690
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
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
7.8k
VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
Avatar for Yusuke Yamada yamachu
2
190
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for dobek566 flyunitedguide
0
430
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
Avatar for Bdsdigi@1234 flyamerican
1
180
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
Avatar for ar_tama ar_tama
7
1.2k
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業！FinOpsで始めるAWSコスト最適化の第一歩
Avatar for sh_fk2 sh_fk2
2
140
shake-upを科学する
Avatar for Jack rsakata
7
800
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
Avatar for M-Yamashita myamashii
1
150
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
Avatar for shotaTsuge shotatsuge
4
440
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
Avatar for Takahiro Miyoshi sankichi92
1
170
ポストコロナ時代の SaaS におけるコスト削減の意義
Avatar for izzii izzii
1
100
CDK Toolkit Libraryにおけるテストの考え方
Avatar for Makky12 smt7174
0
150

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
460
140k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
6
310
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.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/