ngRepeat
vs
ngReact
Martin Fowler’s Design Stamina Hypothesis
WebSocket Load
balancing
Permission and
security model
(Admin, Mods, ...)
Frontend Server Backend Server
UI
Chat System
Fr...
ngRepeat
Demo
ngReact
Chatmessage Service
Websocket
Controller
Angular Template
React Component
Demo
Thank you!
jg@hitbox.tv
max@hitbox.tv
We are hiring!
jobs.hitbox.tv
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
ngRepeat vs ngReact
Nächste SlideShare
Wird geladen in …5
×

ngRepeat vs ngReact

543 Aufrufe

Veröffentlicht am

How we deployed ngReact as part of our AngularJS webpage and what speed improvement we saw.

Presented together with János Gyurisán at the 13th AngularJS Meetup in VIenna

Veröffentlicht in: Ingenieurwesen
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
543
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • What i want to talk about
  • What is hitbox? A streaming service für gamer
  • This is the startpage
  • And this is a watchpage. On eintegrap part of it is the schat on the right, where poeple communicate with the broadcaster
  • -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
  • This is how the chat is build

  • What i want to talk about
  • -fun part -> message bodies (HTML) were generated as string properties of js objects, which is bad practice, but we didn’t 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, don’t do this
  • 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

  • so
  • What i want to talk about
  • What i want to talk about
  • - 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

  • so
  • 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]
  • What i want to talk about
  • Just one mor think:
  • We are hiring!
  • ngRepeat vs ngReact

    1. 1. ngRepeat vs ngReact
    2. 2. Martin Fowler’s Design Stamina Hypothesis
    3. 3. 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
    4. 4. ngRepeat
    5. 5. Demo
    6. 6. ngReact
    7. 7. Chatmessage Service Websocket Controller Angular Template React Component
    8. 8. Demo
    9. 9. Thank you! jg@hitbox.tv max@hitbox.tv
    10. 10. We are hiring! jobs.hitbox.tv

    ×