This document discusses using React.js and Azure SignalR for real-time applications. It provides an overview of React.js, how it works using virtual DOM and components, and when to use Azure SignalR, such as for applications requiring high frequency updates, notifications, or collaboration. It also demonstrates connecting a React app to Azure SignalR and includes resources for further information.

1. Real Time Applications
React.js + Azure SignalR

2. Hello!
We are Miguel
Teherán and Camilo
Jaramillo
@mteheran - @milocko

3. What is React JS
● Is not a MVC framework-Its a powerful
JS Library.
● It is used to build user interfaces (UI) on
the Front End.
● It focuses on the V and maybe the C on
the MVC pattern.

4. How does React
Work?
● Having the power and flexibility of
JavaScript, Facebook engineers
realized that if HTML nodes were
represented as JavaScript objects, we
would have a new world of possibilities
to work with them.

5. How does React
Work?
● The DOM is a bottleneck; we should
avoid it as much as possible.
● The views should never change the
models directly.
● One-way data binding flow.

6. Architecture
● Components.
● Virtual DOM.
● Props and States.
● Redux (Optional).
● JSX (Optional).

7. SignalR
ASP.NET Core SignalR is
an open-source library that
simplifies adding real-time
web functionality to apps.

8. ● Apps that require high frequency
updates from the server. Examples
are gaming, voting, auctions, maps,
and GPS apps.
● Dashboards and monitoring apps.
Examples include company
dashboards and instant sales
updates.
When use SignalR?

9. ● Collaborative apps. Whiteboard
apps and team meeting software are
examples of collaborative apps.
● Apps that require notifications.
Social networks, email, chat, games,
travel alerts, and many other apps
use notifications.
When use SignalR?

10. Simple
DemoHow this works?

11. Add Nuget -> Microsoft.Azure.SignalR
Add to ConfigureServices -> services.AddSignalR().AddAzureSignalR();
dotnet user-secrets set Azure:SignalR:ConnectionString "<your
connection string>"
Change to app.UseAzureSignalR(routes =>
Steps

15. Azure
Functions
Demo

16. React.js
Demos

17. Resources
◇ https://github.com/Mteheran/AzureSignalRDemo/
◇ https://github.com/Mteheran/SignalRWhiteBoard
◇ https://github.com/aspnet/AzureSignalR-samples
◇ https://github.com/Mteheran/SignalRFunnyGifDemo

18. Resources
◇ Channel 9
◇ Microsoft Build
◇ Azure SignalR Service

19. Thanks!
Any questions?
You can find us at:
◇ @mteheran
◇ @milocko

20. Credits
Special thanks to all the people who made and released
these awesome resources for free:
◇ Presentation template by SlidesCarnival
◇ Photographs by Unsplash