JS: Web APP

JS: Web APP

Starting a new project with NodeJS + Vite, Svelte, Jest & Adonis

Elucian Moise's photo
Elucian Moise
·

12 min read

Table of contents

Starting a project is a difficult task. As a software engineer, you need to select all the components, frameworks and tools required for a comprehensive project. You want your future application to be solid and reliable so you should pay attention to selecting modern and compatible parts.

NodeJS

Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a browser. It is built on Chrome's V8 JavaScript engine and uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js is often used to develop back-end web servers and applications, but it can also be used to develop desktop applications, mobile applications, and command-line tools.

Here are some of the benefits of using Node.js:

  • Performance: Node.js is very fast and efficient, making it a good choice for developing high-performance applications.

  • Scalability: Node.js is designed to be scalable, meaning that it can handle a large number of concurrent requests without sacrificing performance.

  • Simplicity: Node.js is easy to learn and use, making it a good choice for both beginners and experienced developers.

  • Versatility: Node.js can be used to develop a wide variety of applications, from simple web servers to complex real-time applications.

Node.js is a popular choice for developing web applications because it is fast, scalable, and easy to use. It is also a good choice for developing real-time applications, such as chat applications and streaming applications.

If you are interested in learning more about Node.js, there are many resources available online and in books. There are also many Node.js frameworks and libraries available, which can make it easier to develop certain types of applications.

Vite

If you add Vite to the tech stack, you would have a very powerful and efficient stack for developing web applications. Vite is a build tool that is known for its speed and simplicity. It can be used to build both front-end and back-end applications.

One of the biggest benefits of adding Vite to your stack is that it can significantly improve the performance of your development environment. Vite uses a technique called native ES modules to load JavaScript modules, which is much faster than the traditional way of loading JavaScript modules using scripts.

Another benefit of adding Vite to your stack is that it can make your code more modular and reusable. Vite supports code splitting, which allows you to break your code into smaller chunks that can be loaded on demand. This can make your code more efficient and easier to maintain.

Overall, adding Vite to your stack is a great way to improve the performance and efficiency of your web development workflow.

Here are some additional benefits of using Vite with Svelte:

  • Vite can automatically compile Svelte components into vanilla JavaScript, which can improve the performance of your production application.

  • Vite can provide hot module replacement (HMR) for Svelte components, which allows you to see changes to your components reflected in the browser without having to reload the page.

  • Vite can be used to bundle your Svelte application into a single file, which can make it easier to deploy your application.

If you are serious about developing web applications, I highly recommend adding Vite to your tech stack. It is a powerful and efficient tool that can make your development workflow much more enjoyable.

Svelte

Svelte is a modern front-end framework that rethinks how web applications are built. It is a compiler-based framework that converts your application code into highly optimized imperative code that updates the DOM efficiently and minimizes the bundle size.

Advantages

Svelte has several advantages over other frameworks:

  1. Lightweight: The generated bundle is very small, making it quick to load and fast to execute.

  2. Performance: Svelte's compiler generates highly optimized code, eliminating many of the performance issues that affect other frameworks.

  3. Ease of Learning: Svelte comes with a minimal set of concepts, making it easier to learn than other frameworks like Angular, React, or Vue.

  4. Productivity: Svelte provides developers with more efficient tools for building components, eliminating the need for boilerplate code and reducing development time.

  5. Developer Experience: Svelte encourages writing clean, easy-to-read code, using familiar HTML syntax and reactive programming techniques.

  6. Optional virtual DOM: Svelte allows developers to choose between using a virtual DOM or not, providing a flexible approach for building efficient web applications.

Overall, Svelte is a great choice for those who value performance, productivity, and a modern approach to web development.

Fundamentals

Here's a breakdown of the fundamental concepts required for building a Svelte application:

  1. Svelte Component: A component is a reusable UI element that can be created in Svelte using the <script> and <style> tags along with HTML code (using Svelte syntax) that defines the view.

  2. App.svelte file: The App.svelte file is the entry point of a Svelte application. It usually contains the root level component of the application, along with any routing or other configuration settings required for the app.

  3. Svelte Store: A store is a centralized state management mechanism in Svelte. It is a singleton object that can be accessed from any Svelte component through the import statement.

  4. Svelte Transition: A transition is an animation effect that occurs when an element is added, removed, or updated in the DOM.

  5. Svelte Lifecycle Methods: Svelte components have lifecycle methods similar to those in React and Vue.js. These methods provide hooks for developers to execute custom logic at specific stages of a component's lifecycle. The methods include onMount, onDestroy, beforeUpdate, and afterUpdate.

