background preloader

SVELTE

Facebook Twitter

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. (Source : site officiel) Svelte.js : introduction au “compilateur en guise de framework” Note : English version here.

Svelte.js : introduction au “compilateur en guise de framework”

Depuis la sortie de sa version 3 en avril 2019, le “framework” Svelte fait de plus en plus parler de lui. De par sa légèreté et son approche à contre-pied des incontournables comme React ou Angular, l’étoile montante développée par Richard Harris, vous promet simplicité et rapidité, pour une meilleure expérience utilisateur et développeur. Et vous, vous laisserez-vous tenter par Svelte.js ? Note : Cet article se focalise sur l’aspect non-technique de Svelte.js. Pour des points plus techniques, vous pouvez vous référer à la conférence d’Alexis Jacomy, au Crash Course ou à mon POC d’application Pomodoro (liens en fin d’article). Rich Harris, développeur Front au New York Times, dans sa quête de performance et de bonne expérience utilisateur, suite à un Tweet de Mike Taylor publié en 2012, a finalement réalisé que “supprimer un JPEG pour économiser du temps de chargement” n’est pas équivalent à supprimer la même taille de JavaScript.

Introduction. Welcome to the Frontend Masters Svelte workshop!

Introduction

This is the companion site to the video course that, if you're one of the select few, you're currently watching LIVE; after the course ends it will live on as a companion resource, full of code samples and links and what-have-you. Issues and pull requests are welcome. Truly reactive programming with Svelte 3.0. That title is a bit dramatic, but then again, so is Svelte and the idea behind it.

Truly reactive programming with Svelte 3.0

If you don’t know what Svelte is yet, then strap in — you’re about to witness a revolution, and it’s going to be a ride (no pressure on the Svelte team 😅). Note that this is not a tutorial on how to get started with Svelte. There is already a great step-by-step interactive tutorial by the Svelte team that eases you into the world of reactive programming. Disclaimers are in order: I’m not a programming rockstar, and I don’t know everything. I’m just very enthusiastic about the innovations being made every day, and I like to talk about them when I can — hence, this article. Alright, let’s get into it!

But first, React. The next small thing in web development. (23) Rich Harris - Rethinking reactivity. Building an App with Svelte, the Super Fast JavaScript Framework. If you like fast JavaScript apps, you’ll love Svelte.

Building an App with Svelte, the Super Fast JavaScript Framework

It works a bit differently than some of the other frameworks that you may be familiar with. Instead of shipping a large runtime, Svelte is compiled. This means the code you end up with is optimized and dramatically reduced in size. Before we look at the code, I’ll mention that I'm not a Svelte expert. I've been reading and writing about it quite a bit, and I decided it was high time to build something. The bulk of what follows is a walkthrough of the code in this GitHub repository that I made to accompany the article. The app displays quotes from the Quotes by Design public API, and is built using four tools — Svelte, Express, webpack and Babel.

If you haven’t used Svelte before, I think you’re going to be pretty damn happy with it. The Code Let’s start with a quick review of the package.json file. Package.json If you’ve used other JavaScript frameworks, this list of dependencies will look familiar. Webpack.config.js server.js. Why SvelteJS may be the best framework for new web devs. Any web dev who's been at it for a few years has likely heard this question every other day.

Why SvelteJS may be the best framework for new web devs

I'm really interested in learning about web development, but I don't know how to start. Any suggestions? A decade ago, this would have been an easy answer. Just make an index.html, throw some tags in there, make that header turn red with CSS, and reach for JQuery (or plane ole JavaScript, depending on who you ask) to handle those mouse clicks! ...Oh, how things have changed. This has led to countless avenues to start with with varying degrees of "just type this now, and I'll explain later.

" What we need, then, is a middle ground. Enter: Svelte SvelteJS is a pretty new kid on the block just starting to get some attention. These are pretty big selling points for more experienced developers, but most beginners probably couldn't read that last paragraph without their head exploding. Sveltejs/svelte: Cybernetically enhanced web apps. Cybernetically enhanced web apps.