Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for...
Transcript of Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for...
![Page 1: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/1.jpg)
8/20/2020
1
1SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Single Page Architectures with Vue.JS and ASP.NET Core
Kevin Griffin
2SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Hello, I’m Kevin!
11-time Microsoft MVP
Focused on ASP.NET / ASP.NET Core / Azure
twitter.com/1kevgriff
consultwithgriff.com
Kevin Griffin
Owner, Swift Kick
![Page 2: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/2.jpg)
8/20/2020
2
3SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Get the Resources
https://consultwithgriff.com/spas-with-vuejs-aspnetcore
4SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Client-Side Applications of the Past (for .NET)
ASP.NET WebForms
Razor
Raw HTML +
JS
![Page 3: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/3.jpg)
8/20/2020
3
5SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
New Ways To Develop Client-Side Applications
6SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
New Ways To Develop Client-Side Applications
▪ CLI-based
▪ Development and Deployment happens outside of the backend application
▪ Front end doesn’t care where it is served from.
▪ Front end doesn’t care where it gets data from.
![Page 4: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/4.jpg)
8/20/2020
4
In an ASP.NET Core world, how can be better support these types
of applications?
8SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Goals of this talk
▪ Discuss my approach for building SPAs with VueJS and ASP.NET Core
▪ Ask and answer the logical questions I’ve asked myself while learning this process.
▪ Explain WHY certain libraries are used, instead of just saying “use this and that”
![Page 5: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/5.jpg)
8/20/2020
5
9SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Things you will NOT learn
▪ Everything about VueJS
▪ Everything about ASP.NET (Core)
▪ But – the examples should give you an idea of what’s going on.
10SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Architecture of a Single Page Application
ASP.NET Core Application
(Back-end)
• Data Access
• Authentication
• Authorization
Vue.JS Application
(Front-end)
• Routing
• State Management (Vuex)
• Data fetching (Axios)
![Page 6: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/6.jpg)
8/20/2020
6
Question: What do I need to know about Vue?
14SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: What do I need to know about Vue?
▪ VueJS is a client-side framework for building web applications.
▪ It is component-based.
▪ Each component can maintain its own:
▪ Template
▪ Styles
▪ State
▪ Properties
▪ Events
▪ Limited opinion
![Page 7: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/7.jpg)
8/20/2020
7
Question: How do I set up a VueJS application?
16SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 1: Installing Vue CLI
![Page 8: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/8.jpg)
8/20/2020
8
Question: Why use the Vue CLI?
18SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Why use the Vue CLI?
▪ Vue applications don’t require the Vue CLI to be built.
▪ The CLI helps tremendously in scaffolding the base application.
▪ Hot reload ensures you are always looking at the current code
▪ Version upgrades are easier because dependencies are hidden from you.
![Page 9: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/9.jpg)
8/20/2020
9
19SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
20SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
![Page 10: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/10.jpg)
8/20/2020
10
21SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
22SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
![Page 11: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/11.jpg)
8/20/2020
11
23SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
24SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
![Page 12: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/12.jpg)
8/20/2020
12
25SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 2: Create a Vue.JS Application
26SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Step 3: npm run serve
▪ Generates a “development” build of the application
▪ All JavaScript, HTML, CSS, and Images are built and combined – but for development
▪ Source maps allow for easy debugging
▪ Enables development server – which handles hot reload responsibilities and real-time rebuilding of the application.
![Page 13: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/13.jpg)
8/20/2020
13
27SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Tada!
Setting your ASP.NET Core Application
![Page 14: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/14.jpg)
8/20/2020
14
29SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Create an ASP.NET Core Application
30SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
When you’re done…
![Page 15: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/15.jpg)
8/20/2020
15
Question: How does a VueJS SPA work?
32SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How does a VueJS SPA work?
![Page 16: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/16.jpg)
8/20/2020
16
33SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How does a VueJS SPA work?
<App>
</App>
<Slot />
https://myDomain/routeA
Question: How do I tell VueJS what components to use for routes?
![Page 17: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/17.jpg)
8/20/2020
17
35SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How do I tell VueJS what components to use for routes?
36SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How do I tell VueJS what components to use?
![Page 18: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/18.jpg)
8/20/2020
18
Question: Does Vue download all my components when the page renders?
38SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: Does Vue download all my components when the page renders?
▪ Yes!
▪ Lazy loading is available *if* you don’t want that to happen.
![Page 19: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/19.jpg)
8/20/2020
19
Question: What makes up a Vue component?
40SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: What makes up a Vue component?
▪ There are several ways to build Vue components – and we cannot cover all them.
▪ In this architecture, we use Vue with “Single File Components”
▪ Three distinct sections:
▪ HTML template
▪ CSS styles
▪ Script
![Page 20: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/20.jpg)
8/20/2020
20
Question: What does development look like?
42SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Architecture of a Single Page Application (Dev)
ASP.NET Core
Application
(Back-end)
Vue.JS
Application
(Front-end)
Browser Network
https://localhost:14500
https://localhost:8081
![Page 21: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/21.jpg)
8/20/2020
21
43SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Architecture of a Single Page Application (Prod)
ASP.NET Core Application (Back-end)
Compiled Vue.JS
Application
Browser Network
Question: What if I want *one* url during development?
![Page 22: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/22.jpg)
8/20/2020
22
45SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Architecture of a Single Page Application (Dev)
ASP.NET Core
Application
(Back-end)
Vue.JS
Application
(Front-end)
Browser Network
Proxy
https://localhost:14500
46SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Set up the proxy
![Page 23: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/23.jpg)
8/20/2020
23
47SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Set up the proxy
48SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Set up the proxy
![Page 24: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/24.jpg)
8/20/2020
24
49SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Run Vue Development Server
50SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Run ASP.NET Core Application
![Page 25: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/25.jpg)
8/20/2020
25
Question: How do I deploy?
52SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Deployment
![Page 26: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/26.jpg)
8/20/2020
26
53SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Deployment
54SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Deployment
![Page 27: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/27.jpg)
8/20/2020
27
55SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Griff’s Tip
▪ Use the “outputDir” option in the vue.config.js file to set where npm run build will deploy its built files too.
Question: How does VueJS make API calls to ASP.NET Core?
![Page 28: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/28.jpg)
8/20/2020
28
57SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How does VueJS make API calls to ASP.NET Core?
▪ VueJS does not have a built-in AJAX or HTTP client.
▪ I recommend Axios – but *any* JavaScript fetch-based client will work.
▪ In newer browsers, fetch will work just fine.
58SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How does VueJS make API calls to ASP.NET Core?
![Page 29: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/29.jpg)
8/20/2020
29
Question: How do I share state between components?
60SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How do I share state between components?
▪ Manage state in a higher level component
▪ Great for downstream data
▪ Horrible for upstream data
▪ Difficult to keep state in sync
![Page 30: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/30.jpg)
8/20/2020
30
61SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: How do I share state between components?
▪ Use a global state management library, such as Vuex
62SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
Vu
eJS
Ap
plic
atio
n
Vu
ex
State
Actions
Mutations
![Page 31: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/31.jpg)
8/20/2020
31
63SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
▪ “State” is an object that is available to any Vue components that request it.
▪ Objects in state must be pre-defined for change tracking.
64SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
▪ “Mutations” are processes that change state.
▪ Change will bubble out to any components that need to know about them.
▪ How do you call a mutation?
![Page 32: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/32.jpg)
8/20/2020
32
65SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
▪ “Actions” are methods that trigger one or multiple mutations.
66SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
▪ State can be unloaded into a component via the “mapState” helper.
![Page 33: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/33.jpg)
8/20/2020
33
67SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Vuex in a Nutshell
▪ Actions can be called via the “mapActions” helper.
Question: Authentication?
![Page 34: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/34.jpg)
8/20/2020
34
69SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: Authentication?
▪ Cookie Authentication
▪ Works well in same-domain systems
▪ Very well supported in ASP.NET Core
▪ Automatically sent to the server on a request
▪ Easy to revoke
▪ JWTs (JSON Web Tokens)
▪ New “hotness”
▪ Not necessarily more or less secure than Cookies.
▪ JSON-based, so you can add metadata to the token
▪ Not sent to the server by default.
▪ In ASP.NET Core, you need to write your own refresh and revoking processes.
70SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Question: Authentication
▪ Do not confuse “authentication” with “authorization”
▪ Never trust *anything* on the client
▪ Server will always be the single point of truth – and this is for your protection!
▪ Handle your errors!
![Page 35: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/35.jpg)
8/20/2020
35
71SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Sample Code
github.com/1kevgriff/sample-spa-vuejs-aspnetcore
![Page 36: Single Page Architectures with Vue.JS and ASP.NET Core...2020/08/20 · Discuss my approach for building SPAs with VueJS and ASP.NET Core Ask and answer the logical questions I’ve](https://reader036.fdocuments.us/reader036/viewer/2022062609/6101dc11656010575268965e/html5/thumbnails/36.jpg)
8/20/2020
36
73SLIDE |@1KEVGRIFF | [email protected]© 2019 Swift Kick
Thanks for joining me!
twitter.com/1kevgriff
kevgriffin.com
swiftkick.in
Kevin Griffin
Owner, Swift Kick