React.js + azure signal r
- 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?
- 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
- 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