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

Empowering your React application with Flow typ...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
AI時代のコスト管理を考えよう〜明日から使える実践AWSノウハウ～
Avatar for yoshimi0227 yoshimi0227
0
920
組織における AI-DLC 実践
Avatar for ASKUL Engineer askul
0
130
IaC コードを資産へ：AWS CDK 社内ライブラリと横断展開 / aws-summit-japan-2026
Avatar for k.goto gotok365
10
1.6k
MySQL & MySQL HeatWave Report - June 2026
Avatar for Olivier DASINI freshdaz
0
180
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
100
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
210
AIが自律的に回る開発ループを設計してチーム開発に組み込む
Avatar for Mitsuhiro Komuro (nekorush14) nekorush14
0
130
AIチャット検索改善の3週間
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
190
AIに障害切り分けを全部やってもらった。 。 。 。
Avatar for estie | エスティ estie
0
220
気軽に使える"情報のハブ"としてのNotion活用　〜フロー情報の集積点 と、 Claude Code × Notion AI〜
Avatar for Ryo Okubo syucream
1
210
AI時代に求められる技術力 フロンティア・クリエイティビティ / Technical Excellence in the AI Era: Frontier Creativity
Avatar for 株式会社カオナビ kaonavi
0
120
AIAU_UMEMOGU_ninomiya_slide
Avatar for ninomiya ninomiya_ii
0
270

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
720
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
210
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
450
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k

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/