Codemash 2018 – Event-Driven UX in the Real World with Angular and Socket.io

Presenter : Michael Meadows

• Angular is now on version 5.2!
  • Angular plus websockets, plus reactive js extensions make for event driven ui, even when events on server.
  • He likes Angular and typescript, doesn’t care about reactjs
    • Angular works really well with reactive extensions (observables)
• Why socket.io
  • small
  • stable
• UX Patterns/Anti-Patterns
  • Anti-Patterns
    • Requeset/Response
      • Users don’t want to wait minutes for UI to update when waiting for response from long running process
    • Polling to know if something changes
      • Can crush your server if have a lot of usage
    • Save Button?
      • Pattern because used to update a whole file when posting
    • Optimistic Concurrency
      • First one to save wins
  • Good Patterns
    • Notifications
      • Broadcast changes from the server
      • What is happening on the server in socket.io
        • Three different ways to send events
          • emit
          • get users socket and emil
          • goes to just one client or to all sockets
        • Broadcast
    • Data Streaming
      • Event streaming
      • A client can add an item and tell web socket to emit the item
        • Server then emits the item to all other sockets
        • Bubbling event from client to server and back to client
        • Namespaces allow the limiting of what clients get emitted events when client says to emit an event
        • Room versus namespace
          • Chat may be the namespace the room is the actual chat we are in.
    • Record Locks
      • Can emit events from server when a record is locked and unlocked allowing clients to disable updating when record is locked and to know to update when lock released and to allow client to update again.
    • Soft Locks
    • CQRS
      • Command Query Response Segragation
      • Treat transactions and views separately