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

81–90 of 130 posts

Re: How I made a website with Svelte

#81

Post by ng12 »

vikingcaffiene wrote: post #68
erokar wrote: post #28

Earlier quoted context omitted.

Simplicity. You can achieve the same in Svelte using fewer concepts and a smaller API. Angular is over-engineered, Svelte is not.

> 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.

Re: How I made a website with Svelte

#82

Post by vosper »

csande17 wrote: post #60
sibeliuss wrote: post #38

Earlier quoted context omitted.

Wolfr_- Just read over ygdir and wondering: We've had such phenomenal success with https://styled-system.com/ across our team that I'm wondering if your adversity to utility-first CSS might be due to misuse in some way? Utility first is largely to build primitive abstractions that expose narrow constrains for developers building UI. It's the opposite of complexity due to the fact that it reduces options. _But_ if the…

I'm not Wolfr_, and I haven't used that React-based library you link, but I have seen tailwindcss.com -- which, as far as I've heard, is one of the flagship "utility-first" CSS libraries -- used in medium-to-large scale projects. The problems I've seen with Tailwind in these projects are: - Elements end up with messy, non-semantic class name strings like "m-4 mt-0 p-3 rounded bg-blue". This makes it much harder for n…

> - Elements end up with messy, non-semantic class name strings like "m-4 mt-0 p-3 rounded bg-blue". This makes it much harder for non-technical teams to use out-of-the-box SaaS solutions for things like interaction tracking and A/B testing. (These apps often use element class names under the hood, so if you use Tailwind and change a CTA from rounded to very-rounded, the marketing guy will discover two weeks later that all his click-through metrics are wrong.)

IMO the problem here is tools trying to use CSS for something it’s not designed for. They advertise themselves as not requiring technical knowledge to use, but they’re selling a lie. Unless the marketing guy understands the structure of the site and the CSS there’s no way for him to be sure he’s tracking the thing he thinks he’s tracking - unless you’re instrumenting the CSS to help him out, and are committed to not doing anything that would break one of his selectors (or change its meaning, or reuse it for something else - and are you sure you know all the selectors he’s using, and that the automatic selectors the tool is creating are actually doing what he intends?).

Data attributes are probably the solution here, then CSS can be reserved for its intended use: controlling styles. But then the tooling needs a way to target those attributes automatically, otherwise you’ve “broken” the “no technical knowledge required” sell of the software they already licensed (without asking you for input...)

Re: How I made a website with Svelte

#83

Post by Wolfr_ »

83hajfjeijg wrote: post #32
Bob312371 wrote: post #27

Earlier quoted context omitted.

How else do you explore frameworks? Do you wait until you have some massive project with financial and time constraints and then test it out on that? This sort of site is a perfect testbed for such a framework.

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…

I made a small front-end for a web app before: http://johanronsse.be/skilliverse-10/ -

Video: https://www.youtube.com/watch?v=qicEFB_XrQQ

This is much more about what the framework solves: UI as a function of the data, no spaghetti code full of DOM handlers and cross-references that are hard to follow.

Now I just used Svelte for this project, which is indeed a simple website which might not need this at all.

Still, I invite you to do similar transitions as I have between every page and on the homepage without a framework.

Re: How I made a website with Svelte

#84

Post by rileymat2 »

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.

Interestingly, they explain some of the reasoning behind the extra info in the docs.

WHY WRITE A SERVICE? This example is so simple that it is tempting to write the Http.get() inside the component itself and skip the service. In practice, however, data access rarely stays this simple. You typically need to post-process the data, add error handling, and maybe some retry logic to cope with intermittent connectivity. The component quickly becomes cluttered with data access minutia. The component becomes harder to understand, harder to test, and the data access logic can't be re-used or standardized. That's why it's a best practice to separate presentation of data from data access by encapsulating data access in a separate service and delegating to that service in the component, even in simple cases like this one.

Re: How I made a website with Svelte

#85

Post by BeetleB »

83hajfjeijg wrote: post #32
Bob312371 wrote: post #27

Earlier quoted context omitted.

How else do you explore frameworks? Do you wait until you have some massive project with financial and time constraints and then test it out on that? This sort of site is a perfect testbed for such a framework.

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…

> This sort of site is the opposite of a perfect testbed for a framework.

It sounds like you're saying one should use a tool only for what it is meant for.

Many disagree.

Re: How I made a website with Svelte

#87

Post by vikingcaffiene »

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 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? Its already done.

- Integrated with rxjs/observables for data transformation, piping, and filtering. You can set this up with fetch but why? It's already done.

- Discoverable API because of the deep framework integration and type intelligence. You can set this up with fetch buy why? It's already done.

- HttpInterceptor is awesome for checking for things like auth tokens and such. You can set this up with fetch but why? It's already done.

Not specific to HttpClient but:

- AOT compiler means that unneeded code gets pruned keeping your bundles small.

- AOT compiler means that you literally can't compile incorrect code (but it provides an escape hatch if you want to live your life that way)

I can make this same argument for pretty much any module you throw at me. Like I said, Angular is _complete_. Is it the right fit for every situation? No! :) It's overkill for smaller projects but if you are building anything of sufficient complexity, you _will_ need all this stuff. The question is, do you want it to be something you had to roll yourself and didn't have time to document for your teammates or do you want something that did all the hard work for you and is ready for whatever you throw at it?

Re: How I made a website with Svelte

#88

Post by spoofedboy »

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'm afraid I honestly don't understand. I don't see anything that couldn't have been done in plain static HTML and CSS.

It goes by various themes:

- Can't see the forest for the trees

- resume driven development

- hype driven development

- brag shallow blog post driven development

- over-engineering

- sell courses driven development

etc...

Re: How I made a website with Svelte

#89

Post by daliusd »

amelius wrote: post #42

How well would your setup handle larger amounts of data (say 10x, 100x, 1000x)? Would Svelte be able to handle it? What would you have to change in your design? At what point would you have to replace the entire architecture?

Yes. The same as React while it might lack libraries. E.g. I have written site that filters 10,000s entries in real time and displays them.

Re: How I made a website with Svelte

#90

Post by daliusd »

sergiotapia wrote: post #50

Tried Svelte and it seemed really concise and fun to work on, however I really miss being able to format on save with Prettier in React. Is there an auto formatter that makes my code shift around and have one-true-style? This is a most for any long lived project as it avoid all bikeshedding discussions about style. We use Prettier for JS, and mix format for Elixir, at work.

Prettier works with Svelte as well. Here are some hints how to use that with Vim https://blog.ffff.lt/posts/vim-and-svelte/
Post reply on HN