Svelte - Simplicity is best.

Github Repo

For your review, I created a small web application to show the value of Svelte at even the most basic level of web development, Svelte as a beautiful templating engine. Fork, Clone, Run, Copy, Use, Laugh, Shake your head etc... and enjoy.

I utilized a very small portion of Svelte tools in order to demonstrate re-usability of components. App.svelte, FormInput.svelte and Button.svelte have the code reflecting how easy re-usability is implemented with Svelte.

Note: I did not add functionality to the button or form input. The purpose of the application is to demonstrate templating functionality. As well, the app is not mobile responsive.

npx degit dbshanks/devTO-article my-new-app

cd my-new-app && npm install

npm run dev

You can view the live working demo here.

https://dbshanks.github.io/devTO-article

Introduction

There will be plenty of articles and video tutorials about creating complex idea's using the simplicity of Svelte.

I wanted to scale even further back and enjoy the most basic implementation of using Svelte as a design tool.

Not all of us have a need to build complex reactive apps, some of us are still building simplistic landing pages and general purpose online presence.

We deserve code sanity and maintenance friendly design. In the case of the design I have provided from my repo. Most would never utilize React, Vue, Angular and others to implement such a small project.

Svelte is the perfect tool for such a minimal use case. It is the component architecture I believe most of us had dreamt of back in 2015 when 'Component Architecture' was all the buzz and libraries were surfacing up all over Github.

Svelte remains minimal as it is a compiler that gets out of your codebase at production build. Projects like React, Vue and Angular are either libraries or full frameworks. With Svelte our application is just a minified bundle.js file connected to the HTML.

The Application

This is the structure of my SRC folder in a Svelte application. I am still a fan of separating my CSS/SCSS from component logic.

This format should still look familiar, the pattern is utilized in React, Vue and Angular. While Svelte is still young, I wanted to propose the idea of a solid project pattern or best practice concept for folder structures.

src
├── App.scss
├── App.svelte
├── components
│   ├── Button
│   │   ├── Button.scss
│   │   └── Button.svelte
│   ├── Footer
│   │   ├── Footer.scss
│   │   └── Footer.svelte
│   ├── FormInput
│   │   ├── FormInput.scss
│   │   └── FormInput.svelte
│   └── Navigation
│       ├── Navigation.scss
│       └── Navigation.svelte
└── main.js

Adding Preprocessor Support

If you want to add Sass or other preprocessors to your Svelte app. It's a very simple modification. Install the following NPM packages to your SvelteJS project. At this time, I am only able to verify consistency with either .sass or .scss files. Go ahead and experiment.

npm install svelte-preprocess node-sass

Add the following lines of code to replace the plugins section of 'rollup.config.js' file.

    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
            preprocess: autoPreprocess() // Add the autoPreprocess package to plugins.
        }),

Add 'svelte-preprocess' to your 'rollup.config.js' imports at the top of the file. svelte preprocess automatically detects the node-sass package and uses it during the development and build process. I leave the global.css untouched with exception to some minimal defaults.

import autoPreprocess from 'svelte-preprocess'; //Add autoPreprocess to import.

Now you're able to do either of the following. Inline your styles in the component directly.

<style lang ="scss">

$primary-color: red;
$secondary-color: blue;

h1 {
 color: $primary-color;
}

h2 {
 color: $secondary-color;
}
</style>

Or if preferred you're able to setup your stylesheet as an import as I have done by importing the Sass files between the style tags of the component.

<style lang="scss">
 @import './componentName.scss';
</style>

Summary

There is a lot of excitement about Svelte and its future as a goto tool for web application development. As demonstrated from my small application on the Github repo provided, the code requirement is minimal to get up and running with Svelte.

On the front end, it is a seemingly simple one page design. On the back end, the site has a fully reactive tool to scale as needed. As developers, we can push a simple application to start. In the future we can further develop a complex application to fit our projects scale requirements.

Hopefully I have enticed some to go and play with Svelte.

This was inspired by an article that Dave Ceddia wrote on implementing Sass into Svelte https://daveceddia.com/svelte-with-sass-in-vscode/