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

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

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

4e5fd4655e0c94ae66cebb466bf8e788?s=128

Sandeep Singh

May 06, 2017
Tweet

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