To SPA or to Multi-Page? If you are not sure, keep your options open by doing them both at the same time. In this session we will go over the advantages of the "siloed" approach and then we will dive into code to explore a possible implementation of such a hybrid architecture. This example will leverage VueJS on top of an ASP.NET Core 2 backend. As a bonus, I will demonstrate a lean, straight forward Webpack setup of Vue JS in ES6 syntax without all the bloat and noise a standard template will give you out of the box. Target audience: developers, coders, programmers

1. Building SPA Silos with
VueJS and ASP.NET Core 2
Liviu Mandras-Iura
Software Architect / / @liviumandras
@ITCAMPRO #ITCAMP18Community Conference for IT Professionals

2. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo

3. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo

4. Some context first…

5. Client Server
HTML
POST
HTML
First request
Page
refresh
Multi page app (MPA) lifecycle

6. Client Server
HTML
AJAX
{…}
JSON
First request
Single page app (SPA) lifecycle

7. SPA
+ Great for SEO
+ Traditional tech stacks
MPA
+ Desktop like UX
+ Responsiveness (after first load)
- Security
- SEO
- Watch it! Memory leak ahead!
+ Fast
- Breaks user flow with reload
+ Repackage-able for mobile
- Harder to UI test
- A bit slow by today’s standards
- Front end tightly coupled to backend
+ Initial page load is better
+ Good for large content websites
- Hard to reuse backend for mobile
- Analytics

8. Q: Which one is better?

9. Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLATINUM
POWERED BY

10. YES !

11. Use the right tool for the right use case

12. SPA
+ Great for SEO
+ Traditional tech stacks
MPA
+ Desktop like UX
+ Responsiveness (after first load)
- Security
- SEO
- Watch it! Memory leak ahead!
+ Fast
- Breaks user flow with reload
+ Repackage-able for mobile
- Harder to UI test
- A bit slow by today’s standards
- Front end tightly coupled to backend
+ Initial page load is better
+ Good for large content websites
- Hard to reuse backend for mobile
- Analytics

13. The verdict?

14. Verdict 404

15. a 3rd option

16. Enter SPA silos…

17. a.k.a. Mini SPA/islands of functionality/SPA pockets

18. What ?

19. Front End
HTML
SPA1
HTML HTML
SPA2
HTML
…

20. Client
Server
HTML
Request
SPA2 AJAX
{…}
JSON
AJAX
{…}
JSON
SPA1
HTML
SPA silos workflow

21. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo

22. Brownfield environment

23. Front End
HTML HTML HTMLHTML HTML HTMLHTML
SPA

24. Greenfield environment

25. Critical use cases dependent on MPA features

26. Risk control
AND/OR
Budget/time constraints

27. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo

28. Separation of concerns / Modularization

29. Reduced chance for memory leaks

30. Allows for parallel UI work

31. Paves the way to micro-frontends
Backend Monolith
UI
API Gateway
UI
Microservice
Microservice
Microservice
API Gateway
UI
Microservice
Microservice
Microservice
SPA SPA
Microservice
Microservice
Microservice
SPA SPA
Team
Products
Team
Admin

32. Using the proper tool where it belongs

34. Caveat…

35. Extra complexity in setup

36. SPA
+ Great for SEO
+ Traditional tech stacks
MPA
+ Desktop like UX
+ Responsiveness (after first load)
- Security
- SEO
- Watch it! Memory leak ahead!
+ Fast
- Breaks user flow with reload
+ Repackage-able for mobile
- Harder to UI test
- A bit slow by today’s standards
- Front end tightly coupled to backend
+ Initial page load is better
+ Good for large content websites
- Hard to reuse backend for mobile
- Analytics

37. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo

38. Concept is general
Implementation is specific

39. Technology & Tools

40. Javascript ServicesWebpack 4
Vue JS 2.5

41. Version 2.0

42. etc…

44. “The progressive JavaScript framework”
Modern, powerful, lightweight and fast
Easy to learn
Vibrant ecosystem
https://github.com/vuejs/awesome-vue

46. .vue
.vue
.vue

47. Loaders & Plugins
vue-loader Other Loaders
PluginsFiles
LoaderA LoaderZ
Bundle
…
…

48. Configuration

49. Microsoft.AspNetCore.SpaTemplates
Microsoft.AspNetCore.NodeServices
Microsoft.AspNetCore.SpaServices
Webpack dev
middleware
Server side
rendering
Hot module
replacement
Routing
Helpers

50. • Part 1
• What are SPA silos?
• When/why to use them?
• Pros and cons
• Part 2
• Tech overview
• Demo time!

51. Demo can be found here:
https://github.com/slask/MultiSpaDemo

52. Thank you and Enjoy the Vue!
@liviumandras
@ITCAMPRO #ITCAMP18Community Conference for IT Professionals

53. Q & A
@ITCAMPRO #ITCAMP18Community Conference for IT Professionals