Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empowering your React application with Flow type system

Olena Sovyn
December 06, 2019
Technology
0
28

Empowering your React application with Flow type system

Olena Sovyn

December 06, 2019
Tweet

More Decks by Olena Sovyn

See All by Olena Sovyn
Hidden Gems in Code Reviews
kiwka
0
33
Testing, tEstIng, TeStInG or how to test React apps with generated input data
kiwka
1
470
Building Webflow Ecommerce in 3 stories
kiwka
0
51
Building a Chrome Extension with React
kiwka
0
390
Understanding Recompose through examples
kiwka
0
170
On the way to making React components more reusable
kiwka
2
200
Using Facade pattern with JSX
kiwka
4
250

Other Decks in Technology

See All in Technology
Oracle Exadata Database Service on [email protected] ([email protected]) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
0
420
GLOBIS データサイエンスチームのご紹介/ GLOBIS Data Science Team is hiring.
globis_gdp
0
1.9k
RedMica 2.3 (2023-05) 新機能ハイライト およびRedmineの2023年5月までの半年間の主要な開発成果
vividtone
0
110
Semantic Kernel を使って ChatGPT Plugins をアプリに組み込んでみよう
okazuki
0
130
応用から学ぶ強化学習
nearme_tech
0
150
Vault Secrets Operator と Dynamic Secrets で安全にシークレットを使おう / Vault Secrets Operator and Dynamic Secrets
nnstt1
3
310
ChatGPTを活用した 便利ツールの紹介
hankehly
0
480
copilot-cli(Fargate)でRailsを運用するためのTips / JAWS-UG Okayama 2023
interu
1
340
どうしてもcgoから逃げられなくなったあなたに知ってほしいcgoの使い方入門
sakiengineer
1
1k
GO TechTalk #19 タクシーアプリ『GO』事業成長を支えるデータ分析基盤の継続的改善！
mot_techtalk
2
960
失敗から学ぶQA組織
taro_nanairo
1
230
CloudWatch複合アラームでELBの5XXをいい感じに検知しようとしたらうまくいかなかった話 / cloudwatch alarm elb 5xx
gotok365
0
600

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
23
1.8k
Automating Front-end Workflow
addyosmani
1352
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Atom: Resistance is Futile
akmur
256
24k
The Web Native Designer (August 2011)
paulrobertlloyd
78
2.3k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
176
9.4k
Optimizing for Happiness
mojombo
366
66k
Designing Experiences People Love
moore
131
22k
Raft: Consensus for Rubyists
vanstee
130
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
13
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
25
5.3k
Why You Should Never Use an ORM
jnunemaker
PRO
49
8.1k

Transcript

  1. Empowering your React
    application with Flow
    type system
    Olena Sovyn

    @frontendgirl

    View Slide

  2. @frontendgirl

    View Slide

  3. View Slide

  4. Why?

    View Slide

  5. Benefits
    1. No unused properties

    2. Improved refactoring experience

    3. Documentation in place
    @frontendgirl

    View Slide

  6. How?

    View Slide

  7. View Slide

  8. View Slide

  9. What are the rules?

    View Slide

  10. 1. Be as exact as possible

    @frontendgirl

    View Slide

  11. 1. Be as exact as possible

    No error
    Error
    @frontendgirl


    View Slide

  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

    View Slide

  13. 2. Spot “black holes”

    .
    flowconfig
    No error

    eslint-plugin-flowtype
    @frontendgirl

    View Slide

  14. 3. Use meaningful type names

    @frontendgirl


    View Slide

  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/

    View Slide