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
50
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
670
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
710
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
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
43k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
Avatar for Kurochan kurochan
4
2.2k
OpenTelemetry が拡げる Gemini CLI の可観測性
Avatar for Tomonori Hayashi phaya72
2
1.8k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
Avatar for Oikon oikon48
10
5.4k
Findy Team+ QAチーム これからのチャレンジ！
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
0
500
旅で応援する✈️ NEWTが目指すコミュニティ支援とあたらしい旅行 / New Travel: Supporting by NEWT on Your Journey
Avatar for miisan mii3king
0
140
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
Avatar for gree_tech gree_tech
PRO
0
240
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
8.9k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
Avatar for katsuhisa_ katsuhisa91
PRO
3
1.2k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.2k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
Avatar for NTT docomo Business nttcom
1
440
フレームワークを意識させないワークショップづくり
Avatar for Keigo Suda keigosuda
0
240

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Done Done
Avatar for chrislema chrislema
185
16k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
930
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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/