Sandeep Singh | @initial_spark | initialspark.co.uk JavaScript Services: Building Single Page Applications with ASP.NET Core 

Challenges Slow initial site load ` ? 

Challenges : Slow initial load 

Challenges ` ? SEO & Content preview Slow initial site load 

https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal Challenges : SEO & Content Preview 

Setup & tooling SEO/Content preview Challenges Slow initial site load ` ? 

Modern Front-End 2017 Web Dev < 2009 Server Side JS CSS HTML JavaScript: TypeScript, ES2017, CoffeScript Libraries: Angular, React, Auerilia, VueJs, jQuery Architecture: Flux,Redux,MVC Build/Bundling: webpack, gulp/grunt, rollup Module loaders: ES6 imports, System.Js, AMD, CJS Package managers: npm, yarn, bower Challenges : Setup & tooling Database 

Building SPA’s can be complex… Q: How can ASP.NET Core Help? 

JavaScriptServices is a set of technologies for ASP.NET Core developers. It provides infrastructure that you’ll find useful if you use Angular 2 / React / Knockout / etc. on the client, or if you build your client-side resources using Webpack, or otherwise want to execute JavaScript on the server at runtime. “ ” 

SpaServices SpaTemplates NodeServices ASP.NET Core JavaScript Services 

dotnet new Microsoft.AspNetCore.SpaTemplates 

> dotnet new --install Microsoft.AspNetCore.SpaTemplates::* > npm install -g yo generator-aspnetcore-spa > yo aspnetcore-spa Microsoft.AspNetCore.SpaTemplates 

Lets checkout some code! 

webpack middleware Hot module replacement Server-side pre-rendering Routing helpers Microsoft.AspNetCore.SpaServices 

webpack 

Demo 

http://jlongster.com/Backend-Apps-with-Webpack--Part-III Hot Module Replacement 

Demo 

Server Client S h a r e d U Universal JS ` U 

§ Slow initial load time § Better SEO § Enable content preview on social networks § Fall-back support for older browsers Server-side pre-rendering 

Demo 

Routing helpers § Fall-back route § Handles 404 § Routing order matters Static files, MVC route, SPA fall-back § Not a silver bullet if client side routes complex e.g /test.sub 

Demo 

webpack middleware Hot module replacement Server-side pre-rendering Routing helpers Microsoft.AspNetCore.SpaServices 

Microsoft.AspNetCore.NodeServices NET Core Process § Fast and robust way to execute JS on server at runtime. § SpaServices use’s library to implement features. § Access to vast NPM ecosystem e.g. audio manipulation. § Can be used outside ASP.NET Core. 

Demo 

Summary § SpaTemplates useful for rapid prototyping. § webpack great for streamlining DX. § NodeServices allows access to NPM and packages not available in dotnet ecosystem. § Can be used with existing single page application. 

§ https://github.com/aspnet/JavaScriptServices § https://webpack.js.org/concepts/ § https://github.com/MarkPieszak/aspnetcore-angular2-universal § https://github.com/initialspark/ddd-southwest-2017 Resources 

Thank you ! You can find me at @initial_spark & initialspark.co.uk