Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + ASP.NET Core = 👍

React + ASP.NET Core = 👍

Learn about ASP.NET Core, Microsoft's cross-platform and open-source web app framework, and how we can integrate a React app with an ASP.NET Core back-end, including server-side pre-rendering!
Code: https://github.com/jpsingleton/React-ASP.NET-Core
Video: https://www.youtube.com/watch?v=Etwh7lSfQ7Y

C7f80c55a331c014f748f6bcfbca9d40?s=128

James Singleton

December 07, 2017
Tweet

More Decks by James Singleton

Other Decks in Technology

Transcript

  1. React + ASP.NET Core = James Singleton unop.uk @shutdownscanner

  2. What is ASP.NET Core? And why should I care?

  3. None
  4. None
  5. None
  6. None
  7. Features • Cross-platform • Windows • Mac • Linux •

    Command line friendly • Your choice of editor / IDE • Visual Studio • VS Mac • VS Code • Rider • Open source • Community contributions • Performance • Benchmarks • Compiled yet portable • Static type checking • Easy package and publish • Containers • Self-contained • Native compilation coming
  8. React + ASP.NET Core

  9. Why server-side over static? • Pre-render HTML • Latest content

    before JS loads • Not static HTML from build • Also good for SEO • Not for “installed” offline PWAs • Service Workers / AppCache • Cache output for set time • Controller attribute • API backend • Data storage • Authentication • Proxy API • If not CORS enabled • Trim down payload to reduce latency • Serialization format change • E.g. XML → JSON • Static IP authentication restrictions • Token / credential protection • Easier testing (and demos ) • Abstraction and decoupling • Redundancy and backup • Historical trend logging • Caching (LAN) • SOAP 
  10. Spot the difference @ShitSignage

  11. Fail @ShitSignage

  12. Popups @ShitSignage

  13. A problem has been detected… @ShitSignage

  14. Slow news day @ShitSignage

  15. In the beginning (before APIs)

  16. Port to react

  17. Static reactube.com

  18. Demo

  19. Huxley – Live Departure Board JSON proxy

  20. InstaBail.uk

  21. Book • ASP.NET Core 2 High Performance • What’s new

    in .NET Core 2 and C# • Getting started (all the platforms) • Universal tips for quick apps • Data Structures • Parallelisation • Image Formats • Compression • Architecture • Networking • Cloud Hosting • JS Service Workers • unop.uk/book
  22. Thanks Questions? James Singleton unop.uk @shutdownscanner