Here's a typical project structure for a Svelte application:

my-svelte-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.svelte
│   ├── main.js
│   ├── components/
│   │   ├── MyComponent.svelte
│   │   ├── MyOtherComponent.svelte
│   │   └── ...
│   ├── routes/
│   │   ├── Home.svelte
│   │   ├── About.svelte
│   │   ├── Contact.svelte
│   │   └── ...
│   └── stores/
│       ├── Counter.js
│       └── ...
├── package.json
└── rollup.config.js

  • The public directory contains the base HTML file of the application along with any other static assets.

  • The src directory contains the core application code. App.svelte is the root component of the application, main.js is the entry point of the application, and the components, routes, and stores folders contain reusable Svelte components, application routes, and Svelte stores, respectively.

  • package.json is the configuration file for Node.js/ NPM, which contains dependencies and other application settings.

  • rollup.config.js is the configuration file for Rollup, which is the module bundler used by Svelte.

I hope this gives you a good overall understanding of the Svelte file structure and fundamental concepts!

Start project

Here's a step-by-step guide on how to create a Svelte application with Vite, Jest, and Adonis back-end:

1. Install Svelte and Vite

To start, open your terminal and run the following command to install Svelte and Vite globally:

npm install -g svelte@next vite

2. Create a new Svelte project

Next, create a new Svelte project with the following commands:

mkdir my-svelte-app
cd my-svelte-app
vite init svelte

This will create a new Svelte project with the default project structure.

3. Install Jest

Next, install Jest as the testing framework:

npm install --save-dev jest @sveltejs/vite-plugin-svelte

4. Configure Jest for Svelte

Create a jest.config.js file at the root of your project and add the following code to configure Jest for Svelte:

module.exports = {
  transform: {
    // Use svelte-jester to transform .svelte files
    '^.+\\.svelte$': [
      'svelte-jester', 
      { 
        'preprocess': true 
      }
    ],
    // Use Jest's default transformer for JavaScript files
    '^.+\\.js$': 'babel-jest',
  },
  moduleFileExtensions: [
    'js',
    'svelte'
  ],
};

5. Add Adonis backend

Next, you need to create an Adonis backend for your Svelte application. You can follow the Getting Started guide for Adonis to learn how to set up a new Adonis project.

6. Run the Svelte application

Run the following command to start your Svelte application:

npm run dev

This will start a dev server at http://localhost:3000 where you can start building your Svelte frontend.

7. Run Jest tests

To run Jest tests, you can use the following command:

npm test

This will run all the Jest tests in your project.

Your job is not over yet. You need to install the UI components & CSS frameworks. Now the real challenge begins. Not all frameworks are reliable. Of course, you should consider the KISS principles first. However, this may limit your ability to create appealing interfaces. The balance is difficult to establish and requires experimentation.

Components

Selecting components for a modern web app using Svelte, a UI framework, Vite, and Adonis backend with MariaDB can be a time-consuming and challenging task. It's because there are many options available in each category, and it can be overwhelming to choose the best ones.

When selecting components, you need to consider several factors such as functionality, performance, compatibility, ease of use, documentation, and community support. Additionally, you need to ensure that the components you choose are compatible with each other and can work seamlessly.

As for the UI framework, the best one for your web app depends on your project's specific needs and requirements. However, some popular and highly recommended frameworks for Svelte are:

  1. Tailwind CSS: It's a popular and highly customizable CSS framework that allows you to design UI components quickly. It includes a wide range of predefined styles and classes that can be easily customized to match the design of your application.

  2. Materialize: It's a Material Design-based CSS framework that provides a set of UI components for web applications. It includes various UI elements such as buttons, forms, cards, and modals that can be customized to fit your project's requirements.

  3. Bulma: It's an open-source CSS framework based on Flexbox that offers a modern and sleek-looking UI. It includes a wide range of UI components such as forms, buttons, tabs, and modals, and it's highly customizable with SASS variables.

In conclusion, when choosing components for your modern quiz web app, be sure to do research and consider your project's needs and requirements. Nonetheless, Tailwind CSS is an excellent choice due to its high customization capabilities.

