There is React, Vue, and Angular, and then there is Svelte. It makes so many things different from all the others, which comes with an awesome developer experience.
Time for an introduction to Svelte, the frontend framework you might fall in love with. 💛
🧵🔽
1️⃣ What is Svelte?
Svelte is a component-based frontend framework like React and Vue that promises:
- Less code
- No virtual DOM
- True reactivity
It delivers on all of these pretty well.
It currently has 47k stars on GitHub and an active community, including 391 contributors.
The community is pretty active, and unlike React, there is no huge corporation backing it.
But no need to worry, Svelte won't vanish anytime soon!
The project is licensed under the MIT license and was initially released on November 26, 2016, by Rich Harris, its creator.
The project itself is implemented in TypeScript.
2️⃣ How does it work?
Unlike React or Vue, Svelte doesn't use a virtual DOM or a change detection algorithm like Angular.
Instead, it comes with a compiler that parses your code and emits new code that precisely updates the DOM.
This means that no diffing needs to take place. Only gradual DOM updates, which a browser can handle pretty well.
And this compiler can do even more because Svelte doesn't need hooks to update a component's state.
A simple, plain JavaScript statement is enough. That statement is then compiled into something that actually handles state changes.
Like React has its *.jsx files, and Vue has its *.vue single-file components, Svelte has *.svelte files.
Similar to single-file components in Vue, a svelte file can contain HTML, JavaScript, and CSS.
You can see an example of this below. 👇🏻
To give you another example of Svelte's built-in reactivity, take a look at the component shown below.
No (React) hooks, no redux, no state-management library. Only plain JavaScript and a directive.
This is the power of the Svelte compiler!
What you see is relatively trivial code, but it's enough to make the outcome fully reactive. The same functionality in React would take you more code to write, and many more hooks and functions to work properly.
More advanced features, like lifecycle-hooks and conditional rendering (which isn't plain JS anymore), open up further use-cases.
If you, for example, want to render a block for each entry in an array, below is how you do it in Svelte.
It's not plain JavaScript, but it's still a readable syntax that is necessary so the compiler can process it correctly.
3️⃣ What makes Svelte so powerful?
Simplicity and the power that comes with Svelte's approach make it so powerful.
Virtual-DOM implementations made single-page applications remarkable, but they come at a cost. For example, diffing the virtual DOM and the actual DOM, ...
... and then applying gradual changes at runtime costs performance and sometimes brings complexity.
Moving all this into a compile-step and then letting the browsers do what they are good at (managing the DOM) makes your apps faster and your bundle size smaller.
What you deliver are your frontend code and a lot less library/framework weight.
Oh, and do you still remember the reactive example? Here is how the emitted JavaScript code looks. That's a lot of burdens taken off your back and put onto the compiler's shoulder.
Can you still recall all those integration libraries that make many other libraries compatible with the virtual DOM? Yes, I know that you don't always need those. But with Svelte, you'll never need them because there is no virtual DOM.
4️⃣ Is it worth a try?
In my opinion, it's definitely worth a try. It is a fresh approach to a common problem, which tries to put a lot of effort into making things simpler for developers.
The official documentation is awesome, with a great tutorial going over every important feature. It's written very well and makes it easy to follow along.
So, if you happen to have some spare time, maybe try it out. It may well be worth your time!
5️⃣ Want More Content Like This?
If you like this type of content, leave a like, it would mean the world to me! 🙏🏼
Perhaps your own community loves this type of content, as well? Retweet it!
And if you want more content like this from me, feel free to follow me. 💛
• • •
Missing some Tweet in this thread? You can try to
force a refresh
This is a short introduction to Solidity, the programming language used to create smart contracts on the Ethereum VM.
🧵👇🏻
1️⃣ What Is Solidity?
Solidity is an object-oriented, high-level programming language designed to implement smart contracts on the Ethereum Virtual Machine.
It is statically typed, supports inheritance, libraries, and complex user-defined types.
Solidity is a domain-specific language. Besides Python or JavaScript, which are general-purpose languages, Solidity is only meant to be used for smart contract development.
You did some Solidity tutorials, and now you're stuck because you don't know what else to build?
Let me help you out by giving you three simple ideas for dApps, perfect for beginners!
🧵👇🏻
1️⃣ A Voting dApp
Build a dApp that lets users create elections. Any user can start an election and choose a registration period, a voting period, and an ending time.
During the registration period, users can sign up as a candidate.
Once the registration period closes, no one should be able to register anymore. Instead, the voting period starts where anyone can vote for their favorite candidate.
Your frontend should show open elections, the current period, the time remaining, and the candidates.
Do you know what many dApp developers struggle with?
Which data to put on-chain. More data on the chain can drive the cost up. Too much data might render your app unusable. Storing fewer data might not be an option.
Here are some ideas for you to fix this. 🧵👇🏻
1️⃣ Use A Dedicated Database
This approach will make your dApp into an app. If you bring in central data storage, you can circumvent the limits of some blockchains but it doesn't keep the promise of being decentralized.
You can store anything that you can't store on-chain in your database and associate it with a user. Whenever you need that type of data, you fetch it from your database.
Want to get into smart contract development and learn Solidity? Want to get into an area of software development where salaries currently rise through the roof?
Here are 5 awesome resources that help you to get into the language of the Ethereum VM!
🧵👇🏻
1️⃣ CryptoZombies
CryptoZombies is an awesome approach to teaching Solidity. You learn Solidity by basically playing a game, and it's free!
Learning through CryptoZombies definitely isn't as dry as the zombies are themselves!
EthereumDev gives you a full free course that covers everything you need to know in the beginning. It also covers interacting with the blockchain through JavaScript, which definitely helps you to build your own dApps!