O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React.js + azure signal r

161 visualizações

Publicada em

React.js + azure signal r

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

React.js + azure signal r

  1. 1. Real Time Applications React.js + Azure SignalR
  2. 2. Hello! We are Miguel Teherán and Camilo Jaramillo @mteheran - @milocko
  3. 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. 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. 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. 6. Architecture ● Components. ● Virtual DOM. ● Props and States. ● Redux (Optional). ● JSX (Optional).
  7. 7. SignalR ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps.
  8. 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. 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. 10. Simple DemoHow this works?
  11. 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
  12. 12. Azure Functions Demo
  13. 13. React.js Demos
  14. 14. Resources ◇ https://github.com/Mteheran/AzureSignalRDemo/ ◇ https://github.com/Mteheran/SignalRWhiteBoard ◇ https://github.com/aspnet/AzureSignalR-samples ◇ https://github.com/Mteheran/SignalRFunnyGifDemo
  15. 15. Resources ◇ Channel 9 ◇ Microsoft Build ◇ Azure SignalR Service
  16. 16. Thanks! Any questions? You can find us at: ◇ @mteheran ◇ @milocko
  17. 17. Credits Special thanks to all the people who made and released these awesome resources for free: ◇ Presentation template by SlidesCarnival ◇ Photographs by Unsplash