How I made a website with Svelte

https://johanronsse.be/2019/12/28/making-of-best-of-2019/

by Wolfr_ • 7 years ago

243 121 7 years ago

Wolfr_16• 7 years ago

Every year I make an end of year project where I try some new technology. This year I made my project with Svelte. It's a list of the best albums, films, series etc. according to me.

flanbiscuit• 7 years ago

Nice write-up.

I followed the link to the css framework you used/developed, Ygdir, and I am not sure I understand it. Is the website a work in progress? Feel like it needs to explain with more details and examples what you mean by "convention-first". I agree what you said about utility first css but I'm not sure what makes Ygdir better

https://ygdir.dev/

sibeliuss3• 7 years ago

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 utils are incorrectly spread all across your codebase and not constrained to primitives then indeed it could be a mess.

Wolfr_16• 7 years ago

This is something very new (a few weeks) and still a work in progress, it's nowhere near complete. It's going to be a “way of doing things” instead of a full-on framework, but at the same time, we could use more examples on how to exactly do what it prescribes. A tutorial, a sample project following the conventions etc.

It will be interesting to read the comments on this early version but it's not really “released” yet.

nlh• 7 years ago

This is great - thank you!

One request: I read your gaming section eagerly and all the games you mentioned look super cool, but would you mind adding some links / details about each of them? I’m still not sure exactly which racing sim you’re talking about and the other screen shots look super cool but I had to google each game to figure out what the deal was. Not a huge deal but a small suggestion.

Otherwise - thanks! Excellent work.

Wolfr_16• 7 years ago

I promised myself to stop working on the project, but the games are:

* Assetto Corsa Competizione * Dirt Rally 2 * Gran Turismo: Sport

I should have added titles to them!

numbers• 7 years ago

Thanks for the write-up! I’m interested in svelte as well and this gives me some inspiration to try it this weekend!

amelius2• 7 years ago

Title makes it seem as if the website received an award.

Wolfr_16• 7 years ago

Not intentional!

bsaul• 7 years ago

I got the same impression

dang• 7 years ago

Ok, we've taken "best of 2019" out of the title.

dragosmocrii2• 7 years ago

It was a pleasure reading your article, I hope I can use it as reference for my future svelte project.

And I must say that Svelte also caught my eye this year. I gave it a shot in their playground, and I was surprised how intuitive things are. Svelte as a compiler seems very natural an approach to building frontend apps and independent components.

My next project will be Svelte on the frontend (SPA), and Elixir+Phoenix+Absinthe on the backend. I personally think this will be a killer stack for 2020

ketzo• 7 years ago

Any particular resources you'd recommend for Elixir/Phoenix? Doing their basic intro guides right now and liking them, but would love anything you did after those that you liked.

dragosmocrii2• 7 years ago

I recommend the official book written by Chris Mccord for Phoenix. For Elixir, I really enjoyed doing the assignments on Exercism. I also enjoy reading the elixir forum, and the slack community has helped me with a couple roadblocks in the past. But really, I think the best way is to just pick a project idea, and start working on it. It works best for me learn while doing. I hope you enjoy Elixir too!

factsaresacred2• 7 years ago

Nice writeup.

"In 2018 I went content-first, but this year I went design-first. I more or less created all of the designs first, then implemented them as opposed to last year."

For somebody who believes that it's as fast to simply design in css, was this step worth it?

Wolfr_16• 7 years ago

For me it's about testing new technology, and I consider Figma's autolayout new technology. I think by doing things in a design app you experiment with other things you wouldn't necessarily do in the browser. For example colors, fonts... compared to the '18 and '17 version I believe this one looks better.

I do have to say I am quite fast with Figma as my day to day work is being a UI designer.

factsaresacred2• 7 years ago

Cool, having looked at your design file I can see the benefit of having everything laid out - allows you to easily explore different ideas.

Figma seems like a tool worth learning, will have to dig in some more.

diggan• 7 years ago

Unless you're using something else than a regular text editor/IDE for editing CSS, using UI controls to experiment with how things look would normally be faster for many. I'm a programmer myself, but having UI widgets I can drag or interact with is way faster than writing numbers and attributes, when it comes to coming up with a design.

Although, this assumes you're in the initial design phase of something, not the typical designer->developer handoff where you basically just want to implement a specification someone handed you.

Bob3123712• 7 years ago

