Any web dev who's been at it for a few years has likely heard this question every other day.
I'm really interested in learning about web development, but I don't know how to start. Any suggestions?
A decade ago, this would have been an easy answer. Just make an index.html, throw some tags in there, make that header turn red with CSS, and reach for JQuery (or plane ole JavaScript, depending on who you ask) to handle those mouse clicks!
...Oh, how things have changed. Now we're running around with build tools, client side routing, special frameworks with fancy runtime scripts, binding "this" everywhere, template literals, CSS-in-JS... how do we choose what matters most? 🤷♀️ We can't start teaching how React uses a virtual DOM if someone doesn't even know what the DOM is!
This has led to countless avenues to start with with varying degrees of "just type this now, and I'll explain later." Some encourage beginners to just learn React or Vue right away to get started with modern practices, while others scream from the mountaintops that beginners should always start with the fundamentals. Truthfully, there are merits to both approaches. The former can get newbies excited with hot reloading and components, running the risk of leaving too much to the unknown, while the latter gets beginners understanding how DOM manipulation works under the hood, while possibly steering people away with the complexities of JS we've since abstracted away.
What we need, then, is a middle ground. A way to get started with the fundamentals while soaking up modern concepts like component-driven development, scoped vs. cascading CSS, templating, declarative functions, etc etc etc.
Enter: Svelte
SvelteJS is a pretty new kid on the block just starting to get some attention. Some may know it as the most popular write-in for the State of JavaScript 2018. For the abridged explanation, Svelte is meant to be the framework that isn't really a framework; it's basically a tool to compile components down at the build step, allowing you to load a single bundle.js on your page to render your app. This means no virtual DOM, no frameworks on top of frameworks, and no framework to load at runtime.
These are pretty big selling points for more experienced developers, but most beginners probably couldn't read that last paragraph without their head exploding. Luckily, it's not this compilation sorcery that makes Svelte so beginner-friendly. It's actually the syntax.
If you've never seen a Svelte component before, here's a really basic example:
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p>
<style>
/* here's some scoped CSS */
.pretty {
color: red;
}
</style>
<script>
/* ...and a variable we can access in the markup */
let name = "Ben";
</script>
Let's unpack this a little. So first off, it's worth noting that all of this can live inside a regular .html file, or a .svelte file if your heart desires. Also, we see some familiar tags reminiscent of framework-less development: <style> and <script>. Sadly, writing styles and JS in these tags is necessary for properly building scoped components, but it allows syntax highlighting to work without extra text editor extensions like CSS-in-JS solutions. Plus, Svelte's build step is smart enough to scope any component-specific styles by default, so you won't have styles bleeding between components.
You'll also see some magic happening with that JavaScript variable called name. This is a shiny new concept for Svelte v3, where any variable in your component's script is accessible from markup. Thus, there's no framework specific syntax to learn for state management, so no Angular $scope, no React this.state, and no Vue data. Instead, we can just use lets everywhere to get assignable state values, cuing re-renders whenever these values change.
This freedom from this jargon means making a component can almost feel like whipping up a CodePen, but without wondering how to connect that declarative JS function you learned to some DOM query selector. Don't worry too much though: Svelte won't mess with callback functions or window listeners, so those fundamentals remain.
The other nice thing about these components is that they're just as import-able as a traditional component. Just import the .html and Svelte knows how to unwrap it 😊
<div>
<Wizardry />
</div>
<script>
import Wizardry from './wizardry.html'
</script>
Neat, but hang on a minute...
Some readers may find this concept as mind-blowing as I do, but others probably have their pitchforks ready at the thought of throwing this at beginners. Won't this confuse them about how DOM manipulation really works?
The answer is... maybe. But when someone's just starting out (at least from personal experience), it's okay to accept a little abstraction for the sake of making cool things more quickly.
Also, just as languages like Java and JS have abstracted away pointer management with garbage collection, it feels like most every modern web development tool has abstracted away DOM manipulation, save for more advanced edge cases beginners likely won't need to face. Btw, if you are scratching your head at what pointer management is, I think that kind of proves my point 😛 Thus, rather than forcing beginners to manipulate the DOM or grasping framework-specific state wrappers, why not just let them access variables directly from markup? Now they can learn the basic principles of component state without getting caught in the weeds.
Okay I see your basic example, but Svelte must have some framework-specific weirdness to make everything work
Admittedly, this is true, but it's a lot less than you might think. One Svelte-y syntax is for looping and conditionals for displaying DOM elements. This works a lot like the JSX way of returning elements from a map, but without all the nested brackets beginners (and myself) can easily get lost in. Here's a basic one that generates a list of a elements from an array:
<ul>
{#each profiles as profile}
<li>{profile.name}: {profile.role}</li>
{/each}
</ul>
<script>
const profiles = [
{name: 'Wes Bos', role: 'React extraordinaire'},
{name: 'Chris Coyier', role: 'Father of CodePen'},
{name: 'Cassidy Williams', role: 'Letting you know it's pi time'}
]
</script>
Again, I understand any criticisms about the syntax, but what I love is how easily understood it is. Instead of nesting JavaScript in our HTML, we just say hey, lemme loop over this array and create an element for each one.
There's another Svelte oddity worth mentioning that I'm admittedly not as thrilled about: passing props to components. Yes, it is fully functional and easy to learn, but the syntax is a bit too magical for some people's tastes. To handle props, we simply pass the prop to the component wherever it's imported...
<!-- somewhere.html -->
<Profile coolGuy="Scott Tolinski" />
...and get that variable as an exported "let"
<!-- profile.html -->
<p>{coolGuy}</p>
<script>
export let coolGuy = '';
</script>
I totally understand if some are turned off by abusing "export" like this, but it does at least follow the way beginners should conceptualize modules: we export what we should access outside of the component, and import what we want to show in our component.
I might be able to get past that strange-ness... but how about that build step?
So another criticism about getting beginners started with frameworks is the need to use a package manager. Which means... gasp using the terminal!
Look, I get it, popping that thing open can be intimidating, with its monospace font and that spooky "cd" to jump directories. But to be fair, it's really not a huge hurdle when you only need a single command to get running. Additionally, the integrated terminal within VS Code makes it dead simple to get started with; it even plops you down in your current project directory!
Svelte actually offers a downloadable starting point that's nice outside of the box, but I made my own starter template that just uses the build tool Rollup for live reloading. In fact, the config file is under 30 lines long! For a basic Svelte project, these is all the directories and files you need:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
Just add a command to run the build step in the package.json and you're all set! You could certainly say that all the extra modules and files other frameworks need aren't a problem if beginners don't touch them, but in my eyes, the less extra stuff for newbies to wonder about, the better.
Okay fine, it's cool and beginner-friendly. But is it a stable framework?
This is a very relevant question for a framework as young as Svelte. All examples I have shown use the syntax of Svelte version 3, which is still in beta as of the time of this writing has a relatively small following compared to framework behemoths like ReactJS and VueJS. So as exciting as it is, I would wait another few months before rushing to teach code workshops with it. Still, Svelte offers a really concise page for documentation for version 3 that can ease beginners into the framework without getting overwhelmed by subpage after subpage of explanation.
So let's go over some of the main selling points for learning web development with Svelte:
- It's a component-based framework with 0 extra plugins
- It handles state management without all the usual cruft
- It uses scoped styling without needing CSS-in-JS (so no editor extensions or wacky syntax)
- It only needs a dead simple build script to get going
- Hardly any files are needed in a base project
Of course, it's totally fine if I haven't convinced you with this post; all good posts stoke a little controversy! But I hope it at least showed you how freaking cool and simple Svelte can be to learn.
Learn a little something?
Awesome. In case you missed it, I launched an my "web wizardry" newsletter to explore more knowledge nuggets like this!
This thing tackles the "first principles" of web development. In other words, what are all the janky browser APIs, bent CSS rules, and semi-accessible HTML that make all our web projects tick? If you're looking to go beyond the framework, this one's for you dear web sorcerer 🔮
Subscribe away right here. I promise to always teach and never spam ❤️
Top comments (59)
I have one thing that prevented me from using Svelte. I can't figure out how to bring in a stylesheet from node modules. I've tried importing it in both js and css. Nothing happens.
I asked about it in their discord and got ignored. Kinda sucks...
Yeah, this is a notable issue since their "native" styling solution doesn't allow for preprocessors like SASS. I personally never use a preprocessor so it doesn't bother me, but I get the frustration. Same goes for typescript support atm but it's in the works!
Right. I was just trying to bring in Normalize.css and Bulma.css for a little project and couldn't for the life of me figure it out haha
can't you use
<svelte:head/>to achieve this?I have no idea. Tbh
You should be able to do a standart style or script include in the
template.htmlI guess I am just so used to importing CSS files in JavaScript, the React way. Thanks! I'll give it another shot with Svelte
You can do this too, but the proper way is to use svelte.preprocess.
The reason I don't import directly into components (other than sass variables) is because Svelte strips unused classes, and your imported CSS is going to have a lot of bloat which will need to be stripped, which will result in long build times.
That makes a lot of sense. Thanks! I plan on giving Svelte another go here soon.
Hi Brian, Ben, et all reading this. For those trying to put Svelte and Bulma together in a project, by coincidence I recently was trying to do the same thing, I think I solved and inside Svelte components it recognizes Bulma. Would be great if I can get oppinnions from you guys, as I was thinking to post some article on next days or make a full example maybe connecting it to a REST api, but now reading this great posts and yor comments, maybe I should investigate about svelte.preprocess first to give it a try.
Anyway, here you have the github link: github.com/jumanja/SvelteBulma
Cheers,
Juan
jumanja.net
Ah I liked how you did that!
Importing it in your css file. Pretty clever. That makes it easier, reminds me of how it's done in Next.js too.
This is exactly what I needed @jumanja . Thank you!
That's why the svelte compiler has a preprocess option. It is very much allowed.
This module, and its docs, have never failed me.
npmjs.com/package/svelte-preprocess
that's what make it more better
Just use sass preprocessor and then import anything with @import from anywhere you want
github.com/kazzkiq/svelte-preproce...
If you're using the Rollup template, the simplest way I found (that should work with Sapper too), is to use
rollup-plugin-postcss.You can see an example here.
The main idea is to create a SCSS file that imports the stylesheets from the
node_modules, and import it in your component.If you are still looking for an option to import an external css please try this..
its a bit experimental but it works.
-- script--
import {onMount} from 'svelte';
let rootElement;
function loadExternalCss(parent, file) {
let element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css")
element.setAttribute("href", file)
parent.appendChild(element)
}
onMount(() => {
loadExternalCss(rootElement, './yourfolder/yourfile.css')
})
--/script--
in the html markup add this to the root element.
bind:this={rootElement}
this way you can even have css variables syntax support and also it works in svelte custom elements .
If I'm not mistaken, Svelte is from the creator of Ractive.js, which I really enjoyed when I was building an app with it. I like how Svelte pushes some of sweet Ractive's ideas to the limit – Ractive compiled templates to functions, so re-renders get pretty lightweight, and Svelte compiles the whole source file into a frameworkless script. A nice feat, I think! This is how I'd like web frameworks to be.
Yea, Ractive was great, but too underestimated (( I hope Svelte will become more popular. Btw, maybe you would like to join us to Telegram channel: t.me/sveltejs
IMO Ractive hit a really bad timing. Just when it started to get some attention, React was announced and of course people went for something from Facebook.
Another underestimated framework was MithrilJS.
And i still say - make index.html toss in some tags add in css and then some vanilla JS. Nobody should start with build tools, libs and all the rest stuff. Once you learn basics then go with what is need for project (maybe angular, maybe vue, whatever is needed).
This. Please, lets start with semantic HTML and well-written styles.
For new people, the interactive tutorials and live playground (repl) are very helpful!
(Both links are v3, which is nearing release)
I have been doing React for the past two years. After watching the Rethinking Reactivity talk from Rich I am now a convert. Now doing all my new dev projects on Svelte and I am re-writing one big React app on Svelte.
How's it going? Any complaints? Anything missing in Svelte that you really wish it had?
Just saw Rich Harris talk. It's really amazing🙌
I've been keeping an eye on Svelte since seeing Rich Harris do his presentation at JSConf 2018. The early versions had some weird requirements in terms of code structure - that were tolerable given the benefits it provided - but v3 is a massive improvement. It now feels really effortless to write component-based applications: so little boiler-plate but plenty of power :)
Not sure it's established enough to use in a large production app just yet; but all my personal projects are going to be written using Svelte from now on.
For complex server-rendered apps with Svelte components also see Sapper
I'd heard about SvelteJS but hadn't really looked into it. So basically everything in one file with regular HTML tags like
<style />and<script />. Seems pretty painless and stuff like theforeachsyntax isn't that foreign for anyone whose done Handlebars or Meteor's Spacebars, i.e.#each.Thanks for the writeup. Looking forward to your next post Ben!
not a new dev, but as a server-focused dev Svelete is useful for 2 primary reasons:
The second point: Built in template reactivity, is comparable to Go's build-in concurrency. Game changer that future frameworks can't do without.
Reminds me a lot of Vue. I'm curious as to the advantages this might have over just using Vue. Not having to put something within a data property isn't really much of an advantage, so there must be something else, no?
From the article:
That's the big difference with Svelte - it exists only at build time, outputting self-contained components with no runtime library to load. The ideas behind it are spelled out by the creator in this talk:
The combination of simplicity and small runtime size/sheer speed is what has attracted me to Svelte, and the upcoming V3 looks to improve even more on both fronts.
Seems Vue should remind you Ractive a lot. Svelte is the next step from the best Ractive's ideas to most modern approaches. Vue would always be only the catching-up imitator.