Meteor & Svelte – Building Full-Stack Reactive Web Applications – 01: Introduction & Setup
Subscribe On YouTube
- Episode 1: Introduction & Setup
- Episode 2: Working With Svelte In Meteor
- Episode 3: Collections
- Episode 4: Writing Data
- Episode 5: Deleting Data
This is the first episode of the new Meteor & Svelte tutorial series. By using Meteor and Svelte you can build modern reactive web application with easy.
The frameworks makes data management and access extremely easy. It providers full-stack reactivity, allowing your UI to seamlessly reflect the true state of the data which is managed in the back-end with just minimal development effort
Svelte is a new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
In this first part of this tutorial series you’ll learn how to get Meteor installed on your system and create a new project from scratch. Let’s get started …
What is Meteor?
One of the core and fundamental concepts of Meteor is reactivity. This feature gives you real-time syncing of data between client and server across all application instances.
Instead of just polling the server for updates every few seconds, a Meteor app is maintaining a low-data connection to the server. This allows the server to send data to the client instantly. All changes of data are reflected to all client instances automatically and without significant delay.
Reactivity is even more: When a piece of data is changed on the client the application is able to render the required UI changes before the data gets sent to the server. For the user that has the effect that UI changes are available instantly without any delay.
Meteor’s website can be found at meteor.com:
What is Svelte?
Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. This means no virtual DOM, no frameworks on top of frameworks, and no framework to load at runtime which is a very big deal.
The project’s website can be found at svelte.dev:
Combining Meteor and Svelte gives you both:
- A modern reactive full-stack framework approach with Meteor
- Efficient, modern, and compiler-based front-end development approach with highly optimized standard JS output
So let’s get started and explore the power of combining Meteor and Svelte in this tutorial series …
Installing Meteor is very easy and can be done via the command line. If you’re working on Linux or macOS use the following command to install the latest version of Meteor globally on your system:
$ curl https://install.meteor.com/ | sh
Don’t mind if you have already installed a former version of Meteor. The installation procedure will recognize any previous version of Meteor and run the steps which are needed to update Meteor to the latest version.
If you’re working on a Windows platform you need to execute the following command at the command line:
$ choco install meteor
This requires you to make sure that Chocolatey is installed first (https://chocolatey.org/install).
Creating Your First Meteor Project
Having completed the installations of Meteor successfully we’re now ready to go and create a new Meteor project by using the meteor command in the following way:
$ meteor create my-meteor-app
This command creates a new Meteor project in folder my-meteor-app. You should then see the following output on the command line:
Running The Meteor Project
Now that the project is created you can change into the newly created folder by typing in
$ cd my-meteor-app
and then execute the meteor command without any further parameters:
This is starting up the web server at port 3000 and you should be able to access the output of the default Meteor web application by pointing to URL http://localhost:3000 in your browser.
Advertisement: Svelte.js - The Complete Guide
- Svelte.js from scratch, with zero knowledge assumed
- All the theory and practical applications of Svelte
- Core concepts and advanced techniques to build Svelte applications
* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!