Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How I made a website with Svelte

johanronsse.be

Post reply on HN
Print view View original

91–100 of 130 posts

Re: How I made a website with Svelte

#91

Post by deltron3030 »

Wolfr_ wrote: post #71
deltron3030 wrote: post #41

I dig the simplicity, but why didn't you use Sapper? https://sapper.svelte.dev/ (Next.js/Nuxt pendant based on Svelte, can also be used as static site generator).

I used Sapper before, I quite like it. But now I wanted to explore how one would build something like Sapper, this is why I went for base Svelte and then added a router. I now have pretty much what I used Sapper for and the setup is simpler. Also, Sapper doesn't seem to be in active development.

Fair enough. I'm dabbling with Svelte/Sapper myself but I'm not at a point where I could roll my own with SSR and all that. Still trying out different ways to build components, gravitating towards having a fat global.css file and keeping the components themselves as thin as possible.

>Also, Sapper doesn't seem to be in active development.

For three months or so, but I wouldn't worry about that, because just a thin layer on top of Svelte, and the maintainer is very active in the Svelte repo it seems. It may only get bumps if something breaks.

Re: How I made a website with Svelte

#92

Post by dang »

83hajfjeijg wrote: post #35
karmakaze wrote: post #31

Earlier quoted context omitted.

Thanks for the quick link. Complaining about a web page not working with js disabled is just noise, especially on a 'made with {framework}' post.

Stop being part of the problem. The modern web is fucking cancer.

Could you please stop posting unsubstantive comments to HN?

Could you please also stop creating accounts for every few comments you post? We ban accounts that do that. This is in the site guidelines: https://news.ycombinator.com/newsguidelines.html. HN is a community. Users needn't use their real name, but do need some identity for others to relate to. Otherwise we may as well have no usernames and no community, and that would be a different kind of forum. https://hn.algolia.com/?sort=byDate&dateRange=all&type=comme...

Re: How I made a website with Svelte

#93

Post by ng12 »

vikingcaffiene wrote: post #87
ng12 wrote: post #81

Earlier quoted context omitted.

To understand why people say Angular is over-engineered Google something simple like "Angular http request". You'll end up at this page: https://angular.io/guide/http It's almost comical. I can't believe how long that guide is and how many concepts Angular invented just to fetch some JSON from an http service.

I find it a little strange that you are pointing out comprehensive documentation on a module as proof of a problem with the framework... Lets talk about what you get with HttpClient: - Easy testing. Because its using the DI system, its very mockable. You can totally set this up with fetch or whatever behind a service but, well why? Its already done. - Robust type safety. Again you can set this up with fetch, but why?…

I mean it's really not "already done" if you have to use all this boilerplate to get those features.

> Robust type safety. Again you can set this up with fetch, but why? Its already done.

Not sure what you mean here. Fetch has high-quality TypeScript bindings. For the rest it's mostly YAGNI. The boilerplate confuses new developers (try explaining what NgModule does to a junior dev just trying to build a simple page) and experienced developers know how to do this stuff themselves.

Re: How I made a website with Svelte

#94

Post by yroc92 »

reaperducer wrote: post #25

I'm afraid I honestly don't understand. What was the reason for using a bunch of frameworks and JavaScript for what appears to be a super simple web site? I don't see anything that couldn't have been done in plain static HTML and CSS. Is there some functionality on the pages that I'm missing?

In my experience, there’s seldom such thing as a “super simple web site”. I always run into situations where some dynamic functionality is required and vanilla JavaScript gets messy very quickly. Svelte is so compact and easy that it is the ideal tool for such scenarios.

Re: How I made a website with Svelte

#95

Post by BiteCode_dev »

crtlaltdel wrote: post #54
BiteCode_dev wrote: post #47

Earlier quoted context omitted.

It normalizes the way templates are coded and forces people to put minimal logic in their rendering. In react, there are as many ways to do the same things as there are coders. And of course, some don't follow best practices and will put logic code in it. Personnally I also find it easier to picture the resulting DOM structure because the stylee is forced to be declarative. Too often in react I have to look around a…

I'm not sure how it forces less logic in the render. Looking at the Svelte docs you can do this: ``` {#if invokeFunction()} This function returned a truthy value! {/if} ``` And with React do this: ``` { invokeFunction() && This function returned a truthy value } ``` and the result would be the same, a conditionally rendered string. I totally agree in the normalizing/formalizing how templates are build and the more ve…

In Vue it would be:

    
      {{ vars }}
Instead of:

    { collection.map((vars, i) =>  {vars} 
 }
It's easier for me to picture what the first example is going to render because it makes the markup the hero, with code inside, while the second example is making JS the hero, with markup inside.

But this example is not even touching the topic. A render function is rarely that simple. Now if you do maps, and filters, and ternary operators, and && / || pass trougth, and set several class conditionally, and pass an event and do preventDefault, etc., now you have a more real life example. And in react you'll get __a lot__ of JS, with very little markup. And you'll have either a lot of boilerplate, or a lot of dependencies to get helpers.

While in Vue you'll get mostly markup, with a little code inside. It will read from top to bottom as well. No needs to wrap stuff in arrow functions to get the event object. PreventDefault has a helper. Setting classes as well. I prefer that.

Re: How I made a website with Svelte

#96

Post by vikingcaffiene »

ng12 wrote: post #93
vikingcaffiene wrote: post #87

Earlier quoted context omitted.

I find it a little strange that you are pointing out comprehensive documentation on a module as proof of a problem with the framework... Lets talk about what you get with HttpClient: - Easy testing. Because its using the DI system, its very mockable. You can totally set this up with fetch or whatever behind a service but, well why? Its already done. - Robust type safety. Again you can set this up with fetch, but why?…

I mean it's really not "already done" if you have to use all this boilerplate to get those features. > Robust type safety. Again you can set this up with fetch, but why? Its already done. Not sure what you mean here. Fetch has high-quality TypeScript bindings. For the rest it's mostly YAGNI. The boilerplate confuses new developers (try explaining what NgModule does to a junior dev just trying to build a simple page)…

It's YAGNI until you do. Since we're busting out the acronyms a lot of what you are saying sounds like a case of NIH syndrome. :)