CSS frameworks:

  • Svelte Material UI is a Svelte component library that is based on Material UI. Material UI is a CSS framework that is based on Google's Material Design guidelines. Svelte Material UI provides a wide range of components that can be used to create a modern and stylish UI.

  • SvelteStrap is a Svelte component library that is based on the Bootstrap framework. Bootstrap is a popular CSS framework that provides a wide range of pre-built components and styles. SvelteStrap provides a lightweight alternative to Bootstrap that can be used to create a responsive and mobile-friendly UI.

  • SvelteFlat UI is a Svelte component library that is based on Flat Design. Flat Design is a minimalist design style that is characterized by its use of simple shapes, colors, and typography. SvelteFlat UI provides a clean and uncluttered UI that is perfect for modern web applications.

  • Svelte Particles is a lightweight Svelte component that can be used to create particles. Particles are small, animated elements that can be used to add a touch of interactivity and excitement to a web page. Svelte Particles is a great way to add a little bit of fun to your web application.

  • SmelteJS is a UI component library based on the combination of Svelte and Tailwind CSS. It offers a collection of Material design components (20+) aimed to help developers create nice-looking and responsive layouts.

Each of these Svelte CSS frameworks has its own strengths and weaknesses. The best framework for you will depend on your specific needs and preferences.

MariaDB

MariaDB is a relational database management system (RDBMS) that is a fork of MySQL. It is an open-source, community-developed database that is known for its speed, reliability, and scalability. MariaDB is compatible with most MySQL applications and is used by many popular websites and applications, including Wikipedia, WordPress, and Drupal.

Here are some of the benefits of using MariaDB:

  • Speed: MariaDB is very fast, making it a good choice for high-performance applications.

  • Reliability: MariaDB is very reliable, with a strong track record of uptime and performance.

  • Scalability: MariaDB is designed to be scalable, meaning that it can handle a large amount of data and traffic without sacrificing performance.

  • Open source: MariaDB is open source, which means that it is free to use and modify.

  • Compatible with MySQL: MariaDB is compatible with most MySQL applications, making it easy to migrate from MySQL to MariaDB.

Adonis

Adonis is a full-stack web framework for Node.js that is based on the Laravel PHP framework. It is a modern framework that is known for its simplicity, flexibility, and performance. Adonis provides a number of features to help developers build robust and scalable web applications, including:

  • Routing: Adonis provides a powerful routing system that makes it easy to define and handle routes.

  • Templating: Adonis provides a templating engine that makes it easy to generate HTML output.

  • Validation: Adonis provides a validation system that makes it easy to validate user input.

  • Authentication: Adonis provides an authentication system that makes it easy to authenticate users.

  • Authorization: Adonis provides an authorization system that makes it easy to control access to resources.

Adonis is a popular choice for developing web applications with Node.js because it is simple, flexible, and performant. It also provides a number of features that make it easy to build robust and scalable web applications.

Here are some examples of applications that can be developed with MariaDB and Adonis:

  • Web applications

  • E-commerce applications

  • Social networking applications

  • Content management systems (CMS)

  • Forums

  • Blogs

  • Wikis

If you are interested in learning more about MariaDB or Adonis, there are many resources available online and in books. There are also many MariaDB and Adonis tutorials and examples available, which can make it easier to learn how to use these technologies.

Jest

Jest is a good testing framework. A test framework will help you improve quality of your project. Implementing testing too late in a project can drag quality down and reduce the total value you can provide. Here are some features of the Jest framework.

  • Fast: Jest is very fast, making it a good choice for running large test suites.

  • Easy to use: Jest is easy to learn and use, making it a good choice for both beginners and experienced developers.

  • Flexible: Jest is flexible and can be used to test a wide variety of JavaScript applications, including Node.js applications, React applications, and Svelte applications.

  • Integrated with Vite: Jest can be integrated with Vite, which makes it easy to test Vite applications.

In addition to these general benefits, Jest is also a good choice for testing the specific technologies in the architecture we have described, such as Node.js, Adonis, and Svelte. Jest provides built-in support for testing Node.js applications, and there are also a number of Jest plugins available for testing Adonis and Svelte applications.

Here are some specific examples:

  • You can use Jest to test the functionality of your Node.js server.

  • You can use Jest to test the functionality of your Adonis controllers and models.

  • You can use Jest to test the functionality of your Svelte components.

  • You can use Jest to test the integration between your Node.js server, Adonis controllers, and Svelte components.

Overall, Jest is a powerful and flexible testing framework that is well-suited for testing the architecture of a web app created with NodeJS, Svelte, Adonis and MariaDB.

References

Disclaim: This article was created with help from AI bots. This is research I'm doing to select components and frameworks for my own app. Is not a guide for your project.

Did you find this article valuable?

Support Software Engineering by becoming a sponsor. Any amount is appreciated!

JavaScriptprojectsSvelteWeb Development