How I made a website with Svelte

#1

Post by Wolfr_ » Sat, Dec 28, 2019, 3:06 PM UTC

How I made a website with Svelte
johanronsse.be

Re: How I made a website with Svelte

#2

Post by Wolfr_ » Sat, Dec 28, 2019, 3:15 PM UTC

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.

Re: How I made a website with Svelte

#3

Post by numbers » Sat, Dec 28, 2019, 3:17 PM UTC

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

Re: How I made a website with Svelte

#4

Post by amelius » Sat, Dec 28, 2019, 3:40 PM UTC

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

Re: How I made a website with Svelte

#5

Post by dragosmocrii » Sat, Dec 28, 2019, 3:41 PM UTC

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

Re: How I made a website with Svelte

#6

Post by Wolfr_ » Sat, Dec 28, 2019, 3:47 PM UTC

amelius wrote: post #4

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

Not intentional!

Re: How I made a website with Svelte

#7

Post by factsaresacred » Sat, Dec 28, 2019, 3:53 PM UTC

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?

Re: How I made a website with Svelte

#8

Post by Bob312371 » Sat, Dec 28, 2019, 3:56 PM UTC

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

Re: How I made a website with Svelte

#9

Post by Wolfr_ » Sat, Dec 28, 2019, 3:57 PM UTC

factsaresacred wrote: post #7

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?

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.

Re: How I made a website with Svelte

#10

Post by paulddraper » Sat, Dec 28, 2019, 3:59 PM UTC

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?