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

Empowering your React application with Flow typ...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Olena Sovyn Olena Sovyn
December 06, 2019
Technology
60
0

Empowering your React application with Flow type system

Avatar for Olena Sovyn

Olena Sovyn

December 06, 2019

More Decks by Olena Sovyn

See All by Olena Sovyn
Hidden Gems in Code Reviews
Avatar for Olena Sovyn kiwka
0
59
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
700
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
99
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
770
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
540
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
330
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
430

Other Decks in Technology

See All in Technology
When Platform Engineering Meets GenAI
Avatar for suci sucitw
0
200
元・セキュリティ学習経験0大学生による業務紹介 / An Introduction to the Job by a Former College Student with Zero Security Training Experience
Avatar for NTT docomo Business nttcom
0
630
クラウドファンディング版StackChan 3体（4体）をインタラクティブな体験型作品にして展示もした話 / ｽﾀｯｸﾁｬﾝお誕生日会2026
Avatar for you（@youtoy） you
PRO
0
190
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
100
AIエージェントとPhysical AIが拓く製造業の変革（ハノーバーメッセリキャップ）
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
千葉での単身赴任からAWSをやり続け、千葉に戻ってきた話
Avatar for Yuuki Yamashita yama3133
1
120
UIパーツの設計を「型」から読み解く 〜TSKaigiのセッションから得た学び〜
Avatar for yud0uhu yud0uhu
0
100
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
580
MySQL & MySQL HeatWave Report - June 2026
Avatar for Olivier DASINI freshdaz
0
180
Hatena Engineer Seminar 37 jj1uzh
Avatar for jj1uzh jj1uzh
0
110
AIチャットの改善から見えた、良いAI体験とは / What Constitutes a Good AI Experience: Insights from Improving AI Chat
Avatar for Masatoshi Kubode kubode
0
120
Oracle Cloud Infrastructure：2026年6月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
360

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
330
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
570
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
260
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
400

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/