tag: Svelte

In this post let us create a simple blog using Sveltekit. Why Sveltekit if you ask - Because it’s cool Make your pages interactive without a big JS payload for the client Fast Get started with the following command in your favorite terminal - pnpm create svelte@latest avix-blog-sveltekit This should initiate the folder with basic sveltekit structure and initiate a few files. Choose Skeleteon project as an option and select/de-select Javascript, Prettier and ESLint options based on your preferences. ...

Coming from the Vue world, Reactivity in Svelte for anything more than simple strings feels.. a bit different. Vue has made me lazy when handling reactive arrays or objects. All I have to do with the older Object API is - // nums: [1, 2] addToNum() { this.nums.push(this.nums.length + 1); } Directly modifying an element (e.g. this.nums[1] = 'a') would not work though, and that was perfectly fine. It is more tricky for objects - this.planets["jupiter"] = 5 will not trigger reactivity. We could work around this by this.planets = { ...this.planets, jupiter: 5 }. (Or, use $add if you are weird). ...

Svelte makes working with apps really simple. It brings the clarity of Vue but adds even more simplicity in the way components are created and used. For one of the demos I just wanted to showcase what the simplicity translates into for a simple website that shows “quote of the day” but also needs to provide a “SPA experience” - completely off the script. All I did was to start the app - ...

I was getting back to Svelte for a small project and ran into a strange issue. npm run dev did not run the svelte app as expected - no output or errors. First I create a new project. npx degit sveltejs/template awesome-project-1 cd awesome-project-1 npm i npm run dev And, I get greeted with nothing. I did not have any errors or output to debug. tldr; Set config ignore-scripts to false and retry. ...

Let’s create a simple ’to do’ application using Svelte and GraphQL. The objective is to demonstrate getting started on a GraphQL query and insert operation in a Svelte component. If you are new to Svelte, you may want to go over what Svelte can do from the official site, or see Svelte quick overview. Also, we will not quite dwell on the backend server in this post - you can follow along if you have any GraphQL backend. If not, I suggest you get started with a GraphQL setup of your own in the next 15 min. I will use the data structure and statements from the server setup described in that post. ...

The typical Javascript frameworks love playing the middleman. They continue playing that role at development and at run time. Svelte is not your typical middleman - instead the framework lays out the path during build, and completely hands over to standard Javascript at runtime. If that does not pick your interest - I don’t know what will 😜. This is the dev cycle cycle for a typical framework - Create your application using a template provided by framework Create application using the excellent toolset provided by framework. The development is almost magical - use components for max reuse, and test/debug your code easily and quickly Package everything without fuss. The build scripts will include a lot of framework code + your own code Deploy build to your web server and reach nirvana While frameworks do an excellent job of running applications, they sit on top of Javascript and web standards to deliver that experience. ...