# Client Server Communication
When working with SPA's it is very common to fetch data from remote services. This allows for dynamic content to be displayed depending on certain applied criteria. Fetching of said data can be done in many ways, some of which are described below.
# Ajax Requests
Ajax requests to REST API's are the most common way of fetching data asynchronously from remote services. Requests are sent to a server, where data is processed. In the meantime, depending on the implementation, we can either have a callback based approach or the newer Promise based one, where we can wait until the process either succeeds or errors out.
# Summary (TLDR)
# Axios popular
Axios is a famous library for performing async requests. It has a very nice and easy to use API, supports Promises, more advanced features like interceptors, generating Axios instances, adding external plugins and more.
You can directly import Axios from NPM and use it in your components, without the need to install a dedicated plugin.
However another pattern you are more likely to implement is to write a "client" or a "service" where you create an Axios instance and use that instead of just importing axios everywhere. Not only does this make your application easier to test, through the use of mocking/stubbing, but it also allows you to centralise HTTP settings (Base URL and port for instance). Furthermore, it decouples your components from the internals of HTTP operations and REST APIs.
# Fetch
Fetch is a newer Promise based API that is integrated into modern Browsers.
Fetch makes it easier to make web requests and handle responses than with the older XMLHttpRequest, which often requires additional logic (for example, for handling redirects). - Working with the Fetch API - Google - Progressive Web Apps Training
You can also import a library like isomorphic-fetch for using fetch in Node.js environment, where it is not available.
To use it with Vue, you don't need plugins, you can just import fetch and start working.
# GraphQL
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What is GraphQL
- When does it make sense to use it
- Links to tutorials
# Vue Apollo rising star
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What is Apollo
- Common use cases
- Why use with Vue
- Links to tutorials
- Vue packages
# WebSockets
Unlike HTTP requests, which are one way communication from client to server, WebSockets allow for a realtime two way communication. This allows for implementing notifications, dashboards, chats, realtime interactions and more.
# Pusher popular
Pusher is service which offers an abstraction over Websockets, allowing users to use a simplified API to subscribe to realtime notifications. It implements the notion of channels and events, where a single channel can have multiple event types.
Pusher can be used for chats, games, location sharing and is most commonly used with frameworks like Laravel, when realtime communication with client is needed.
# Firebase
Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline. - Firebase Docs
Along with database, they offer authentication, static hosting, data storage and more. Thanks to their server-side libraries and REST api's you can connect Firebase to your existing backend. You can build realtime chats, dashboards, cross device notifications and much more.
Implementing Firebase into your Vue app directly with their SDK can be a bit of a hassle as you need to keep track of a lot of things, bind documents, etc. Luckily there is the official Vuefire package that makes it a lot easier.
# Feathers
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What is Feathers
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
# Meteor
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What is Meteor
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
# SocketIO
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What is SocketIO
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
Integrating Vue.js and Socket.io
# SSE - Server Sent Events
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
- What are SSE
- Common usages
- Why use with Vue
- Popular Vue Packages
- tutorials
https://github.com/tserkov/vue-sse#readme
# MQTT
This section could use a little bit of love.
If you're able to, please consider helping the Vue Community by contributing a PR.
You'll find a link to edit this page at the bottom.
MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It was designed as an extremely lightweight publish/subscribe messaging transport. - MQTT.org
You can use MQTT to transfer small pieces of data in realtime between devices. It is most commonly used to send sensor readings from low processor devices.