Meteor
Posted By Sebastian

Meteor & Svelte – Building Full-Stack Reactive Web Applications – 01: Introduction & Setup


Subscribe On YouTube

Episodes

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.

Meteor is on open source full-stack JavaScript frameworks to build responsive and reactive web, desktop and mobile apps. Meteor is fully based on JavaScript and covers back-end and front-end. This means you can use just one programming language in all parts of your application.

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

On the client side Meteor makes it possible to use modern JavaScript front-end frameworks like Angular, React, Vue, or Svelte. In this tutorial series we’re going to use Svelte exclusively.

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?

Meteor is a reactive, full-stack JavaScript framework that allows developers to write single page web applications, desktop applications, and mobile applications.

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:

10.png

What is Svelte?

Meteor is a full-stack JavaScript framework covering both: back-end (server) and front-end (client). For the client part of the application Meteor offers you support for the most relevant JavaScript front-end frameworks like Angular, React, Vue, and Svelte.

In this tutorial we’ll make use of Svelte. Svelte is a front-end JavaScript framework with a new approach to building user interfaces and is like the new kid on the block when it comes to JavaScript-based front-end development.

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:

20.png

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

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:

30.png

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:

$ meteor

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

Build high-performance web applications with Svelte.js – a lightweight JavaScript compiler:

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

Go To Course*

* 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!


Using and writing about best practices and latest technologies in web design & development is my passion.