I have trained junior devs on Angular and I think it's a fair criticism to say it's a steeper learning curve. They do fine tho and as an added bonus they get introduced to concepts like IoC and the like which sets them up for other languages.

Experienced developers can set this stuff up its true. I have in fact. It's fun the first few times. Then you get annoyed and want to actually work on your problem domain. I'd much rather spend my time and brain power on that stuff.

The apps that I've built that had an established pattern and all the infrastructure needed from go tended to age better and tolerate changes to business requirements. The ones where we rolled it all hodge podge needed more extensive refactoring later.

I mean look: this really boils down to very different philosophies. You either go light and build as you go or go everything and the kitchen sink and deal with (what some would call) bloat. I think both have their pros and cons. No silver bullet and all that. You gotta look at the situation and make a call. The rest is just preference and gut instinct.

Re: How I made a website with Svelte

#97

Post by paulddraper »

ng12 wrote: post #81
vikingcaffiene wrote: post #68

Earlier quoted context omitted.

> Angular is over-engineered. I take issue with opinions like this that are espoused as fact. I've built large apps in both Angular and React. The React code base needed everything that I got out of the box from Angular. The difference is that React had no one true way to do things which I suppose some people would consider a good thing. I don't. Angular is a framework. Its not over engineered, its complete. You migh…

To understand why people say Angular is over-engineered Google something simple like "Angular http request". You'll end up at this page: https://angular.io/guide/http It's almost comical. I can't believe how long that guide is and how many concepts Angular invented just to fetch some JSON from an http service.

> I can't believe how long that guide is

The format should probably be broken up. But yeah covers a lot:

* HTTP, JSON, JSONP

* Request entities, response entities, headers

* Error handling, cancelation, and retries

* Authentication, logging, and other kinds of "middleware"

* XSRF

* Progress tracking

* DI and testing

* Type safety

> how many concepts Angular invented

Not a single one of those was invented by Angular.

The "weirdest" thing Angular does is use RxJS. But that would be more a criticism of Rx/FRP in general, not Angular specifically.

Re: How I made a website with Svelte

#98

Post by Vinnl »

tashoecraft wrote: post #80
83hajfjeijg wrote: post #32

Earlier quoted context omitted.

No, you make a small web app. It doesn't have to be a big project, but it should be something that benefits from what the framework can deliver. This doesn't. If you're "exploring game engines" making a resume with one is probably not what you should reach for and if you're "exploring DAWs" your testbed shouldn't be generating a pure sine wave. This sort of site is the opposite of a perfect testbed for a framework. T…

Please stop, people can build whatever they want how ever they wish, especially when it’s not planned to be super public. They wish to build it in svelte, that’s all the reasoning you need. I’ve also literally seen someone use a game engine to build a resume on here, it was super cool and attracted a lot of interest

No one said people weren't allowed to build something with Svelte or whatever, just that they didn't think it was a good way to explore it, and backed that up with reasoning. Additionally, if there were other reasons for doing it, those would be interesting to hear.

I wouldn't get too worked up about this: discussions about which jobs a tool lends itself well to can be very insightful.

Re: How I made a website with Svelte

#99

Post by Vinnl »

Wolfr_ wrote: post #63
reaperducer wrote: post #25

I'm afraid I honestly don't understand. What was the reason for using a bunch of frameworks and JavaScript for what appears to be a super simple web site? I don't see anything that couldn't have been done in plain static HTML and CSS. Is there some functionality on the pages that I'm missing?

I did that the years before: using a static site generator. The goal is to explore new technologies so I can decide what to use at work. I spent quite some time on the router aspect here, which I know now more of, that I can use during the work year (where I won't have time to explore this.)

But this is not a regular static site, right? In the sense that it does not work with Javascript disabled, which is why you needed to do this:

> Then I remembered that I would probably need to redirect all requests to index.html.

Compare that to e.g. my blog (also the result of an experiment), which has the fast page changes you were looking for, but also works without Javascript, albeit with full page refreshes when switching pages: https://vincenttunru.com/

Re: How I made a website with Svelte

#100

Post by paulddraper »

ricardobeat wrote: post #57
IggleSniggle wrote: post #37

Earlier quoted context omitted.

Angular has been pre-compiled for years. The AOT compiler has been available since Angular 2, released in 2015. It has also been able to produce stand-alone native web-components since 2018, btw. It's only recently that it started producing multiple packages simultaneously, however (to serve up a package optimized for the client's web platform).

Most modern frameworks can be AOT compiled in that sense - React, Vue, Riot - they load JS code only at runtime, but still use templates (VDOM, strings or another representation) as blueprints to update/manipulate the DOM. AFAIK Angular still uses dirty checking; Angular Ivy, yet to be released, will move to something a little closer (incremental-dom), but still not the same. What Svelte does is precompile the UI upd…

> Think Prepack

Angular compiler is certainly an optimizing compiler.

> Angular Ivy, yet to be released

Ivy became an opt-in feature of the Angular CLI earlier this year with Angular v8.

> AFAIK Angular still uses dirty checking

Ivy uses "dirty checking" too [1]. AFAIK Ivy and pre-Ivy operate on similar fundamental principals, which is why Ivy is a drop-in replacement.

[1] https://indepth.dev/what-every-front-end-developer-should-kn...

Post reply on HN