Loads quickly. Looks good. Nice and simple UI. Well done! If you're looking for the next challenge, consider making it render server-side.

Wolfr_16• 7 years ago

I am still 100% confused as to how it would work it I would "enable SSR" (which Sapper would allow you to do). Would the end result be a static site then? Something to explore next year (also see the comment below about it not working at all without JS)

paulddraper7• 7 years ago

https://svelte.dev/

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

That sounds like a perfect pitch for Angular. What's the difference between Svelte and Angular?

Wolfr_16• 7 years ago

The difference is that Svelte is pre-compiled while Angular will put templates through the renderer while building up the page.

The_rationalist2• 7 years ago

Why does it matter?

paulddraper7• 7 years ago

Angular v1 interpreted templates at runtime.

Starting in 2015, Angular v2+ uses an optimizing AOT compiler. [1]

[1] https://angular.io/guide/aot-compiler

IggleSniggle• 7 years ago

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

erokar• 7 years ago

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

sansnomme• 7 years ago

Specifically Svelte is a lot shorter and concise without the Spring-style infamous enterprise software boilerplate that plagues angular.

https://dev.to/maurogarcia_19/angular-vs-svelte-card-compone...

In addition, its reactive variables is a lot easier to use.

vikingcaffiene3• 7 years ago

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 might not like its chosen abstraction but for people like me who just want to get shit done without needing to worry about plumbing and boiler plate, its really nice.

All that said, Svelte looks cool. I'll check it out. I think its a fair criticism to say that Angular has a steeper learning curve and if I can reap all the benefits with a shorter ramp up time, its worth adding to the tool belt.

JMTQp8lwXL• 7 years ago

