What’s after Angular?

What's after Angular?

The frontend world is currently ruled by 3 colossuses known as Angular, React.js, and Vue.js, but are there any other alternatives?

And if so, are they worth using? Let’s take a quick look at what else is out there as we see it in our team.

The Standard

Besides Angular (my main go-to when it comes to the frontend development) there is its main rival – React. Since React is a library not a framework like Angular, by definition it gives you more freedom when it comes to the composition of your application and development style that you want to approach. React is known for its JSX syntax which allows you to mix javascript with HTML and CSS code.

Vue.js is different from React in this matter. It is structured like web-component so it’s separated into js, CSS, and HTML. Another thing that differs Vue.js from Angular and React.js is its origin. Vue is the only “independent” framework. What do I mean by that? There is no big company behind it like in other cases where Angular comes from Google and React has been created by Facebook. Vue.js is a better choice than Angular and React when you are looking for a small app or a quick MVP development. That is because setting up a project and its configuration in Vue takes much less time than in frameworks mentioned earlier.

Okay, but where’s the new stuff you say? There you go:

Web Components

Web components as it states on its website are: “…a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.”.

So essentially what it means is that you can create universal components with Web Components API which you can use with literally any framework (or no framework at all) that supports HTML and these components should work correctly on all modern browsers.

Probably the most popular library for creating web components right now is Polymer.
Polymer is a JavaScript library based on Web Components API created by Google employees.
Most important reasons for why Polymer is favored by Web Components developers are:
• Data binding – Connects data from a custom element to its local DOM element. Both one-way and two-way.
• Polymer CLI – Includes a build pipeline, a boilerplate generator for creating elements and apps, a linter, a development server, and a test runner.
• Conditional and repeat templates – Gives you the ability to use loops and if statements in HTML
And there’s much much more.

WebAssembly

A different approach was proposed by creators of WebAssembly which basically allows you to use low-level languages like for example C, C++, and Rust to create web applications by compiling them to WebAssembly binary instruction format – assembly-like language that runs with near-native performance.

You probably wonder how is it possible to develop a web app with this kind of languages. Well, Wasm (WebAssembly) provides you with JS API, which contains all the functionalities that you would need in web development.

So is WebAssembly going to replace JavaScript in the web development world?

Not really. It is more of an addition to the current web technology stack. Wasm should be used in certain situations, and that situations are asset-heavy performance-needing applications. Usually with a lot of computations and 3d dynamic scenes. Here are a few examples of Wasm applications that should give you an idea of what I am talking about: Google Earth, Figma, AutoCad web.

Flutter

Another tool on the list is Flutter. Flutter originally was supposed to create mobile applications (and it still does), but in Flutter 1.9 web support has been added.
Flutter uses Dart language and only this one language is used to develop applications for every intention is its frontend, backend, or mobile devices. So in theory your code for a mobile app or web app should not be that much different from each other.

One interesting thing about Flutter is a fact that it has built-in Material Design and Cupertino (iOS styled components) so it comes with a variety of very useful widgets and other advantages that those UI libraries offer (like motion APIs), you can check those out here.

This was just a really brief introduction to different frontend options out there, I’m going to make more detailed insight into those in next blog posts.

Now, at last, but not least:

Svelte

Svelte has been introduced in 2016 by its creator Rich Harris. Stating that it’s going to use a truly reactive approach, but before we get into it let’s quickly describe what Svelte actually is.
Svelte is a JavaScript component framework similar to React or Vue but with a few major differences.

Probably the most important difference is the fact that Svelte does not have a virtual DOM. React and Vue both are using Virtual DOM and because of that, the browser itself has to convert their declarative structures into DOM operations. I won’t go into details of how does virtual DOM works, but basically, what it does it checks the state of the whole application before and after the change and looks for differences in those both states and then applies what’s different to real DOM (this operation is called diffing), sounds like a lot of unnecessary comparisons, right?

Here comes the reactivity.

Svelte unlike React runs at build time which means that svelte code is compiled to imperative code which updates DOM when and where it needs to. This is obviously a big performance boost.

You probably started to wonder why is virtual DOM used by those big frameworks like React or Vue then. I think I can use a quote from the Svelte creator’s blog:

“Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones. But it turns out that we can achieve a similar programming model without using virtual DOM — and that’s where Svelte comes in”

Another thing that Svelte introduces is its own reactive statements which look like this:

$: console.log(`the count is ${count}`);

Essentially what it’s going to do is – it is going to log the string whenever count property changes and the only thing that you need to do to use it is to put $: in front of a statement which you want to become reactive. To give you a better idea of how is it working I’m going to create a component in which you can type your first name and last name assign them to fullName property and display it.

<script>
 let firstName = '';
 let lastName = ''
 $: fullName = firstName + lastName
</script>

<input bind:value={firstName}/>
<input bind:value={lastName}/>
{fullName}

I will not go into details of everything that’s happening here but what you should know that bind:value is a two-way binding so the properties are being updated while typing in the input. The important part here is the dollar syntax. Thanks to it fullName property is changed at the same moment as user is typing anything in any of those two inputs.

Of course, nothing is stopping you from writing a larger code with dollar syntax. If I wanted to update fullName only if firstName starts with letter “A” I could write something like this:

let fullName = '';
$: {
  if(firstName[0] === 'A') {
      fullName = firstName + lastName;
   }
}

Now, to display the difference in code written in React (which Svelte is most of the cases compared to) and Svelte. We’re going to create a simple app that is going to display how many seconds passed since it’s creation. (Inspired by Stateful Component on React website).

Here’s the code which you would write in those two frameworks:

React:

class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = { seconds: 0 };
    }

    tick() {
      this.setState(state => ({
       seconds: state.seconds + 1
    }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    render() {
      return (
       <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);

Svelte:

<script>
 let seconds = 0;
 setInterval(() => seconds += 1, 1000);
</script>

<div>
Seconds: {seconds}
</div>

You can see the difference right?
Both of those applications do exactly the same job, but it is immediately noticeable how much code was needed in the React app and also how readable it is with its state, setState, and rendering functions. At the same time, Svelte requires about 8 lines of pretty, easily understandable code to get the task done.

If you are interested in what else Svelte has to offer and to understand better why this framework could be worth trying I deeply encourage you to watch Rich Harris speech.