Svelte - Async Component

Not sure what to call this but I think it’s cool!
Featuring svelte:fragment, state machine (?), slot magic, Cell, declarative

REPL: https://svelte.dev/repl/307b2ac4d87f4569a19a0c30de7acef6?version=3.37.0

#svelte

What is GEEK

Buddha Community

How to Create Reusable Components in Svelte.

In this video I will be showing how easy it is to build reusable components in Svelte.

#svelte  #component 

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte

Svelte - Async Component

Not sure what to call this but I think it’s cool!
Featuring svelte:fragment, state machine (?), slot magic, Cell, declarative

REPL: https://svelte.dev/repl/307b2ac4d87f4569a19a0c30de7acef6?version=3.37.0

#svelte

Can You Build Web Components With Svelte?

I recently looked at Svelte as I’d been hearing a lot about it and was curious to see how it measured up against Vue, which I use for pretty much all my frontend work. In particular, I was curious if it would be a better fit for building web components, as it seemed to have some major advantages compared to Vue. I decided to write this article because I think Svelte could be the perfect framework for building web components, but currently there are some things which are holding it back, and if you are considering using it, you should probably know about them, and the possible workarounds before you make your decision about which framework to use.

In theory, all you need to do to convert your existing Svelte app into a web component, is add the <svelte:options tag="component-name"> somewhere in your .svelte file with whatever you want that component to be named, and enable the customElement: true option in the compiler. That’s it! Once that compiles down, all you need to do is include the built bundle, and you can start using your shiny new web component.

That looks way too easy, so where do the problems start? Well, as usual, the “Hello World” works as expected, but as soon as you try to do anything else, you start running into issues. I will list all the issues I have encountered so far here, including any workarounds and I will try to link to the relevant Github issues where I can.

You must tag every component you use!

https://github.com/sveltejs/svelte/issues/3594

So you’ve made it past the “Hello World” web component, and want to start making something a bit more advanced, and you’ve created another svelte component. You don’t want to export it as a web component, you just want to use it inside your main component, but that won’t work.

// App.svelte
<svelte:options tag="my-awesome-component" />

<script>
  import OtherComponent from './OtherComponent.svelte';
</script>
<OtherComponent />

And in a separate file we have:

// OtherComponent.svelte

<p>Hello World!</p>

Builds fine, but when you try to use it:

TypeError: new.target does not define a custom element

The way you can fix this is to add <svelte:options tag="some-name"> to every component that you use. This forces you to create a web component out of every single svelte element that you use in your code.

#web-components #frontend-development #web-development #svelte #javascript

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

Svelte can be used anywhere and for anything you’d use Angular, React or Vue for. It’s a JavaScript tool used for building fast web applications, with a big focus on super slick and interactive user interfaces that are not only incredibly easy to build within the Svelte framework, but are also highly code efficient – never a bad thing.

There’s no performance cost associated with the framework’s abstractions, nor is there that initial dip in performance when an app first opens that’s usually attributed to the DOM diffing version update checking process.

Better yet, there is the flexibility to either build the entire app in Svelte, or to add in segments incrementally to an already existing base of code. Components made in Svelte can operate as stand-alone packages that don’t require the overhead of a conventional framework dependency, and can be used anywhere really.

SUBSCRIBE to Kofi Group: https://www.youtube.com/channel/UC1mBXiJnLtiDHMtpga0Ugaw?view_as=subscriber

---

00:00 - Intro
02:49 - What is Svelte
04:22 - What is Svelte used for
06:01 - Svelte pros
09:08 - Svelte cons
11:00 - Who’s using Svelte
*

Website: https://www.kofi-group.com/

Blog article version: https://www.kofi-group.com/5-reasons-why-svelte-is-improving-ui-development/

Remote jobs: https://www.kofi-group.com/search-jobs/

Kofi Group helps startups outcompete FAANG (Facebook, Amazon, Apple, Netflix, Google) and big tech in the highly competitive, war for talent.

Our videos cover hiring tips and strategies for startups, software engineering and machine learning interview preparation, salary negotiation best practices, compensation analysis, computer science basics, artificial intelligence, tips for other recruiters, and much more!

Hit the SUBSCRIBE button and we’ll see you in the comments!

---

Music - Throwaway 2 by XIAO-NIAO
https://www.youtube.com/watch?v=DqeGWcZ0dMg
https://soundcloud.com/bird-xiao/throwaway-2

---

#svelte #javasript #softwareengineering #startup #faang #kofigroup

#svelte #javasript #svelte.js