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
52
Testing, tEstIng, TeStInG or how to test React apps with generated input data
Avatar for Olena Sovyn kiwka
1
680
Building Webflow Ecommerce in 3 stories
Avatar for Olena Sovyn kiwka
0
91
Building a Chrome Extension with React
Avatar for Olena Sovyn kiwka
0
740
Understanding Recompose through examples
Avatar for Olena Sovyn kiwka
0
500
On the way to making React components more reusable
Avatar for Olena Sovyn kiwka
2
320
Using Facade pattern with JSX
Avatar for Olena Sovyn kiwka
4
410

Other Decks in Technology

See All in Technology
Java 25に至る道
Avatar for Yuichi.Sakuraba skrb
3
220
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
62k
コミュニティが持つ「学びと成長の場」としての作用 / RSGT2026
Avatar for ama-ch ama_ch
2
260
Node vs Deno vs Bun 〜推しランタイムを見つけよう〜
Avatar for すずとも kamekyame
1
470
スクラムマスターが
スクラムチームに入って取り組む5つのこと
- スクラムガイドには書いてないけど入った当初から取り組んでおきたい大切なこと -
Avatar for scrummasudar scrummasudar
3
2k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
350
さくらのクラウドでのシークレット管理を考える/tamachi.sre#2
Avatar for FUJIWARA Shunichiro fujiwara3
1
150
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
12k
純粋なイミュータブルモデルを設計してからイベントソーシングと組み合わせるDeciderの実践方法の紹介 /Introducing Decider Pattern with Event Sourcing
Avatar for Tomohisa Takaoka tomohisa
1
1k
Qiita Bash アドカレ LT #1
Avatar for Kaoru okaru
0
190

Featured

See All Featured
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
4.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.5k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.8k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
180
Visualization
Avatar for Eitan Lees eitanlees
150
16k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
1
99
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
110
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
39
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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/