際際滷

際際滷Share a Scribd company logo
ngRepeat
vs
ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
Martin Fowlers Design Stamina Hypothesis
WebSocket Load
balancing
Permission and
security model
(Admin, Mods, ...)
Frontend Server Backend Server
UI
Chat System
Frontend
Server
NodeJs
data storage
Redis
Cluster
hitbox
REST-API
PHP
Nginx
Backend
Server
NodeJs
Auto scaling
Auto scaling
Long Polling Fallback
Fallback
Server
NodeJs
ngRepeat
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
Demo
ngReact
Chatmessage Service
Websocket
Controller
Angular Template
React Component
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
Demo
Thank you!
jg@hitbox.tv
max@hitbox.tv
We are hiring!
jobs.hitbox.tv
Ad

Recommended

How to develop innovative, scalable systems
How to develop innovative, scalable systems
Max Kossatz
Improving Perceived Page Performance with ASP.NET Web API and AJAX
Improving Perceived Page Performance with ASP.NET Web API and AJAX
Chris Bohatka
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
Jose Javier Columbie
OWASP Ireland June Chapter Meeting - Paul Mooney on ARMOR & CSRF
OWASP Ireland June Chapter Meeting - Paul Mooney on ARMOR & CSRF
Paul Mooney
Express yourself
Express yourself
Yaniv Rodenski
Node ts1
Node ts1
Yaniv Rodenski
Docker Dublin: Just What is a Service Mesh, and if I get one will it make eve...
Docker Dublin: Just What is a Service Mesh, and if I get one will it make eve...
Elton Stoneman
Signal rity1
Signal rity1
Yaniv Rodenski
Servicestack
Servicestack
Giedrius Banaitis
Building rest services using aspnetwebapi
Building rest services using aspnetwebapi
Brij Mishra
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
Conquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri Karpov
Windows communication foundation (part2) jaliya udagedara
Windows communication foundation (part2) jaliya udagedara
Jaliya Udagedara
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
10 tips to make your ASP.NET Apps Faster
10 tips to make your ASP.NET Apps Faster
Brij Mishra
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
Valeri Karpov
Getting Started with ASP.NET 5
Getting Started with ASP.NET 5
Brij Mishra
Building Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise World
efim13
Code splitting with server side react
Code splitting with server side react
Saptarshi Chatterjee
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
Richard Banks
Node.JS
Node.JS
Kristaps K笛lis
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
Javascript for Wep Apps
Javascript for Wep Apps
Michael Puckett
Vert.x
Vert.x
Diego Pacheco
ReactJs Optimizations , Making server side react faster
ReactJs Optimizations , Making server side react faster
Saptarshi Chatterjee
Scaling and Orchestrating Microservices with OSGi - N Bartlett
Scaling and Orchestrating Microservices with OSGi - N Bartlett
mfrancis
Building Modern Web Applications with ASP.NET5
Building Modern Web Applications with ASP.NET5
Brij Mishra
Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014
Sylvain Ray辿
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Jo達o Esperancinha

More Related Content

What's hot (20)

