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

Making ReactJS work with ASP.NET Core MVC

Making ReactJS work with ASP.NET Core MVC

ReactJS offers a powerful way to build complete applications using client-side rendering and routing. So, why would you even still want a sophisticated server-side stack like ASP.NET Core and MVC? In this talk, I will demonstrate how to be more productive when creating and hosting ReactJS apps. ASP.NET Core MVC goes well beyond just being a fileserver for your static files: it offers special packages for React developers that cleanly integrate what's going on in the client (routing, validation, data access, etc.) with equivalents on the server. It lets you wield the full power of the server to do what's impossible on the client alone, such as improving the startup performance of your ReactJS application by orders of magnitude and even pre-rendering ReactJS apps on the server.

Arlan Nugara

June 11, 2017
Tweet

More Decks by Arlan Nugara

Other Decks in Programming

Transcript

  1. MAKING REACTJS WORK WITH ASP.NET CORE MVC

  2. 2 https://speakerdeck.com/arlannugara

  3. None
  4. None
  5. Download now at www.visualstudio.com Update 1 Released April 5, 2017

    Update 2 Released May, 2017 Visual Studio 2017 General Availability (March 7, 2017)
  6. ANNOUNCING .NET CORE TOOLING 1.0 Visual Studio 2017 .NET Core

    CLI www.dot.net/core
  7. https://www.visualstudio.com/vs/compare/

  8. www.visualstudio.com Online install only Bootstrap only 1 meg Install/Modify/Repair/Uninstall 16

    basic workloads + Individual components For corporate environments/classrooms  https://docs.microsoft.com/en-us/visualstudio/install/create-an-offline-installation-of-visual-studio INSTALLATION
  9. https://www.visualstudio.com/

  10. None
  11. None
  12. None
  13. None
  14. WHAT ARE WE COVERING TODAY? •ASP.NET Core MVC •What is

    ASP.NET Core MVC and what are the actual names? •.NET 2017 – 10K foot view •Differences: .NET Framework vs. .NET Core •ASP.NET Core 2.0 – Key Values •ReactJS •What Is ReactJS & ReactJS.NET •ReactJS.NET & support for .NET Core? 6/11/2017 14
  15. EVOLUTION OF ASP AND ASP .NET 6/11/2017 15 ASP.NET Web

    API Active Server Pages (Classic ASP) ASP.NET (Web Forms) ASP.NET MVC 1/2/3/4/ 5 ASP.NET Web Pages ASP.NET MVC 6 Core MVC Unified MVC, Web API and Web Pages
  16. NAMES & VERSION NUMBERS 6/11/2017 16 5 5 .NET Core

    5
  17. ABOUT .NET CORE •.NET Core is a subset of the

    .NET Framework •Many .NET Framework components are not in .NET Core •.NET Core is completely modularized. Each component is distributed via NuGet •Apps can be updated independently and do not rely on major framework releases •Deployment package includes everything needed to run •.NET Core will run on Linux, Windows, and OSX 6/11/2017 17
  18. .NET CORE ROADMAP 6/11/2017 18 https://github.com/dotnet/core/blob/master/roadmap.md

  19. ASP.NET CORE 1.0 ROADMAP 6/11/2017 19 https://github.com/aspnet/home/wiki/roadmap

  20. WHAT ABOUT ASP.NET 5? •ASP.NET Core 1.0 was previously called

    ASP.NET 5 •It was renamed in January 2016 •You may still see it referred to as ASP.NET 5 in Visual Studio and in some docs •Was updated in latest ASP.NET Core Release Candidate 2 6/11/2017 20
  21. .NET 2017 – 10K FOOT VIEW 6/11/2017 21 Next gen

    JIT (RyuJIT) SIMD Runtime Components Compilers .NET Compiler Platform (Roslyn) Languages innovation .NET Core 2.0 Libraries .NET Framework 4.6 Libraries NuGet packages .NET Framework 4.7 .NET Core 2.0 Full .NET Framework for any scenario and library support on Windows Modular libraries & runtime optimized for server and cloud workloads
  22. 6/11/2017 22

  23. TWO PARTS OF .NET CORE Runtime/Libraries: CLR, libraries, compilers, etc.

    Won’t change before RTM Tooling: Supports .NET Core and ASP.NET Core, including the new command line tools and bits that plug into Visual Studio & Visual Studio Code Will change before RTM 6/11/2017 23
  24. DIFFERENCES: .NET FRAMEWORK VS. .NET CORE 6/11/2017 24 Feature .NET

    Framework .NET Core Library Installation Centralised Distributed with each app Updates One big update. You better get your app ready Updates to framework are independent of app. Update NuGet packages when you are ready Platforms Windows is the only one for me I love everyone! Windows, OSX, Linux Base Class Library All the things! You get the entire BCL All the things! You get the entire BCL Credit: https://gooroo.io/GoorooTHINK/Article/16732/Introduction-to-NET-Core/22177
  25. ASP.NET IN A NUTSHELL 6/11/2017 25

  26. ASP.NET 4.6 AND ASP.NET CORE 1.1 6/11/2017 26

  27. ASP.NET CORE 1.1 – KEY VALUES 6/11/2017 27 Choose your

    Editors and Tools Open Source with Contributions Cross-Platform OSS Seamless transition from on-premises to cloud Faster Development Cycle Totally Modular Fast
  28. ASP.NET CORE ~ THE FEATURES •Hosting •Kestrel, Startup •Middleware •Routing,

    authentication, static files, diagnostics, error handling, session, CORS, localization, custom •Dependency Injection •Configuration •Logging •Identity 6/11/2017 28
  29. ASP.NET CORE ~ WHAT CAN YOU DO? ASP.NET •MVC Web

    Apps in C# •Web API apps •Console apps •.NET Core compatible class library •Signal R and Web Pages are coming after RTM 6/11/2017 29
  30. 6/11/2017 30 MVC + Web API + Web Pages =

    ASP .NET Core MVC
  31. ASP.NET CORE MVC •One set of concepts – remove duplication

    •Web UI and Web APIs •Built on ASP.NET Core •Supports .NET Core •Runs on IIS or self-hosted •Deep integration with DI 6/11/2017 31
  32. 6/11/2017 32 https://www.microsoft.com/net/download/core

  33. WHAT IS REACT? 6/11/2017 33 REACT A JAVASCRIPT LIBRARY FOR

    BUILDING USER INTERFACES REACT .NET REACT ♥ C# AND ASP.NET MVC REACT NATIVE A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT
  34. REACT IS OPEN SOURCE (GITHUB) •ReactJS: http://reactjs.com/ •ReactJS.NET: http://reactjs.net/ •React

    Native: https://facebook.github.io/react-native/ 6/11/2017 34
  35. WHO’S USING REACT? 6/11/2017 35

  36. WHAT IS REACT? •Made by Facebook •Used by Facebook •IE8

    and up •All recent mobile browsers •GitHub Fork for IE6 & IE7 •Native apps for iOS (Android soon) •Windows already allows for native JavaScript applications. 6/11/2017 36
  37. WHAT IS REACT? •A JavaScript library for building user interfaces.

    •React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. •Declarative views make your code more predictable and easier to debug. •Build encapsulated components that manage their own state, then compose them to make complex UIs. •Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM 6/11/2017 37
  38. REACTJS.NET & ASP.NET CORE The challenge with building 2017-style clientside-centric

    web apps is that there’s just so much going on, such as: •Frameworks (React, Angular 1 or 2, Knockout, Aurelia, …) •Architectures (plain old MV*, Flux/Redux, …) •Languages (ES2016/TypeScript/…, LESS/SASS/…) •Build systems (Webpack/Gulp/…), and all the ensuing choices: • Development middleware • Hot module replacement • Bundling strategies • Lazy loading of modules •Server-client integration ◦Server-side prerendering of Angular/React/etc components •Server-side prepopulation of client-side data caches •Plain old fetching and synchronising data •Combining server-side and client-side routing •Combining server-side and client-side validation 6/11/2017 38
  39. WHAT IS REACTJS.NET 6/11/2017 39 https://reactjs.net/

  40. 2017-06-11 40

  41. 2017-06-11 41

  42. 2017-06-11 42

  43. 2017-06-11 43

  44. 2017-06-11 44

  45. Thank-you!