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.

Transcript

1. MAKING REACTJS WORK WITH ASP.NET CORE MVC
2. 2 https://speakerdeck.com/arlannugara
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/
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!