[From sandbox] Write less code

[From sandbox] Write less code

HIP by Svelte after the recent release of the 3 version of the framework still has a place to be, as evidenced by the greatly increased community and a huge number of questions both in the official chat and in and in our Russian-language telegram channel. More and more developers are sneaking up or seriously looking at this technology and are thinking about using it in their new projects. For these developers and everyone else interested in the topic of maximally efficient code writing, Rich Harris , the author and ideologist of the framework, published the article about how Svelte helps a developer to minimize his efforts in creating modern reactive web applications, which I suggest translating below.

There can be bugs in any code. Accordingly, the number of possible bugs in the application grows with the amount of code you write.

Obviously, the more code we have to write, the more time it takes. Soon, it ceases to be enough for such necessary things as optimization, adding new features to the app, well, or for walks in the open air instead of working at a laptop.

In fact, it is widely known that, with an increase in the code base of the application, time project development and the number of bugs grow not even linear, but with quadratic dependency. This may explain our subconscious behavior, when a pull-request for 10 lines we will easily pay such a level of attention that rarely gets to a code larger than 100 lines. And as soon as the code becomes too long, and ceases to fit on one screen, the cognitive efforts necessary for its understanding increase significantly. We are trying to rectify the situation by refactoring and adding comments - actions that almost certainly lead to even more code. This is a vicious circle.

We're all a bit obsessed, right? We monitor the performance of the application, the size of the bundle and everything else that we can somehow measure, but we rarely pay attention to the amount of code we write.

Code readability is important

Of course, I'm not saying that we have to use any tricky tricks to make our code as compact as possible at the expense of readability. Also, I do not claim that reducing the lines of the code is an end in itself, as this can help turn a normal readable code like this ...

  for (let i = 0; i & lt; = 100; i + = 1) {
  if (i% 2 === 0) {
  console.log (`$ {i} is even ');

... into something indigestible:

  for (let i = 0; i & lt; = 100; i + = 1) if (i% 2 === 0) console.log (`$ {i} is even  `);  

I just want to convince you that it’s better to prefer languages ​​and patterns that allow us to write less code in a natural way.

Yes, I'm talking about Svelte

Reducing the amount of code you need to write is an obvious advantage of Svelte. To illustrate this, let's look at a very simple component implemented in React, Vue and Svelte. First version of Svelte:

  & lt; script & gt;
  let a = 1;
  let b = 2;
 & lt;/script & gt;

 & lt; input type = "number" bind: value = {a} & gt;
 & lt; input type = "number" bind: value = {b} & gt;

 & lt; p & gt; {a} + {b} = {a + b} & lt;/p & gt;  

View in action

How do we do the same in React? Most likely, it will look like this:

  import React, {useState} from 'react';

 export default () = & gt;  {
  const [a, setA] = useState (1);
  const [b, setB] = useState (2);

  function handleChangeA (event) {
  setA (+ event.target.value);

  function handleChangeB (event) {
  setB (+ event.target.value);

  return (
  & lt; div & gt;
  & lt; input type = "number" value = {a} onChange = {handleChangeA}/& gt;
  & lt; input type = "number" value = {b} onChange = {handleChangeB}/& gt;

  & lt; p & gt; {a} + {b} = {a + b} & lt;/p & gt;
  & lt;/div & gt;

And finally, in Vue:

  & lt; template & gt;
  & lt; div & gt;
  & lt; input type = "number" v-model.number = "a" & gt;
  & lt; input type = "number" v-model.number = "b" & gt;

  & lt; p & gt; {{a}} + {{b}} = {{a + b}} & lt;/p & gt;
  & lt;/div & gt;
 & lt;/template & gt;

 & lt; script & gt;
  export default {
  data: function () {
  return {
  a: 1,
  b: 2
 & lt;/script & gt;  

In other words, it takes 442 characters in React and 263 characters in Vue to achieve something that takes 145 characters in Svelte. React version is literally three times more!

I performed the character counting by copying the code to the clipboard and running the command pbpaste | wc -c in the terminal

This strong difference is more likely an exception - from my experience, the React component is usually about 40% larger than its equivalent in Svelte. Let's now take a look at the features of Svelte, which allow us to express our ideas more compactly.

Top Level Elements

In Svelte, a component can have as many top-level items as you need. In React and Vue, a component must have a single top-level element — in the case of React, an attempt to return two top-level elements from a component function will result in a syntax error. You can use the snippet - & lt; & gt; - instead of & lt; div & gt; , but the extra level of nesting is not going anywhere.

In Vue, the markup should be placed inside the & lt; template & gt; element, which, in my opinion, is superfluous.


In React, we must handle input field events like & lt; input & gt; :

  function handleChangeA (event) {
  setA (+ event.target.value);

This is not just a very boring construction that takes up space on the screen; it is also an additional part of the code where errors may appear. Conceptually, the value of the text field is tied to the value of a and vice versa, but this relationship is not clearly expressed - instead, we have two closely related but physically separate code fragments (the event handler and the value = property {a} ). In addition, we must remember that it is necessary to force a string value to a numeric value using the + operator, otherwise 2 + 2 will be 22 instead of < code> 4 .

As with Svelte, Vue has its own way of expressing a binding - the v-model attribute, but here we have to be careful and use v-model.number , even though we take the value from & lt; input type = "number" & gt; .


In Svelte, the local state of the component is updated using a simple assignment operator:

  let count = 0;

 function increment () {
  count + = 1;

In React, we use the useState hook:

  const [count, setCount] = useState (0);

 function increment () {
  setCount (count + 1);

There is much more extraneous noise - both code fragments express the same concept, but in the second case 60% more characters were used.Therefore, when you read such a code, you will have to make much more effort to understand the author’s intent.

Well, in Vue we have a default export containing the data function, which returns an object literal with properties corresponding to the local state of the application. I also note that you cannot just import and immediately use such things in the markup as functions from external files and child components, since you first need to 'register' them, specifying the default in some part of the export.

Forget about the template code

This is only a small part of Svelte's capabilities that help you create UI applications with minimal effort. There are many more — for example, reactive ads , which inherently do the work of useMemo , useCallback and useEffect from React without unnecessary verbose template code (which also heavily loads the garbage collector by creating inline functions and arrays each time an application changes state).

How? We chose a way to bypass the limitations of the runtime in the browser. Because Svelte is a compiler , we are not tied to JavaScript features: we can create method of developing components as we like, and not adapt it to the semantics of the language. Paradoxically, but with this approach, the code becomes more idiomatic. For example, we use variables in a natural way, and not through a proxy or hook, while getting significantly more productive applications.

Useful links

Documentation in Russian for Svelte 3
Russian tutorial on Svelte 3
Examples in Russian for Svelte 3
Russian-language channel Telegram

Source text: [From sandbox] Write less code