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
53

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
51
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
89
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
720
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
440
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
310
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
400

Other Decks in Technology

See All in Technology
ABEJA FIRST GUIDE for Software Engineers
Avatar for ABEJA abeja
0
3.2k
Post-AIコーディング時代のエンジニア生存戦略
Avatar for shinoyu shinoyu
0
300
Perlの生きのこり - YAPC::Fukuoka 2025
Avatar for Kenta Kobayashi kfly8
0
180
持続可能なアクセシビリティ開発
Avatar for azukiazusa azukiazusa1
6
270
身近なCSVを活用する！AWSのデータ分析基盤アーキテクチャ
Avatar for Kotaro.S koosun
0
2k
不確実性に備える ABEMA の信頼性設計とオブザーバビリティ基盤
Avatar for Katsutoshi Nagaoka nagapad
3
2.9k
Kubernetesと共にふりかえる! エンタープライズシステムのインフラ設計・テストの進め方大全
Avatar for 高棹大樹 daitak
0
410
Error.prototype.stack の今と未来
Avatar for Shunsuke Mano progfay
1
180
明日から真似してOk！NOT A HOTELで実践している入社手続きの自動化
Avatar for kajinari nkajihara
1
870
グローバルなコンパウンド戦略を支えるモジュラーモノリスとドメイン駆動設計
Avatar for かわうそ kawauso
3
4.6k
SRE視点で振り返るメルカリのアーキテクチャ変遷と普遍的な考え
Avatar for foostan foostan
2
360
リアーキテクティングのその先へ 〜品質と開発生産性の壁を越えるプラットフォーム戦略〜 / architecture-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
2.8k

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k

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/