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 developme...
For further actions, you may consider blocking this person and/or reporting abuse
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.
I have many experiences with Angular and React in my projects at the university but they are usually not as wonderful as i expected. Angular was great but too complex. I don't have any emotion with React - It was too bad for me. - Then i choose Svelte 3 for both my Web Subject and my University Graduation Thesis. It didn't disappoint me.
I'm creating a project, mostly for my own use. I first wrote it in Vue.js, then moved it to Mint, and not I have it on Svelte v3. The Svelte version is the easiest to maintain and expand. But it also respond the fastest to UI changes. Since it is a desktop application using nw.js, the speed is much appriciated. People understand UI delays on a web page, but not for a desktop application.
I think it would be better if you put the
<script>tag at the top, as it would make it easier to know where the variables comes from. And also, this is good :)Hm, that's a fair point! Since Svelte builds everything down to a bundle it shouldn't be a performance issue to put the
<script>at the top. However, I tend to read code from the markup first, then dive into the functionality if need be. Personal preference more than anything 🤷♀️I'm doing Maximilian's Svelte course, he puts script section at the top and it does look nice. He uses npm and only for CLI to get rollup to build and to start dev webserver. Highly recommend him and his course - on Node too.
I've taken that course too. It covers everything. The one gripe is that when it comes to Sapper, he refactors the existing pure Svelte SPA cours project, which I can't follow. Better would be a tiny program in Svelte/Sapper.
Other than that, the course is well worth the $12 for lifetime access.
You can find it on udemy.com.
Seriously, React Suspense for data fetching , plus React Hooks for business logic are gonna throw other frameworks out of water.
That's kinda the point of svelte - it's not a framework (in the sense that it's all compiled to vanilla JavaScript and there's no additional overhead).
I'm a huge fan of the concepts of svelte for that reason, so while React is certainly the heavy hitter at the moment, I'm hopeful the trend moves more where svelte is heading
Seriously? React Suspense + React Hooks will inflate fatty React even more. No thanks!
React Hooks is what Svelte 3 is inspired from, so your comment already shows a distinct lack of knowledge and ignorance towards the subject matter.
Having said that, Suspense looks interesting and there isn't a way to replicate the exact same sort of thing in Svelte right now.
However, framework choice is about trade-offs, and right now, React has far more impactful trade-offs when compared to Svelte or Vue. I don't think anything is getting blown out of the water just yet.
What do you mean by
Suspense looks interesting and there isn't a way to replicate the exact same sort of thing in Svelte right now.In Svelte we have the #await block :)
I"m excited about Svelte. I think in the near future I'm going to do a project in it.
I started playing with svelte this week and I gotta say it really feels like an enlightened experience.
Frankly I don't want to look at React or VueJS ever again. They are both easy enough to get going with especially with prior experience but Svelte literally takes the prize in how easy it is to get something up and running... almost all the same features, way less code.
I'm beginner coder who is trying to understand React and Vue but can't get what to start from... I'll try your starter template. Thank you!
Omg that's awesome, thanks for the interest! Please don't hesitate to reach out to me on Twitter or elsewhere if you get stuck. I tried to make everything clear but learning any new tool can be hard, especially with a newer framework like this 😊
What stops me from using Svelte:
That, you will up writing more in your templates, not less. You will get lost eventually when you have a long content in the each or if blocks. You might forget to close the blocks or misplacing the closing tags.
That will look messy and hard to read when you have nested blocks.
It isn't the best "framework" for developer yet. Might be in the future if they evolve to the right direction.
Any way to do the compile in the browser? I'd like to compile only on commit. I did this with coffeescript several years ago and loved it!
Oh, and how easy is it to use with other libs. I'm thinking about Bulma and hyperscript (the h() function). The h function may not be all that necessary?
No. The point of Svelte is that it is compiled up front, meaning the browser has less work to do. That's a core principle of how Svelte works.
As for how easy it is to use with other libs, I use Bulma, various vanilla js libraries and plugins, and they all work a lot more smoothly than they do with other frameworks or libraries. Svelte hinders you less when it comes to playing nice with other things.
I agree, I made a video about it here: youtube.com/watch?v=rMBusx68ujY
Long Live Svelte/ Sapper...
Wow. I remember stumbling upon Svelte long time ago and it seemed a bit like a toy then. Looks like it developed nicely. I'd like to give it a try in near future.
Started playing with it today and felt at ease, only thing is I can't get it working with parcel yet!
I like how it feels its actually working with me rather than the other way round!!
Papas for a brand new toy 😎
I'm also learning svelte right now. I think it's pretty clean. I'm looking to build a prototype project soon with it.
I've translated this article to Spanish in case anyone is interested: developinginspanish.com/2019/09/08...
The template system feels a lot like angular
HI Ben,
Thank you for the article. Do you know of any numbers comparing the performance of Svelte vs React or Angular?
There are some, last check it was 33x faster than React. However the numbers are meaningless, as a user is never going to notice that level of performance in their browser, and the code which demonstrates the crazy speeds in these metrics is entirely useless.
The net result is, though, due to avoiding shadow dom and dom diffing, and compiling up-front, as well as a number of other optimisations, it is significantly faster than anything out there right now.