Open lukepuplett opened 1 year ago
524c
commented
1 year ago Hey @lukepuplett, I believe you will get a good introduction here: https://svelte.dev/ https://svelte.dev/tutorial/basics https://svelte.dev/docs https://svelte.dev/repl/hello-world https://kit.svelte.dev/
I could try to answer each of these questions, but I think there are people here who could come up with better answers. For now I leave you with these links 😊
benmccann
commented
1 year ago I sent a PR that hopefully answers most of these questions. If you'd like to use Deno, then the best way is probably https://github.com/pluvial/svelte-adapter-deno
lukepuplett
commented
1 year ago Thanks @524c but these are the very docs I'm moaning about :) sorry, I didn't make that clear.
Unless I'm mistaken they don't address the questions I have. These questions are fundamental from my perspective, as I need to know how it works to be able to reason about fitting Svelte into an existing project or a chosen toolchain or stack.
The docs at https://svelte.dev/docs only cover syntax, and the interactive tutorial https://svelte.dev/tutorial/basics seems to also be syntax.
Also, thanks @benmccann I'll take a look, but right now, without a clear mental model for how Svelte works, I can't reason about how this will help, only that it will somehow and it reassures me that people do use Deno and Svelte...Kit.
My feature suggestion is: explain how it works in the documentation.
Describe the proposed solution
I would like to see official written docs on how Svelte goes from source files a, b, c to output files x, y, z, and then how a browser requests and renders a page with Svelte markup, via whatever is serving that HTTP response.
When you know how it works, you can't remember what it's like to not know. So these answers and the docs look helpful to you. But to me, it's just syntax.
I don't expect answers here, I'll Google and read other blogs and watch YouTube tuts, but my point is that I'd expect this to be official written documentation.
Sorry to moan. Thanks for your time.
524c
commented
1 year ago Come on, I'll try to answer some things in a simpler way, but there are many layers of abstraction and concepts involved about how Svelve works and what are the fundamental differences between it and other frameworks.
A Svelte file is "much like an HTML file", but see them more like a template. In it there is a part dedicated to logic and you put it inside the <script> </script> tags.
You have the style part that you put between the <style> </style> tags.
And the part of the structure itself of the page (html) you put loose in the file and don't use any additional tags.
Behind the scenes, Svelte processes this template and delivers this already rendered material to the browser.
About de compile: Older frameworks use a sort of proxy to create a state relationship between the logic that exists in your code and the dynamic events that happen on what you see on a page in your browser (a virtual DOM). So this state maintenance comes at the cost of time and the size of the libraries needed to make this happen.
<script>
let count = 0;
function increment() {
count++;
}
</script>
<h1>count: {count}</h1>
<button on:click={increment}>Increment</button>Explaining what basically happens in the code above.
Svelte needs to "edit" the DOM and adjust the displayed count value every time you click the button. It does this by understanding what your code is doing and adds (compiles) the extra code that does that for you. It keeps track of the count variable, and every time it changes, Svelte edits all references to the count object in the DOM. So if this variable count appears in more than one place, it will always be up to date.
Svelte is who does what I tried to explain above. Svelte kit is a framework that uses Svelte and creates for you a bunch of extra facilities, like a powerful route management system, for example, and many other things.
I recommend that you use the Svelte kit in your projects.
Hands-on works very well, you learn by doing, instead of wanting to understand how Svelte's compiler works before understanding basic contents. My recommendation for you is to take a step back and study more basic concepts, about how a template works, what is the DOM, among other primary things, and start studying Svelte. Try to take it easy and less anxiety 😁
lukepuplett
commented
1 year ago Thank you so much for this, Roger. I really appreciate that I'm taking your precious time.
The thing is, it still focuses on syntax (what to put in the .svelte files) and on how it does the reactivity. But it doesn't answer any of the questions I listed.
I don't understand what Svelte outputs (or even which tool compiles it) and how a HTTP request arrives at say, Deno or Node or even a .NET executable or perhaps some kind of server process that SvelteKit runs, and what is returned.
What does the server return as a response? It must obviously be HTML, so how is that achieved?
Does Svelte compile everything to a single static .html file and a single big .js file that the HTML file references? And then maybe Deno (or whatever) needs coding to locate and serve these two static files?
Or does it only make a giant .js file perhaps and I have to create my own outer HTML file and serve that with a reference to the .js file and perhaps a <div> with a special id for it to inject its elements into?
Does that make sense? I have no model of how it compiles, what gets output and how it gets served.
An explanation for this seems missing in the docs, and yet I need to know. Perhaps I'm the only person in the world to arrive at Svelte without coming from Vue, React or Angular and everyone just assumes it works the same way.
Thanks. It's obviously incredibly useful to get answers here, but my point is that this needs covering as "learning step 1" in the docs :)
524c
commented
1 year ago I understand what you say, but it's a technical documentation, very good by the way, made for programmers. Some things are taken for obvious and that's normal. Otherwise, it would be tedious for the vast majority of the public.
But I believe that this is not the channel for this discussion. What I wanted was to give you some guidance. If you study the basics, you'll understand Svelte. Good luck :)
lukepuplett
commented
1 year ago I've found something aimed at new developers which is more like what I need.
https://svelte.dev/blog/svelte-for-new-developers
But it starts off at "computing ground zero" and then makes a breathtaking leap into a set of concepts far beyond the target audience before abruptly ending, the author having looked up at the colossal mountain of knowledge they'd need to impart to explain how to build a website using a modern approach.
benmccann
commented
1 year ago I've updated https://svelte.dev/docs#getting-started some more. I think it answers the majority of the questions you posed. It's hard to strike a balance between giving all the necessary details and not getting lost in the weeds up front, but hopefully there's enough info to help users get oriented more quickly. We want to abstract a lot of this away because some of what you're asking is basically how would you implement your own version of SvelteKit and the answer is that it's way too much work and not something 99.9% of users are going to want to do. I'll answer your questions individually below
Should I use Svelte, or SvelteKit?
Both. You probably want to use SvelteKit which means you will also be using Svelte. The docs recommend SvelteKit
What source files are used in compilation and what are the output files?
.svelte in and .js and .css out. Covered in the updated docs
What is the compiler? Is it JS in an NPM package? How do I run it?
It's an npm package. Linked to in the updated docs. You run via a bundler - usually Vite. Covered in the updated docs
If it's using Node, should I stick to Node for my server or can I use Deno?
SvelteKit handles this for you with adapters. There's too many runtimes to mention them all. E.g. there's also cloudflare workers, etc.
How does it find the source files to compile?
It's an input option to the bundler. This is a bit hard to document as it's bundler-specific, so you will need to consult the docs for your bundler
What doesn't it output or copy? What about static files like images? Paths to images?
This is another bundler-specific question. First you need to choose a bundler - we highly recommend Vite via SvelteKit - and then read their docs. Vite handle images for you
Am I likely to need Gulp, or is that not needed anymore? Can Gulp run the compiler?
The updated docs link to all the bundlers including a Gulp bundler which can run the compiler, but again we recommend Vite via SvelteKit
Does a browser visit an .html file to see the Sveltey part of my website?
The browser visits a URL which provides HTML. The URL doesn't necessarily have to end with .html
Does Svelte make that .html file?
No. I can't cover all the things Svelte doesn't do as there's an infinite number, but hopefully the docs make it clear the compiler outputs .js and .css
Or does my Deno app serve the layout HTML page and the Svelte part is "injected" into an element?
Yes
How will it work with Deno, or Node and the way that serves static files?
I don't quite understand the question, but if you use SvelteKit this will be handled for you
How would I structure my source for an app with mixed Deno-served content and Svelte ...HTML?
Use the Deno adapter for SvelteKit
lukepuplett
commented
1 year ago Thanks so much for this. I muss confess, I saw that you'd closed the issue, and I thought you were just closing it to get rid of me!
I was quite upset and posted a reply which triggered an update of the page showing your message above! So I immediately deleted my rant.
Anyway, thank you again. The answers make sense, esp. knowing that the Svelte parts are "injected". I'll look at the docs in a mo, I need a rest. I've been down the Vite rabbit hole for hours.
How did Tim's beautiful invention get this complicated...
lukepuplett
commented
1 year ago https://github.com/pluvial/svelte-adapter-deno/issues/33
I have come to the conclusion that you can't use Svelte with a traditional web server or served alongside other HTTP resources.
I've researched Remix, too. This suffers the same problem with people asking the same questions. No one can articulate concisely how to serve a Svelte app. Just... magic.
The absence of documentation around this is so glaring that I can only conclude that the idea with these frameworks is to drive adoption of serverless JS environments, hence Rich Harris works for Vercel.
dummdidumm
commented
1 year ago That's not correct. https://github.com/sveltejs/kit/tree/master/packages/adapter-static lets you do exactly that, through prerendering and/or SPA mode
lukepuplett
commented
1 year ago But it's not exactly that at all. It's a prerendered static site, or it's a SPA. It's not the same as you'd get if you deployed to Vercel.
It makes no sense. Why isn't there:
Standard since 1995.
dummdidumm
commented
1 year ago I'm not sure what you mean "handles Svelte's HTTP requests". If you use Svelte (without Kit), you're probably creating an SPA, and then you can use fetch to call whatever API you want and use the returned data. If you don't want an SPA but instead prerendered HTML files or even SSR (on demand server side rendered HTML) then you need something different on your server. In case of prerendered HTML files you can use SvelteKit with adapter-static, and if you have more dynamic demands, you can use one of the other adapters to deploy to Vercel or whatever, or use your own Node server through adapter-node. You can't deploy to a static web server and expect it to magically have a server runtime that does these things for you.
In that linked issue you said you come from ASP.NET Core. Think of Svelte as the thing that you use to compose your UI. Think of SvelteKit as a lighter version of ASP.NET Core which can create different build outputs, one similar to ASP.NET Core where you get some artifact that you run on your server through setting it up in a certain way (yeah that's very broad, because I know nothing about how exactly ASP.NET Core is deployed).
benmccann
commented
1 year ago I'm not 100% sure what you want to do, but maybe be able to give some better pointers with a bit more detail. Do you want your Svelte components to render on the server-side and client-side or on the client-side only? Is it okay to write your whole UI in SvelteKit (not necessarily your API layer though) or do you just want to insert a component into an existing UI? If the latter, you're going to have a lot more options on how to implement it, but will be giving up the benefits of server-side rendering (SSR) obviously.
If you want to do server-side rendering of Svelte components, it's relatively easy to compile a Svelte component and call it from an HTTP endpoint to deliver rendered HTML (like an import and one line of code). However, rendering a Svelte component on the server yourself is generally going to result in a terrible developer experience because you'll need to kill and restart the server for each change you make. There's a tremendous amount of complication around creating a development server that provides hot reloading and so we pretty strongly suggest that people use Vite / SvelteKit for the SSR case for that reason.
If you want to insert SvelteKit into an existing Node/Deno app as a middleware, see this FAQ. SvelteKit would serve your whole UI, but you can write API endpoints, etc. with your Node/Deno server if you wish. I've also seen people embed SvelteKit apps in their app (e.g. NYTimes), but don't have a good example of code like this to point to
If you just want to embed a Svelte component in an existing app, there's a couple choices. If you only care about the client-side, you can build a bundle with any web bundler (Vite, webpack, gulp, etc.) and load the bundle from your app with a script tag. If you want to insert it on the server-side and hydrate it on the client-side, that's a fair amount more difficult because you would probably want to call into Vite's APIs if you want hot reloading and you need to transmit the application state from the server to the client for hydration.
I'm going to reopen this as we should probably better explain the SvelteKit vs embedded case in the docs
lukepuplett
commented
1 year ago Thank you for reopening this issue and for your time, both of you.
I am very simply looking to fully use Svelte's features (though SSR I can take or leave), with an existing Deno app. So I have a Deno app that serves static files and my own route handlers (I like to implement OAuth by hand, which I have done), as well as handling WebHooks from other services.
The idea was that I will serve my homepage the old-skool way with my own HTML via Deno and a templating engine, and I will handle OAuth and then redirect users into the Svelte SPA part which I'd imagine to be at /app or whatever.
I originally assumed I'd need to write handlers in Deno to serve JSON for the front-end, like a BFF pattern, but I think Svelte might be the back-end for its own front-end, ...assuming SSR is enabled. I don't know. In fact, that raises another question of how the browser authenticates with its backend.
The docs are all about Node and it's like Deno was never invented. Now, because I'm new to this space, I wonder if I've accidentally picked up Deno thinking it was an improved Node and actually it's a flop and no one cares for it so there's no support. Remix docs also eshew Deno.
But while I have your attention, for my other ASP.NET Core project, I would be interested in just SPA functionality, to be able to stick something in an HTML page: like how Angular needs just ng-controller and a script tag with a bit of JS and off it goes!
I assume that Svelte needs a server-side JS runtime to do its SSR+CSR hydration stuff, and so ASP.NET Core ain't gonna work (though there is Microsoft.AspNetCore.NodeServices).
But for Deno, we're cool, right? So long as the SSR bits are loaded by my Deno app and it knows where the Svelte files are? Or... is it all compiled into a single JS file and it just needs pointing at that? It's complex, and confusing.
You can see what I mean by needing a clear mental model of how it works, without which I can't even ask the right questions.
Which brings me onto that FAQ about middleware. The code example, unless I'm mistaken, is to write middleware for the Vite dev HTTP server, which is useful sure, but not what I need. The other thing it talks about is adapter-node but again, I'm using Deno.
Here's how I made friends with everyone in the Deno community today: https://github.com/denoland/deno/discussions/16991
It's driving me mad. I've never found anything so difficult to contend with. And really it's all because no one wants to use Deno for reasons I didn't get the memo about!
brunnerh
commented
1 year ago And really it's all because no one wants to use Deno for reasons I didn't get the memo about!
That one is easy to explain: Node came first and has a huge library of NPM modules backing it which are not necessarily compatible with Deno.
If people have an existing codebase that is hard or impossible to migrate, they are not going to do it. If they start a new project and would be unable to use most of the tools they are already familiar with/rely on in Deno, they are not going to switch. It just does not matter that Deno is superior to Node itself.
dummdidumm
commented
1 year ago But while I have your attention, for my other ASP.NET Core project, I would be interested in just SPA functionality, to be able to stick something in an HTML page: like how Angular needs just ng-controller and a script tag with a bit of JS and off it goes!
I assume that Svelte needs a server-side JS runtime to do its SSR+CSR hydration stuff, and so ASP.NET Core ain't gonna work (though there is Microsoft.AspNetCore.NodeServices).
SvelteKit needs a server-side JS runtime if you're doing SSR etc, if you're doing SPA style, you don't. In your case, you just use Svelte (not SvelteKit) and stick the compiled JavaScript and CSS output into your static or whatever folder in your ASP.NET Core app and wire it up in the template where you need it. Similar to your Angular example, wherever you want your Svelte-thing to be mounted you add a JS snipped with new NameOfYourEntryComponent({target: htmlElementWhereItShouldBeMounted}) and you're good to go. This Reddit thread may have some more useful information for you: https://www.reddit.com/r/sveltejs/comments/r4xug4/net_and_svelte/
lukepuplett
commented
1 year ago @brunnerh
Thanks, I've since read this argument somewhere else. I read the Deno docs fully and the following pages made it sound like a non-issue, so I assumed people would now start new projects (with new frameworks) on Deno. It didn't occur to me that being able to use NPM packages could be brand new to Deno, or most developers simply have too much inertia with the original Node.
https://deno.land/manual@v1.12.2/npm_nodejs/std_node https://deno.land/manual@v1.12.2/npm_nodejs/cdns https://deno.land/manual@v1.12.2/npm_nodejs/import_maps
Bare in mind that I've never used Node (aside from npm) and I work alone, so I don't know what people do. But to be honest, even having discovered all this, it would still make sense to have docs for Deno out the box because of the greenfield opportunity of starting today on Svelte and Deno.
@dummdidumm
This is what I'll do for Deno for now, too. I'll rework it later to enable SSR as I desperately need to crack on now.
As for the documentation, I think it needs to:
Discuss support for non-Node servers, since it's not fair to have people on other tech waste all their time learning how to use Svelte and then days later realise they can't use it because they have a CMS.
Include an official version of this blog post to explain how to use it in SPA mode if you don't have a Node backend: https://blog.logrocket.com/build-spa-svelte-svelte-spa-router/
Explain how the fully-featured CSR+SSR Svelte works from the view of an HTTP request coming from the browser of an end-user landing on your Svelte website. It needs a flow diagram like how OAuth is explained, showing the request coming from the browser, to Node, then into a router perhaps, then to a handler perhaps, and then into what I presume is a Svelte view engine, that produces a full HTML and explain what is inside that HTML, that response is streamed to the browser, the browser then renders the HTML and presumably some JS payload is in there somewhere which gets run and that writes the DOM (or not for SSR) and hooks up reactivity/data-bindings, loads a client-side router (or something that overrides browser nav), and then subsequent user interactions cause the client-side router to, I'm guessing, make an HTTP request to the server for further SSR'd HTML and inject that into the DOM and hook up data binding again and run any JS, (or perhaps only the initial page is SSR'd, I don't know).
It needs this so people grok what's happening so they can construct a mental model. I can use decades of knowledge (and having things explained to me) to dig around and make some guesses about how it all might work, and even then it's exhausting. My kids have no chance.
It needs to be done early on so people can hook the other concepts to the overall working model.
Thank you.
polarisdigitech
commented
1 year ago pluvial/svelte-adapter-deno#33
I have come to the conclusion that you can't use Svelte with a traditional web server or served alongside other HTTP resources.
I've researched Remix, too. This suffers the same problem with people asking the same questions. No one can articulate concisely how to serve a Svelte app. Just... magic.
The absence of documentation around this is so glaring that I can only conclude that the idea with these frameworks is to drive adoption of serverless JS environments, hence Rich Harris works for Vercel.
You can checkout leanweb-kit
Describe the problem
I've been coding for 35 years, all manner of stuff. Regarding web, I'm coming from .NET of 17 years. I've been keeping an eye on Svelte for more than a year.
I normally build either MPAs with Knockout for small bits of interactivity. I've never really been "into" SPAs, though I've built the backends for them for years. Svelte looked interesting because it affords a mix of approaches.
The page transitions stuff Jake Archibald is working on will be big for mixed mode apps, I think.
A couple of weeks ago, I began to learn a whole new stack based on TypeScript front and back. I went for Deno and that has a tiny "framework" called oak for server-side routing and some HTTP bits.
I'm ready to learn Svelte. I began by heading to the official docs where I started reading everything and typing up notes (on a public GitHub repo). I hate fumbling in the dark so I tend to pre-cache the docs in my brain before I start coding.
What struck me was that there doesn't seem to be anything discussing how it works; it's all about syntax and coding, and interactively selling how cool it is.
Actually, what I first did was begin reading the docs on SvelteKit, not realising it's different to Svelte. I assumed people just said "Svelte" for short.
My "feature" request is for some documentation to explain and establish a vivid mental model of how Svelte works, in the mind of a complete noob.
Below are the honest dumb questions whizzing through my mind as I try to evaluate whether Svelte will be a bountiful investment of my time.
These are not to be answered here, but I hope for them to inspire the foundational documentation upon which I think any beginner can build their knowledge. In no particular order and just focusing on Svelte at svelte.dev:
You see, without knowing this, my mind boggles. I can't even begin to think about .svelte files and the three sections, and yet that is what the documentation focuses on.
By January, I'll probably have The Curse of Knowledge. Today, I'm in that special naive time when I see the real slope of the learning curve. I hope you'll receive this in the highly useful spirit with which it is intended.
I also posted to Discord. Again, this was new to me. I've never used Discord. I'm not even that old, either :-D
https://discord.com/channels/457912077277855764/1049811603433988226
Thanks
Describe the proposed solution
I would like to see official written docs on how Svelte goes from source files a, b, c to output files x, y, z, and then how a browser requests and renders a page with Svelte markup, via whatever is serving that HTTP response.
Alternatives considered
Googling unofficial blog posts. Asking in Discord. I have not asked in StackOverflow as it feels like a question that will get me beaten up.
Discord seems like chat for people who know what they're doing and have no incentive to provide the long and tedious answers for a noob like me. Sorry, but that's the vibe I get from it.
Importance
i cannot use svelte without it