$30 off During Our Annual Pro Sale. View Details »

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
52
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
90
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
730
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
480
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
410

Other Decks in Technology

See All in Technology
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
100
Snowflakeでデータ基盤を もう一度作り直すなら / rebuilding-data-platform-with-snowflake
Avatar for pei0804 pei0804
4
1.3k
世界最速級 memcached 互換サーバー作った
Avatar for yasukata yasukata
0
330
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
Avatar for hawky the miscellaneous hawkymisc
1
170
Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
680
AIと二人三脚で育てた、個人開発アプリグロース術
Avatar for ZOZO Developers zozotech
PRO
1
710
コミューンのデータ分析AIエージェント「Community Sage」の紹介
Avatar for Yusuke Fukasawa fufufukakaka
0
470
MLflowで始めるプロンプト管理、評価、最適化
Avatar for Databricks Japan databricksjapan
1
140
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
250
技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜
Avatar for subroh_0508 subroh0508
1
430
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
Avatar for Michiru Kato applism118
4
1.2k
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
Avatar for suto sutotakeshi
0
450

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
510
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
500
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710

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/