Slides from the 8/27/2019 MKE JS Meetup. Goes through an overview of VueJS, the tools in the ecosystem, and how to build a Single Page Application (SPA) with VueJS.
25. How many of you have used
ReactJS, AngularJS, or
something similar? ✋
26. Let’s do a quick comparison
between Vue + React & Vue +
Angular
27. Let’s do a quick comparison
between Vue + React & Vue +
Angular
I’ll do my best being out of the ReactJS and Angular
communities for some time
https://vuejs.org/v2/guide/comparison.html
30. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
31. Angular is built heavily on TypeScript, VueJS it’s
optional
https://buttercms.com/blog/comparing-angular-vs-vue
Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
32. https://buttercms.com/blog/comparing-angular-vs-vue
Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
33. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
34. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
Angular is MVVM (Model-View-ViewModel)
40. React is Backed by Facebook
React uses JSX. Vue allows you to use Web
Components ❤ or JSX
Official packages (state management and router)
for React are 3rd Party
https://buttercms.com/blog/comparing-angular-vs-vue
41. React is Backed by Facebook
React uses JSX. Vue allows you to use Web
Components ❤ or JSX
Official packages (state management and router)
for React are 3rd Party
https://buttercms.com/blog/comparing-angular-vs-vue
React has React Native. VueJS has ports like
NativeScript
43. So why I love Vue!
1. The documentation is incredible
44. So why I love Vue!
1. The documentation is incredible
* Third party docs are amazing as well!
45. So why I love Vue!
2. Ability to use Web Components
46. So why I love Vue!
2. Ability to use Web Components
All Javscript, Template HTML, and
CSS are in one re-usable file
47. So why I love Vue!
2. Ability to use Web Components
All Javscript, Template HTML, and
CSS are in one re-usable file
With slots, it’s even more reusable!
48. So why I love Vue!
3. State Management and Router are
NOT 3rd Party!
49. So why I love Vue!
3. State Management and Router are
NOT 3rd Party!
That’s right! Vue-Router and Vuex are
official.
50. So why I love Vue!
4. Not maintained by a large
corporation
51. So why I love Vue!
4. Not maintained by a large
corporation
This may sound weird, but I love how
Vue is run and managed.
60. Next, we have the vue-router
library
https://router.vuejs.org/
61. Vue Router takes care of
• HTML 5 History API Management
• Navigating without full page reloading
• Nested Routing
62. With Vue Router you also get
features like:
• Named Routes
• Route Meta Data
• Redirecting
• Hooks that can be used for guarding and
authorization.
64. Last but not least, we have the
Vuex library
https://vuex.vuejs.org/
65. Vuex is Vue’s version of Redux
for React. It’s a “state
management pattern +
library” inspired by Redux and
Flux
66. For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”
67. For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”
That’s by far the best definition of when you should use a flux library.
68. Vuex handles the state for
your large scale SPAs.
State is made up of modules
which in turn have:
• Localized State
• Getters
• Mutations
• Actions
74. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
75. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
76. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
•Usually communicates to some sort of API to
retrieve data
77. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
•Usually communicates to some sort of API to
retrieve data
•You make an initial load of assets and then load
the rest on demand
78. What we are building
•Simple Contact Book
•We will have 3 Routes
•Contacts
•Contact
•Add Contact
•We will have Vuex for state, vue-router for nav
and Vue for display.
📒
81. 1. I set up a quick project using the Vue
CLI (Yup, they have that too). Which
installed Vue, Vuex, and Vue Router.
82. 2. Next I installed Axios.js for HTTP
requests.
https://github.com/axios/axios
83. 3. I added two directories:
• ./src/api
•./src/state
84. 4. I added the contacts module and
imported it into the store.
85. 5. I added the contacts API and
imported it into the contacts module.
This allows us to keep our API routes
separate and easy to edit.
86. 6. I also set up a simple PHP API we
will hit. It has the following routes:
• GET /api/v1/contacts
• GET /api/v1/contacts/{id}
• POST /api/v1/contacts
• PUT /api/v1/contacts/{id}
87. This does not have authentication, you
will see the route in this presentation. It
will be accessible on the network.
Please be nice ☺