14 ms·
The Svelte Compiler Handbook
- vjeux 7y agoNice to see excalidraw.com used for the illustrations!
- vijaybritto 7y agoGreat work on the tool!
- xrd 7y agoYour article on it is great! https://blog.vjeux.com/2020/uncategorized/reflections-on-excalidraw.html https://blog.vjeux.com/2020/uncategorized/reflections-on-exc...
- lihautan 7y agoYes! it's very nice and easy to draw illustrations with it!
- xupybd 7y agoHaving a hard time choosing between Svelte and Elm. For a lone in house dev, any recommendations?
- orthoxerox 7y agoPlug Elm compiler into Svelte to create a monster, ensure your name will be cursed by those who follow you.
- ampdepolymerase 7y agoTheir approaches and style are completely different. Try both.
- stanislavb 7y agoI'd say Svelte is much closer to "regular" programming. You will have to bend your thinking a bit with Elm. Svelte seems great, but it seems to be developed by one person primarily. Also, that person lives in NY and the project looks paused at the moment.
- stanislavb 7y agop.s. Svelte is great, and I can't wait to start working more actively with it.
- tobr 7y agoWhat makes you say it looks paused? There’s been a very steady stream of releases since the big 3.0 launch last spring. There’s certainly more than one active contributor, although the core team is just a few people.
- PudgePacket 7y agoIt just had a major release :P any faster and people would be complaining about churn !
- untog 7y agoLooking at the Github commits I’d say neither statement is true? Seems to be plenty of contributors that have contributed recently: https://github.com/sveltejs/svelte/commits/master https://github.com/sveltejs/svelte/commits/master
- arkanciscan 7y agoThat person is also a jerk (in my experience)
- pts_ 7y agoElaborate please.
- arkanciscan 7y agoIt was a Twitter exchange that's been deleted so I can't remember the details. Suffices to say he was rude to me and that's colored my opinion of Svelte ever since.
- donohoe 7y agoWell, as someone who has met him several times I found him witty, kind, and a very friendly fellow. I'm sure you are a very nice person but it is possible someone out there thinks you're a jerk despite that.
- chvid 7y agoReact
- tomerbd 7y agoUse Elm for fun and React/Svelte for Profit
- IshKebab 7y agoThe problem with Svelte is it doesn't support Typescript. You pretty much need that on any reasonable size project unless you are happy to spend your life tracking down runtime bugs. Vue has a similar problem (it sort of supports Typescript, but not properly and templates aren't type checked). I've not used Elm so maybe that is better. React has good support for type checking. I would use that.
- orange8 7y ago> Typescript. You pretty much need that on any reasonable size project unless you are happy to spend your life tracking down runtime bugs I'd say it depends on your teams skill set and level of disciple. The best defence against a buggy codebase isn't a programming language or framework, its good all fashioned discipline.
- bambataa 7y agoDon’t need to catch bugs if you just don’t write them! taps head. It is still worthwhile imo to have something that catches mistakes even great people make.
- orange8 7y agoI completely agree. That something is a linter, of which TypeScript is just one of the many options available. This whole idea of you cannot write a big app in JS is just peddled by those who do not understand, or hate JS. A good linter, proper programming practices, discipline will get you there. Anytime someone peddles a language or framework as a magic bullet to clean code, they're either selling you some snake oil or have drunk too much of some koolaid, imho.
- giantDinosaur 7y agoThis is the kind of attitude that has resulted in a million code vulnerabilities in C because the idea that it's inherently unsafe is just an idea 'peddled by people unskilled in its application' (to re-express nicely). It's the kind of attitude which will ignore the many inconsistencies in languages which were the result of historical accident instead of good design because it's just a blind acceptance of the way things turned out to be rather than what they _could_ be. Many who go on about 'discipline' are often creating error prone applications and, ironically, peddling 'discipline' as that very magic bullet to cure all ills. I don't know if I've even seen discipline defined beyond some self-referential 'avoid doing these bad things that our language/environment allows by knowing that they're bad before you make the mistakes that show you they're bad'. Do developers just shrug and accept it as a fundamental design constraint to good programming languages when their booleans add with their integers and concatenate with their strings and give essentially random results? Do they not wonder: is there a system, more fundamental than linting, which can solve many of these issues in a general case?
- maps7 7y agoI picked up Svelte recently and I am happy with it. There is good documentation and examples and any questions I had were already answered online. I haven't used Elm yet.
- adelarsq 7y agoTry F#. Has good tooling and its possible to use the ELM arch. See https://zaid-ajaj.github.io/the-elmish-book https://zaid-ajaj.github.io/the-elmish-book
- xupybd 7y agoThank you this looks great. Okay now another tool to try. This is tricky business when you're looking for the tool set you want to invest in for the next 2 to 5 years and there are so many promising options.
- saila 7y agoI used Svelte 3 for a fairly complex side project last year (rewrote it from React), and it's my favorite JS framework so far. I do wish the TypeScript story was better though. I've also used Elm for another little side project, and it was super fun to learn, but it was a bit mind-bending at first. I think Svelte is a fairly safe choice because it's actively developed and because it's not too different from Angular/React/Vue. If there's any possibility that you'll have to hand this code over to someone else, I think Elm is a much less safe choice. So, to echo tomerbd's reply: Elm for fun; Svelte for profit.
- wolfadex 7y agoJust a reminder that Svelte, in Rich Harris's own words, is a language and not a framework. It technically isn't JavaScript, just an incredibly similar syntax.
- wolfadex 7y agoWhile I primarily use Elm for all my front end side projects, I do think it's worthwhile to try both. I'm currently writing a blog about trying as many front end frameworks/languages as I can. I'm going with this approach because I want to see what I can learn from each of them. For example, I've learned from Elm that compilers can be much friendlier. I've learned from Svelte that people are more willing to accept what appears to be familiar. You may learn something completely different.
- hitekker 7y agoPrezi, the original company that backed Elm, laid-off the maintainer and then deprecated Elm in their codebase.
- rgoulter 7y agoI wasn't aware of that context. Though evancz now works at NoRedInk. https://www.noredink.com/about/team https://www.noredink.com/about/team
- michaelcampbell 7y agoIf you haven't yet, find and read the lengthy "why I'm leaving elm" post; there's a big discussion here also. May provide some impetus one way or the other for you.
- alserio 7y agoI was missing a resource like this. Also, I'm looking forward to the next "Compiling Svelte in your head" article.
- vitoc 7y agoVery clear and crisp overview of the compilation process!
- ha4fsd3fas 7y agoThis is very useful. I have just started contributing to svelte and it was a bit overwhelming even though the bugs were very well isolated in the codebase.
- amelius 7y agoI skimmed through it, but couldn't find a description of the distinguishing feature of svelte, i.e. how the incremental updates are performed.
- PudgePacket 7y agoIt's actually really easy to read the svelte compiler output! You'll see exactly how it works :P
- jiofih 7y agoI assume people downvoting this comment are not familiar with Svelte? You can in fact see how it works by looking at the output. Go to the REPL at https://svelte.dev/repl/hello-world https://svelte.dev/repl/hello-world and select “JS output”.
- BE-CONSTRUCTIVE 7y agoIf you see that something is missing, just add it! If you see something is done bad, just make it better! This is the way a successful society works, this is especially true for the open source society of planet earth. Be constructive, it is a way of life that will make you happy. Good Luck!
- alserio 7y agoFrom the same author, you may find this useful: https://lihautan.com/compile-svelte-in-your-head-part-1/ https://lihautan.com/compile-svelte-in-your-head-part-1/
- k__ 7y agoI think the idea is to provide the programming model that React allows via its virtual DOM, but compile all that code away, so you end up with code das works without a virtual DOM. Direct DOM interactions are faster and you don't have to bring a whole VDOM library.
- maps7 7y agoThank you! I was just thinking yesterday that I wanted to understand Svelte more. I will dive into this today.
- lihautan 7y agolet me know if there's anything unclear of or things you would like to learn more about!
- xellisx 7y agoI'm surprised Apprun nor Solid have been mentioned yet. Are there any TypeScript reactive frameworks? I know you can use TS with the others, but finding tutorials can be a pain since it all these are JS first frameworks.
- Trufa 7y agoI'm actually working on one. I don't know what will come out of it, but it's an interesting endeavor. As soon as it's shareable I will share it on Github. I'm basically trying to do a superset of typescript where you create elements so: const root = c({ el: 'div', children: [ `hello, ${store.user.name}` ], attr: { class: 'bold smart', id: 'abc', bla: true, }, evts: { click: () => { console.log("Clicked") } } }); And store store.user.name is "magically" reactive. Was that what you meant?
- bufferoverflow 7y agoThat is awfully verbose.
- Trufa 7y agoI'll hopefully add jsx eventually that will help with the visual aspect of the verbosity.
- wolfadex 7y agoWhat's wrong with being verbose?
- bufferoverflow 7y agoYou need to write more, you need to read more, and whoever maintains your code will need to read more. More chances for typos. That means more time wasted for everyone. Why do you think we have async/await now instead of manually typing out all the promise syntaxic mess every time?
- lostintangent 7y agoThis is so awesome! I wonder if it would be useful to have this knowledge “overlayed” on top of the Svelte compiler source itself. That way, contributors could clone the repo and get an annotated tour of the compiler process, directly from their editor. I’ve been working on a side-project, that allows recording and playing back interactive, guided walkthroughs of a codebase. This seems like an excellent “test case“ for that experience, which I might have to experiment with :) https://aka.ms/codetour https://aka.ms/codetour.
- dragosmocrii 7y agoI like Svelte very much. My biggest struggle is with tooling, especially the lack of proper IDE support. I know there are several IDEs with plugins for Svelte, but they're either obsolete or lacking essential features. That's why I won't use it for me next project, just not worth it going against the wind. Now, I am looking at Flutter. Seems to match my needs, and it's also actively maintained. Never underestimate the power of proper tooling and abundance of documentation, better be productive rather than cool.
- jeremyjh 7y agoFlutter web support is in beta. I've never heard of anyone using it. Don't you think you are swimming upstream there too?
- satvikpendem 7y agoFor applications it's actually quite good, if you use the WASM renderer instead of the DOM based one. I say for applications and not websites as this method will not have any SEO since it renders onto a canvas element. It does have accessibility as Flutter constructs a separate semantic tree on top that accessibility devices can read. So Flutter Web is pretty nice if you're not making a forum for example but moreso any type of CRUD or business app where text is not a big factor. Of course, since it's Flutter you can then build mobile and desktop apps as well from your application for those who want more control.
- seeekr 7y agoSvelte support in the Jetbrains family of tools is great (IDEA, Webstorm etc). There are a few issues, but they're all minor. Started using Svelte for serious work a few months ago, very happy with it, best frontend framework I've worked with thus far.
- michaelcampbell 7y agoI'm just starting to play with Svelte, but have very little JS background. Which flavor of the jetbrains tools are you actually using; webstorm or IDEA? I have the all-tools sub, so could use either but is one better than the other?
- combatentropy 7y agoHow did Rich Harris, a "graphics editor," write Svelte? So many designers hardly know JavaScript at all. This one wrote one of the most advanced JavaScript frameworks I've ever seen. It's not just JavaScript. He wrote a compiler that takes a custom, declarative syntax and converts it to imperative JavaScript to surgically update the DOM.
- hibiscus4156 7y agoFunny you mention this, Evan You, the author of VueJS was a graphic designer before writing VueJS
- earthboundkid 7y agoI wonder if they have more interest in UX than most people, and that gave their frameworks the edge.
- kick 7y agoProgramming is not a particularly difficult skill. During the 1980s, it was taught in grade schools. JavaScript may be a worse and more difficult language than the ones you could find in the micros scattered across schools, but it's not an order of magnitude more difficult to use effectively. In a field that goes hand-in-hand with programming, which includes pretty much every artistic one, it shouldn't be all that surprising that people know how to use/are at least curious enough to learn the tools available to them.
- PaulHoule 7y agoActually JS is better: try writing a compiler in BASIC. In 2020 a graphic designer can do LISP style metaprogramming because of a number of subtle properties of the module system.
- kick 7y agoMore complex ≠ better. There are Lisps that are almost universally seen to be great. There are absolutely terrible Lisps as well.
- nojvek 7y agoI really like that Svelte does compiler time dependency analysis such that there is less work to do runtime. Can we bring this ideas to react and Vdom based frameworks? I imagine Babel/typescript can analyze jsx to find which attribute are bound to a variable and which are just static. The static ones don’t need to be diffed, only the dynamic ones.
- spankalee 7y agoYou don't need a compiler to do that. lit-html does this at runtime, and the benefit from not diffing static content is large.
- nojvek 7y agoat compiler time, you can type check and statically validate. Doing things at runtime with lit-html where things are in a string, quickly falls apart in a large project. One of my biggest griefs with Angular was that you could miss an ending tag in the template and it would work fine until it blows up in production when a customer accesses that specific scenario. I stay away from magic templates compiled at runtime. I've been bitten way too many times. Plus it's not good for load performance when you have to ship a string compiler with your code.
- spankalee 7y agoHow do you think lit-html templates would fall apart? There's nothing magic about them. They has as defined semantics as HTML or JavaScript - both of which are languages written as strings. We use lit-html in thousands of components at Google with very strict type-checking and linting. You simply aren't allowed to miss an end tag, or bind to a non-existent attribute or property. The performance and code size are excellent, beating every major framework including those using compilers. The "compiler" we use is simply the HTML <template> element and a tree-walk. It's very, very fast and very, very small.