Servicestack
Servicestack
Giedrius Banaitis
Building rest services using aspnetwebapi
Building rest services using aspnetwebapi
Brij Mishra
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
Conquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri Karpov
Windows communication foundation (part2) jaliya udagedara
Windows communication foundation (part2) jaliya udagedara
Jaliya Udagedara
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
10 tips to make your ASP.NET Apps Faster
10 tips to make your ASP.NET Apps Faster
Brij Mishra
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
Valeri Karpov
Getting Started with ASP.NET 5
Getting Started with ASP.NET 5
Brij Mishra
Building Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise World
efim13
Code splitting with server side react
Code splitting with server side react
Saptarshi Chatterjee
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
Richard Banks
Node.JS
Node.JS
Kristaps K笛lis
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
Javascript for Wep Apps
Javascript for Wep Apps
Michael Puckett
Vert.x
Vert.x
Diego Pacheco
ReactJs Optimizations , Making server side react faster
ReactJs Optimizations , Making server side react faster
Saptarshi Chatterjee
Scaling and Orchestrating Microservices with OSGi - N Bartlett
Scaling and Orchestrating Microservices with OSGi - N Bartlett
mfrancis
Building Modern Web Applications with ASP.NET5
Building Modern Web Applications with ASP.NET5
Brij Mishra
Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014
Sylvain Ray辿
Building rest services using aspnetwebapi
Building rest services using aspnetwebapi
Brij Mishra
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
Conquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri Karpov
Windows communication foundation (part2) jaliya udagedara
Windows communication foundation (part2) jaliya udagedara
Jaliya Udagedara
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
10 tips to make your ASP.NET Apps Faster
10 tips to make your ASP.NET Apps Faster
Brij Mishra
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
Valeri Karpov
Getting Started with ASP.NET 5
Getting Started with ASP.NET 5
Brij Mishra
Building Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise World
efim13
Code splitting with server side react
Code splitting with server side react
Saptarshi Chatterjee
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet
Richard Banks
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
Javascript for Wep Apps
Javascript for Wep Apps
Michael Puckett
ReactJs Optimizations , Making server side react faster
ReactJs Optimizations , Making server side react faster
Saptarshi Chatterjee
Scaling and Orchestrating Microservices with OSGi - N Bartlett
Scaling and Orchestrating Microservices with OSGi - N Bartlett
mfrancis
Building Modern Web Applications with ASP.NET5
Building Modern Web Applications with ASP.NET5
Brij Mishra
Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014
Sylvain Ray辿

Recently uploaded (20)

Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Jo達o Esperancinha
Solar thermal Flat plate and concentrating collectors .pptx
Solar thermal Flat plate and concentrating collectors .pptx
jdaniabraham1
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
KhadijaKhadijaAouadi
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
Industrial internet of things IOT Week-3.pptx
Industrial internet of things IOT Week-3.pptx
KNaveenKumarECE
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
DESIGN OF REINFORCED CONCRETE ELEMENTS S
DESIGN OF REINFORCED CONCRETE ELEMENTS S
prabhusp8
Industry 4.o the fourth revolutionWeek-2.pptx
Industry 4.o the fourth revolutionWeek-2.pptx
KNaveenKumarECE
Introduction to Python Programming Language
Introduction to Python Programming Language
merlinjohnsy
(Continuous Integration and Continuous Deployment/Delivery) is a fundamental ...
(Continuous Integration and Continuous Deployment/Delivery) is a fundamental ...
ketan09101
Unit III_One Dimensional Consolidation theory
Unit III_One Dimensional Consolidation theory
saravananr808639
Microwatt: Open Tiny Core, Big Possibilities
Microwatt: Open Tiny Core, Big Possibilities
IBM
Modern multi-proposer consensus implementations
Modern multi-proposer consensus implementations
Fran巽ois Garillot
International Journal of Advanced Information Technology (IJAIT)
International Journal of Advanced Information Technology (IJAIT)
ijait
Complete University of Calculus :: 2nd edition
Complete University of Calculus :: 2nd edition
Shabista Imam
Tally.ERP 9 at a Glance.book - Tally Solutions .pdf
Tally.ERP 9 at a Glance.book - Tally Solutions .pdf
Shabista Imam
20CE404-Soil Mechanics - 際際滷 Share PPT
20CE404-Soil Mechanics - 際際滷 Share PPT
saravananr808639
ElysiumPro Company Profile 2025-2026.pdf
ElysiumPro Company Profile 2025-2026.pdf
info751436
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
resming1
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Decoding Kotlin - Your Guide to Solving the Mysterious in Kotlin - Devoxx PL ...
Jo達o Esperancinha
Solar thermal Flat plate and concentrating collectors .pptx
Solar thermal Flat plate and concentrating collectors .pptx
jdaniabraham1
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
KhadijaKhadijaAouadi
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
Industrial internet of things IOT Week-3.pptx
Industrial internet of things IOT Week-3.pptx
KNaveenKumarECE
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
DESIGN OF REINFORCED CONCRETE ELEMENTS S
DESIGN OF REINFORCED CONCRETE ELEMENTS S
prabhusp8
Industry 4.o the fourth revolutionWeek-2.pptx
Industry 4.o the fourth revolutionWeek-2.pptx
KNaveenKumarECE
Introduction to Python Programming Language
Introduction to Python Programming Language
merlinjohnsy
(Continuous Integration and Continuous Deployment/Delivery) is a fundamental ...
(Continuous Integration and Continuous Deployment/Delivery) is a fundamental ...
ketan09101
Unit III_One Dimensional Consolidation theory
Unit III_One Dimensional Consolidation theory
saravananr808639
Microwatt: Open Tiny Core, Big Possibilities
Microwatt: Open Tiny Core, Big Possibilities
IBM
Modern multi-proposer consensus implementations
Modern multi-proposer consensus implementations
Fran巽ois Garillot
International Journal of Advanced Information Technology (IJAIT)
International Journal of Advanced Information Technology (IJAIT)
ijait
Complete University of Calculus :: 2nd edition
Complete University of Calculus :: 2nd edition
Shabista Imam
Tally.ERP 9 at a Glance.book - Tally Solutions .pdf
Tally.ERP 9 at a Glance.book - Tally Solutions .pdf
Shabista Imam
20CE404-Soil Mechanics - 際際滷 Share PPT
20CE404-Soil Mechanics - 際際滷 Share PPT
saravananr808639
ElysiumPro Company Profile 2025-2026.pdf
ElysiumPro Company Profile 2025-2026.pdf
info751436
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
resming1
Ad

