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
51

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
660
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
88
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
700
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
430
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
300
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
400

Other Decks in Technology

See All in Technology
新規事業におけるGORM+SQLx併用アーキテクチャ
Avatar for hacomono Inc. hacomono
PRO
0
280
AI Agent Dojo #2 watsonx Orchestrateフローの作成
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
120
技育祭2025【秋】 企業ピッチ/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
0
110
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
Avatar for nobu09 nobu09
1
580
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
20251010_HCCJP_AdaptiveCloudUpdates
Avatar for osamut sdosamut
0
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
630
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
Avatar for shonansurvivors shonansurvivors
4
450
速習AGENTS.md：5分で精度を上げる "３ブロック" テンプレ
Avatar for Izumu KUSUNOKI ismk
6
1.6k
今この時代に技術とどう向き合うべきか
Avatar for gree_tech gree_tech
PRO
2
1.7k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
640
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
Avatar for Masakatsu Sugii ditccsugii
0
300

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k

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/