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
58
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
56
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
98
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
760
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
530
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
420

Other Decks in Technology

See All in Technology
100マイクロサービスのTerraform/Kubernetes管理地獄から抜け出すためのAI活用術
Avatar for Masaki Ishigaki markie1009
0
150
AIのための特別なアーキテクチャはいらない 0→1開発で実践した設計原則とガードレール
Avatar for 株式会社カミナシ kaminashi
0
120
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
210
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.5k
Tachikawa.any 運営挨拶
Avatar for daitasu daitasu
0
170
大学職員のための生成AI最前線 ：最前線を、AIガバナンスとして読み直すためのTips
Avatar for gmoriki | 森木銀河 gmoriki
2
4.1k
Gaussian Splattingの表現力を拡張する — 高周波再構成とインタラクションへのアプローチ —
Avatar for GPU UNITE gpuunite_official
0
170
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
Avatar for みのるん minorun365
4
230
CyberAgent YJC Connect
Avatar for shimayuu shimaf4979
1
180
AI飲み会幹事エージェントを作っただけなのに
Avatar for Yuta Kimi ykimi
0
210
毎日の作業を Claude Code 経由にしたら、 ノウハウがコードになった
Avatar for Hajime KOSHIRO kossykinto
1
1.4k
鹿野さんに聞く！CSSの最新トレンド Ver.2026
Avatar for tonkotsuboy_com tonkotsuboy_com
6
3.1k

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
920
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
180
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
110

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/