ngRepeat vs ngReact

Editor's Notes

  • #2: What i want to talk about
  • #3: What is hitbox? A streaming service f端r gamer
  • #4: This is the startpage
  • #5: And this is a watchpage. On eintegrap part of it is the schat on the right, where poeple communicate with the broadcaster
  • #6: -start with lean 油-> with just as much effort,as required 油and when the idea is proved, restructure and make it more maintainable -the hitbox application were made in lean, so we have legacy code -but the idea has proved, and now we are stabilizing 油the application/making it better -first thing was the chat
  • #7: This is how the chat is build
  • #8: What i want to talk about
  • #9: -fun part -> message bodies (HTML) were generated as string properties of js objects, which is bad practice, but we didnt change this, because we could reuse the exact same message body with react like before, this allowed us to change to ngReact fast, without too much effort, but if you start from scratch, dont do this
  • #10: we had to use $scope.$apply on each message, so if we had 80messages/sec that triggered 80diggest loops/sec. If you do the math, basically you have 16ms for everything to get 60fps on the browser, for the simplicity, let's just say we have 16ms for the digest loops (in reality 16ms is for everything, including all js, render, etc..), if you divide 16/80 that means, you have 0.2ms (200袖s) for the digest loop, and we know, in a complex application, a digest loop below 1ms is rare so
  • #11: so
  • #12: What i want to talk about
  • #13: What i want to talk about
  • #14: - we have a separate service for messages, called chatMessages - the react component have a state array which will be used in the template, and the react component subscribes with a callback function(setItems) for new messages in the chatMessages service - a websocket message can push new message into an array in the chatMessages service
  • #15: so
  • #17: while we push to the array, we limit the length of the messages array to 300 [MAX this is only for you: what we do is we check if the length is above 300, and if it is, we limit the messages array to 150, however we could just limit it to 300, and forget this 150 thing. I don't remember why I implemented like this, but I think we could just let 300 messages to be in the DOM all the time]
  • #18: What i want to talk about
  • #19: Just one mor think:
  • #20: We are hiring!