DDDSouthwest - JavascriptServices: Building Single Page Applications with ASP.NET Core

Transcript

1. Sandeep Singh | @initial_spark | initialspark.co.uk JavaScript Services: Building Single Page Applications with ASP.NET Core
2. Challenges Slow initial site load ` ?
3. Challenges : Slow initial load
4. Challenges ` ? SEO & Content preview Slow initial site load
5. https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal Challenges : SEO & Content Preview
6. Setup & tooling SEO/Content preview Challenges Slow initial site load ` ?
7. 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
8. Building SPA’s can be complex… Q: How can ASP.NET Core Help?
9. 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. “ ”
10. SpaServices SpaTemplates NodeServices ASP.NET Core JavaScript Services
11. dotnet new Microsoft.AspNetCore.SpaTemplates
12. > dotnet new --install Microsoft.AspNetCore.SpaTemplates::* > npm install -g yo generator-aspnetcore-spa > yo aspnetcore-spa Microsoft.AspNetCore.SpaTemplates
13. Lets checkout some code!
14. webpack middleware Hot module replacement Server-side pre-rendering Routing helpers Microsoft.AspNetCore.SpaServices
15. webpack
16. Demo
17. http://jlongster.com/Backend-Apps-with-Webpack--Part-III Hot Module Replacement
18. Demo
19. Server Client S h a r e d U Universal JS ` U
20. § Slow initial load time § Better SEO § Enable content preview on social networks § Fall-back support for older browsers Server-side pre-rendering
21. Demo
22. 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
23. Demo
24. webpack middleware Hot module replacement Server-side pre-rendering Routing helpers Microsoft.AspNetCore.SpaServices
25. 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.
26. Demo
27. 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.
28. § 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
29. Thank you ! You can find me at @initial_spark & initialspark.co.uk