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
60
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
710
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
100
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
770
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
550
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
340
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
430

Other Decks in Technology

See All in Technology
Goでデータパイプラインを作ろう
Avatar for SansanTech sansantech
PRO
1
420
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.8k
【Google Cloud Next Tokyo'26】Gemini Enterprise と Oracle AI Database で実現する、 業務データ活用を実現する AI エージェント実装
Avatar for KoheiOgawa shisyu_gaku
0
240
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
FDEの心得
Avatar for Noriaki Oji noriakioji
4
4.5k
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
160
オートロックマンションなのに、各部屋は施錠なし！？ 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
Avatar for NTT docomo Business nttcom
1
1.6k
Head First モブプログラミング / Head First Mobprogramming
Avatar for TAKAKING22 takaking22
10
12k
【CEDEC2026】グラフィックスエンジニアのためのニューラルシェーディング入門
Avatar for Cygames, Inc. cygames
PRO
0
140
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.5k
修正PRを食べてレビュースキルが賢くなる：Claude Codeによる自己改善サイクル
Avatar for um(うめ) yuyaumetsu
6
1.5k
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
Avatar for Takashi Yamaguchi yamaguchitk333
0
210

Featured

See All Featured
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
320
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
400
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
260
Docker and Python
Avatar for Tania Allard trallard
47
4.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
440

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/