Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Challenges Slow initial site load ` ?

Slide 3

Slide 3 text

Challenges : Slow initial load

Slide 4

Slide 4 text

Challenges ` ? SEO & Content preview Slow initial site load

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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. “ ”

Slide 10

Slide 10 text

SpaServices SpaTemplates NodeServices ASP.NET Core JavaScript Services

Slide 11

Slide 11 text

dotnet new Microsoft.AspNetCore.SpaTemplates

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Lets checkout some code!

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

webpack

Slide 16

Slide 16 text

Demo

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Demo

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Demo

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

Demo

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

§ 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

Slide 29

Slide 29 text

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