Angular is (loosely) a superset of what Svelte provides: it's a templating engine, it has a built-in forms library, built-in routing, dependency injection, baked in i18n support, and better XSS sanitization than other frameworks. Angular's templating engine is fairly complex too; it, for example, has a concept of "pipes", so you can write something like this: "<div>{{data | json}}</div>" which will take a JS object, data, and pipe it through a function that returns a stringified version of it, which is what is used in your template. (Compared to other frameworks, this might seem obsolete since JSX is syntactic sugar for JS: in React, you'd just write: "<div>{{JSON.stringify(data)}}</div>").

It's commonly used with Angular CLI to have simple commands like "ng serve" and "ng build" to bundle your application. It also heavy handedly imposes constraints on the architecture of your application-- to some, that's a benefit. All Angular apps kind of look the same.

mechhacker2• 7 years ago

I've been using Vue for a while because it's possible to get things up and running, even .Vue templates, without having to use npm tool chains. Just linking the Vue and other source files.

But, I really like the speed and user experience here. I may actually give it a try.

ricardobeat2• 7 years ago

Svelte has very few dependencies, and zero of them at runtime. Hot reload is instant. A real breath of fresh air when coming from other frameworks.

mechhacker2• 7 years ago

I've been trying it throughout the day and so far I find the way of doing things better than Vue. I'll see if I can sort a binding issue that was causing me a bit of complexity in Vue. So far, it looks like it would make solving that trivial.

oskarp• 7 years ago

Not sure if this is a problem with the website or routify but clicking on the routify link in iOS Safari makes the browser back button unusable. Nothing happens when clicking on it.

Wolfr_16• 7 years ago

Thanks, I am going to investigate this.

cytzol• 7 years ago

What I like about these foundries is that they have permissive licenses that are just a one-time purchase. When I make a website I don’t want to worry about the font licensing for years.

I love the work of professional typographers, but tend to stay away from commercial Web fonts, because they like to include very restrictive terms in the font licences.

For example, you're only allowed to back up Klim fonts once, which we all know is no backup at all (https://klim.co.nz/licences/web-fonts/):

You may make one (1) copy of the Web Fonts for back-up purposes only.

And I hope you don't take a week-long holiday away from your computer:

At Klim’s request, You agree to provide an audit to confirm the Web Fonts You are consuming match Your Sales Receipt. Klim will give You at least 5 business days’ notice to complete the audit.

The Commercial licence is a bit better, but doesn't let you subset the fonts, which means your fonts might be 5 to 10 times as big as they should be, giving your users a worse experience (https://commercialtype.com/licenses/web):

10. You may not modify, adapt, translate, reverse engineer, decompile, disassemble, or alter, the Webfonts, the Font Software or the designs embodied therein.

I recommend using fonts under the SIL Open Font License, where you don't have to worry about this crap.

Anyway, nice work! I've been meaning to learn Svelte, and your site looks really good.

omnimus• 7 years ago

I think it really depends on foundries. For klim and commercial type are example of famous, older, established foundries. There are many foundries with more permissive licenses. For example fonts.floriankarsten.com has weblicense that is not tied to domain but only total monthly views with generous 50k month its perfect for many small and hobby projects especially of some other project pays for license. I have feeling the type market is going to be really disrupted by new small foundries. There just too many newcomers and it became quite a bit easier technically to make fonts.

deltron30303• 7 years ago

There is a font tool/service that unites many commercial fonts from small type shops under the same license.

https://www.fontown.com

Another one with a greater selection but variable licenses:

https://fontstand.com/

spectramax• 7 years ago

I really appreciate the amount of work that goes into making a font. On one hand, these typographers and their foundries are starving for revenue and on the other hand they make the customer's professional life incredibly difficult with the retrictions that you mention.

Most small foundries have been bought out by Monotype and their licensing is now 100% subscription only. I was lucky to have purchased Univers and a couple of other fonts under their "Creative" license which bundled everything under a reasonable price.

Font foundries - listen up, if you want people to pay for your fonts, make the licensing model straight up simple - download fonts and off you go. Turns out that most people that are willing to pay for your font arent the ones trying to pirate them. Stop fucking them over.

ljm• 7 years ago

There have been a few fonts I was interested in until I saw the several-hundred dollar bill and the license that basically restricted any useful application of the font. No wonder why startups commission their own fonts these days, so they can own them.

Typography and calligraphy is an art form so it does justify the expense, but you've got to be able to actually use it.

83hajfjeijg2• 7 years ago

https://bestof2019.johanronsse.be just shows an empty page.

(oh how far we've come - a simple best of list requires javascript)

karmakaze• 7 years ago

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.

_-___________-_2• 7 years ago

I tend to agree; however, it's really easy to make a site like this work without JS.

Edited to add: to be clear, I mean while still using the framework.

Wolfr_16• 7 years ago

You can find versions that support Javascript at http://bestof2018.johanronsse.be/ and http://bestof2017.johanronsse.be/ . I used a static site generator for this.

This is clearly a technology exploration.

How can I explore new technologies if I impose limits that others don't set for themselves? The job market asks for JS skills. Look at my conclusion at the bottom of my post: I state that this might be a technology downgrade instead of upgrade.

reaperducer2• 7 years ago

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?

skrebbel• 7 years ago

It's for fun.

Bob3123712• 7 years ago

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.

83hajfjeijg2• 7 years ago

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. This sort of site doesn't need JS, it doesn't need a framework, it barely needs CSS.

Scarbutt• 7 years ago

You must be new here.

dominotw• 7 years ago

same reason "hello world" examples for languages exist.

Wolfr_16• 7 years ago

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

Vinnl3• 7 years ago

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/

spoofedboy• 7 years ago

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

cambalache• 7 years ago

I agree, the reality is most people in the software world are too nice and polite, which is great but tend to foster the amount of nonsense because few people are willing to call it out for fear of being branded a hater.

yroc92• 7 years ago

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.

saagarjha2• 7 years ago

What kinds of things do you find yourself using dynamic functionality for on a personal website/blog?

deltron30303• 7 years ago

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

Wolfr_16• 7 years ago

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.

deltron30303• 7 years ago

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.

bwblabs• 7 years ago

Sapper is very useful and has quite some nice properties:

- automatic SSR (Server Side Rendering)

- possibility to export to server-less plain HTML/CSS/JS

- option to resource preload/fetching on mouseover/touchstart (a headstart of 300+ms)

- serviceworker cache: PWA, offline support, etc.

- session stores

Sure there is room for improvement (e.g. i18n), but it very useful and powerful already today.

amelius2• 7 years ago

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?

Wolfr_16• 7 years ago

Here's a fun demo to look at: https://twitter.com/rich_harris/status/1200807516529147904

daliusd2• 7 years ago

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.

crtlaltdel2• 7 years ago

Svelte looks interesting, however I must say that when I saw stuff like `{#if value} <tag> stuff </tag> {/if}` it really was a turn off for me. One thing I really like about React is the lack of template logic like that. This was something I never cared for in Angular 1 either. I am sure that there are many advantages to it...its just never really resonated with me. Can anyone point to material that could help me understand the value?

ng124• 7 years ago

Same, I really don't like the mental overhead of having to learn the template syntax. I already know JavaScript, just let me use that.

sibeliuss3• 7 years ago

I agree. Some argue that this kind of template syntax makes it easer for html folks to write logic, but really what it's doing in the long run is introducing yet another abstraction for them to learn while also poorly assuming that they "can't learn JS". Teach a person how to fish... I think the real reason, however, is that it allows for easier compiler-level optimizations.

BiteCode_dev5• 7 years ago

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 tag to know whats hapening, or I have to follow some nested map/filter/ternary chaining.

Very good react coders will not do that. They will use a lot of tooling and abstract formatting a lot. But they are few.

crtlaltdel2• 7 years ago

I'm not sure how it forces less logic in the render. Looking at the Svelte docs you can do this:

``` {#if invokeFunction()} <p>This function returned a truthy value!</p> {/if} ```

And with React do this:

``` { invokeFunction() && <p>This function returned a truthy value</p> } ```

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 verbose syntax in the Svelete example does make it super obvious. The in-line React example is obvious to me...but maybe that's because I've been writing js for so long.

Where I feel the cognitive overhead pain in looping. Svelete's docs say:

``` {#each collection as { vars }, i} <p key={i}> {vars} </p> {#/each}

```

For some reason, when I see this it rubs me the wrong way. I understand it...but my instinct is to just map over the collection like I would in a plain-old Node.js project.

``` { collection.map((vars, i) => <p key={i}> {vars} </p> } ```

I guess that saving a handful of keystrokes in exchange for super clearly expressing the intent may be a good tradeoff, even if my inclination is towards more terse code.

indigodaddy• 7 years ago

Some nice musical choices in the top music. Big Thief produced two amazing albums in 2019. Glad to see Balthazar mentioned. They don't get nearly enough love, especially in the US. Also, to note, the ratio of quality musical bands to population in Belgium is second to none in my opinion. One of my favorite bands is Intergalactic Lovers. One of the best female lead singers around..

Wolfr_16• 7 years ago

Thank you :)

diminish• 7 years ago

Does svelte have any traction recently? Any big names using it?

mellosouls• 7 years ago

It seems to have PR traction (no snark intended), it keeps popping up on here, so some people must like it.

Wolfr_16• 7 years ago

It did well in the State of JS, but there are no big names using it. I think it will have grow in popularity in 2020. The community is still relatively small.

arxpoetica• 7 years ago

The list of "who is" is most certainly growing, and there are definitely some bigger names out there: https://github.com/sveltejs/svelte/blob/master/site/src/rout...

Jobs listings are cropping up in sundry places too. See for example: https://sveltejobs.dev/jobs/apple-senior-front-end-developer

sergiotapia• 7 years ago

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.

pakpoi• 7 years ago

There is a plugin for prettier[1] and for eslint[2]. Both work reasonably well. I hear there is good support for VSCode, but I haven't tried.

[1] https://github.com/UnwrittenFun/prettier-plugin-svelte [2] https://github.com/sveltejs/eslint-plugin-svelte3

daliusd2• 7 years ago

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

rado• 7 years ago

Excellent site, thanks for sharing.

marcus_holmes2• 7 years ago

coughElm/cough

Rapzid2• 7 years ago

I need to read more into svelte but I often find myself bogged down the contrived surgical DOM update examples.

Well.. With redux or Mobx you are largely updating existing DOM attributes in both Vue and React. The overhead in changing existing attributes on components is fairly minimal, and it's certainly not where the bulk of the performance issues in these systems are. It's also not where the value is.

The real value in Vue and React is reconciling data _graphs_ with the DOM _graph_. Unfortunately the need to reconcile the full graph, or even parts of the graph, is where a lot of the performance hit comes from. Particularly with lists; hence virtual scrollers. With the advent of proxies though, I would suspect both Vue and React could be retooled a bit to be more clever about how the DOM graph gets updated in response to changes in lists and other data graphs. More "surgical" so to speak.

Am I missing something or could the bulk of the performance gap be made up without needing to ditch React and Vue(throwing the baby out with the bath water so to speak)?

How I made a website with Svelte

Related Stories