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

React and Redux Love Web APIs

Avatar for Ricardo Torres Ricardo Torres
April 21, 2017
Programming
0
58

React and Redux Love Web APIs

A story about how we leveraged React and Redux + Web Audio API, Web Workers, WebSockets, TypedArrays and Streams to build a Live Commentary system for our live football matches at mycujoo.tv.
Avatar for Ricardo Torres

Ricardo Torres

April 21, 2017
Tweet

More Decks by Ricardo Torres

See All by Ricardo Torres
The Road to Serverless RESTish APIs
Avatar for Ricardo Torres rictorres
2
78
WebRTC - Comunicação na web em tempo real
Avatar for Ricardo Torres rictorres
1
190
Responsive Web Design @ Semcomp 2013
Avatar for Ricardo Torres rictorres
1
160
Responsive Web Design
Avatar for Ricardo Torres rictorres
1
99

Other Decks in Programming

See All in Programming
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
430
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
140
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
460
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
360
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
390
Datadog RUM 本番導入までの道
Avatar for Shintaro Matsumoto shinter61
1
310
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
1
190
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
Avatar for yukyan n3xem
0
670
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
560

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
609
69k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
920
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k

Transcript

  1. React and Redux Love Web APIs Ricardo Torres mycujoo.tv

  2. None
  3. None
  4. None

  5. What we use R E A C T A N

    D R E D U X L O V E W E B A P I S

  6. R E A C T A N D R E

    D U X L O V E W E B A P I S How it works

  7. Football Live Commentary R E A C T A N

    D R E D U X L O V E W E B A P I S

  8. git init R E A C T A N D

    R E D U X L O V E W E B A P I S

  9. Media

  10. None

  11. WebRTC R E A C T A N D R

    E D U X L O V E W E B A P I S

  12. WebRTC + Safari =

  13. WebSocket + Web Audio R E A C T A

    N D R E D U X L O V E W E B A P I S

  14. Host

  15. Listener

  16. React ❤ R E A C T A N D

    R E D U X L O V E W E B A P I S
  17. None
  18. None

  19. How can we share this? R E A C T

    A N D R E D U X L O V E W E B A P I S Who needs Live Commentary?

  20. R E A C T A N D R E

    D U X L O V E W E B A P I S Live Podcast

  21. R E A C T A N D R E

    D U X L O V E W E B A P I S http://bit.ly/live-podcast

  22. R E A C T A N D R E

    D U X L O V E W E B A P I S

  23. R E A C T A N D R E

    D U X L O V E W E B A P I S

  24. Thanks✌ We're hiring! https://github.com/rictorres https://github.com/mycujoo