Finding the right Framework: A Case Study

This is a blog post written from my talk that I gave at London Web Performance back in January. Take a peak.

Here's what this case study will cover.. Feel free to skip to the good parts!

Table of contents

• Why a case study
• The Considerations
• The Candidates
• Preact: Pros vs cons
• Vue: Pros vs cons
• Svelte: Pros vs cons
• Code Comparisons
• Just tell me which one you picked, dammit

So what's the issue? 🤷‍♀️

Over time Zoopla has acquired five different estate agent CRM systems, that are predominantly responsible for the same function - managing the estate agents office and the residential sales and lettings process. The plan is to consolidate the functionality, and create a modern cloud-based SaaS platform, that enables agents to performs those functions in a simple and clear system that is as easy to use as modern consumer products, like Spotify or Facebook.

Hello! 👋

Cue The Zoopla Software Team... We are a new dedicated team with the sole purpose of taking on this challenge and build the software that estate agents use to list and manage properties and tenants.

The Considerations 💪

So, essentially what we have is a greenfield project. And therefore, finding the right framework (or compiler) will ensure that we get off to a really good, strong start. Which means there are some requirements we considered necessary when making our choice:

• It must be able to scale quickly - And I mean scale quickly in terms of size and scope.
• Must be maintained easily - So ideally it should be easy to find, read, modify, add, remove code etc..
• Must be easy to onboard - As I mentioned, we're a very new team. So as the team eventually grows, its really important that developers from all backgrounds with no direct prior experience can grasp the language with ease and ideally, we would want a language which is cognitively intuitive.
• It must be small and efficient - because we believe that performance should be at the heart of our product.

The Candidates 🤩

So these are the three candidates that we narrowed it down to:

Preact | Vue | Svelte

We felt that in terms of our considerations, these were the better suited. I created the same app three times using these 3 "candidates" so that we could gather metrics and make decent comparisons and have a better understanding about what went well, what didn't go so well, what we liked about it and what we didn't like about it, which I'll go into more later on.

Hang on, why didn't you consider React?

This is something that we've been asked a few times when we were first having this discussion internally. Basically, the bottom line is that we know that there are lots of frameworks and libraries out there that are just as suitable and just as capable at doing the job.
Firstly, you have to draw a line somewhere 😵
Secondly, we just felt that in terms of those considerations it just didn't fit those specific requirements.

So let's get started with some pros and cons..

Preact

Pros

• The API compatible replacement for React. So Preact and React share the same API. Compared to React's 135kb, Preact is only 3kb in size. That's a no brainer, right? - back to that idea of speed and efficiency, that's really important to us. If we were to use React, we would be using functional components as oppose to classes- and so we would be loading in all that overhead that defines what React classes are into the browser, just for us not to be able to use it. A massively reduced size of React makes so much more sense to us!
• Easy migration from React to Preact - As mentioned, Preact and React share the same API so if you prefer or your familiarity lies with using React for a framework, the migration would be an easy transition for sure.
• State Management - The latest version of Preact supports hooks and context API and this basically means that it provides a variety of different ways to manage the state. And this is a pro for us, because these are some of the more useful and latest features of React, so its good to see that it's continued to be supported in Preact, even though the size is massively reduced.
• The Preact CLI gives fantastic PWA support out of the box - It basically means that you can generate a best practice project in seconds.
• It works well with many libraries in React's ecosystem.

Cons

• Based on React decisions - As new React features become available, it may take some time before support is added to Preact.
• Limited feature set - So obviously with Preact being massively reduced in size, there will be some limitations and some loss of features.
• Small community -One of the challenges I found with using Preact, is that there is not much of a presence in the tech community. Which might make it harder to find answers to questions or resolutions to errors.
• Light documentation.

Vue

Pros

• Super small framework that weighs 18KB (gzipped). - OK, obviously it's not as small as Preact but it's certainly competitive in terms of performance.
• Easy to read, intuitive, templating. - In comparison to React, which uses JSX- I believe that the Vue templating language is easier to read makes more sense upon first glance (however if JSX is your thing, it is supported in Vue).
• Extensive detailed documentation - The examples and tutorials given are clear, relevant and concise. I think my favourite thing when first using Vue, was just how good the documentation is.
• Good developer tools - I'm talking about Chrome extensions in particular. You can debug components and state in real time, but also another cool extension would be the Vue CLI interface. This means that your new Vue app could include things like routing, state store, linting, unit testing and much more.
• Native Typescript support - A lot of people are wanting to use Typescript- it would be a bonus if we chose a framework that supports that if that's what we decide we would like to use as well in the future.

Cons

• Lack of support for large scale projects - What I mean by that is Vue is much more of a grass roots movement. It was started by developers, not made by big companies, such as React from Facebook and Angular from Google- it doesn't have the backing of a large enterprise, I think would be arguable to say it means that Vue isn't proven at that scale yet.
• Lack of common standard plugins
• Over-flexible -This isn't necessarily a bad thing in some cases but Vue supports a lot of different ways of doing things which means that you could end up with some really messy patterns, inconsistent structures and perhaps its not quite as uniform as it should be.

Svelte

Pros

• Svelte compiles code to framework-less vanilla javascript. - Svelte is a compiler, its not a framework or a library and so that it means that your svelte syntax is compiled into vanilla HTML and Javascript so that your browser doesn't need to load a framework or a library to interpret that syntax at runtime. And also because it's a compiler, there are zero client side dependencies, which means that that you'll have less code, higher performance and less http requests.
• Following on from that, it was the fastest of the 3 apps for delivery and interactively.
• No more complex state management - What I mean by that is that there is no complex way of defining state or needing anything like actions for example.
• Excellent documentation -Great examples, tutorials provided and offers a working REPL which is like an interactive svelte playground.
• Accessibility warnings out of the box - Obviously because its a compiler, it's catching some of the errors on build time.
• (On a personal note, I found the syntax to be super intuitive and closer to the native web standards).

Cons

• Small community - Little or no activity on stack overflow. However, the community is mainly based on a discord app- thats the best way to get support or involvement or if you want to contribute, you'd do it through there.
• Not as advanced developer tooling
• No native typescript support - So for those who love and want to use Typescript, I think a little more setup is required.

Code Comparisons

This is a really simple function just to give a comparison but also give a flavour of what working with each framework would look like.
Basically this functions demonstrates how to create a button with an attribute of disabled = false.

Vue

<template>
    <button
:disabled="disabled == 1">
{{ label }}
    </button>
</template>

<script>
export default {
  name: "ui-button",
  props: {
    label: {
      default: () => 'Click Me!'
    },
    disabled: {
      default: () => 0
    }
  }
};
</script>

<style scoped></style>

In Vue, the component is broken up into HTML, CSS and Javascript so it's a single page component. Some developers really like this (myself included) I think that it's really well organised and if you wanted to make a fix or change in a certain component, you wouldn't need to change files- it's all right there. However the export object is a little too verbose considering how simple this component is suppose to be.

Preact

import { h } from 'preact';
import style from './style';

const Button = ({ disabled, label }) => {
    return (
        <button class={style.button}>{label}</button>
    )
}

export default Button;

In Preact we must use functional components as oppose to standard class based component- as Preact doesn't support class based functions. Overall, the whole piece is very neat and concise.

Svelte

<script>
  export let disabled = false
  export let label = 'Click me!';
</script>

<style src="./button.css"></style>

<button {disabled}>{label}</button>

In Svelte, the expression of the same component is even more concise.

More Code Comparisons

Let's take a look at the templating of each framework too. (It's worth noting that its been stripped back a lot just for the purpose of this demo ) but in a nutshell, this is just importing a JSON file and then rendering that data on the page.

Preact

import { candidates } from "./getCandidates.json";
Import style from “./style.css”

const Candidates = () => {
return (
    <div className={ style.main }>
        { candidates.map( candidate => (
            <div class={ style.name }>
{ candidate.name }
</div>
))}
    </div>
);
};

export default Candidates;

As a standard, Preact uses JSX. Whether you do or don't like it, I personally find conditional rendering and looping can be quite hard to read. Anyone used to React, will notice that it's almost identical to React. The only difference is the use of CSS modules (which is supported out of the box when creating a Preact app when using the CLI interface).

Svelte

<script>
    import { candidates } from "./getCandidates.json";
    Import “./style.css”
</script>

<div class="main">
    {#if candidates}
        {#each candidates as { name, stage, headline }}
        <div class="name">{ name }</div>
        {/each}
    {/if}
</div>

<style> (css here)</style>

Svelte has a intuitive, super simple plain english style of expressing conditions and rendering values. The code is a lot smaller and it uses block syntax.

Vue

<template>
 <div class="main">
   <div 
       v-for="candidate in candidates"          
       v-bind:key="candidate.id"
   >
     <div class="name">{{ name }}</div>
   </div>
</template>

<script>
import { candidates } from "./getCandidates.json";

export default {
 name: "Candidates",
 props: { msg: String },
 components: { Stages },
 data: function() {
   return { 
      candidates: candidates. 
   };
 }
};
</script>

<style> (css here) </style>

And last but not least, Vue provides a familiar templating style which is very similar to Angular e.g. v-for, v-bind etc. I think it'd be fair to say that Vue takes a more structured approach at using classes and the data property.

The Winner...

So with all of that in mind, the winner is;

Svelte! 🎉🎉🎉

It was a really great opportunity to delve into Svelte and I think it was apparent from early on that it would come top for us.

In the StateofJS 2019 developer survey for Front End Frameworks, it illustrates a really interesting point in terms of interest and satisfaction (amongst over things).

This was not surprising to me really that React would come first in satisfaction given how popular it is currently, but it demonstrates an interesting result because Svelte is quite high given how recent it is.

And it has to be mentioned that in terms of interest, Svelte was most popular too!

Finally, the prediction award for upcoming technology that might take over (or not) and I stress that- or not) is Svelte 🎉

Final Thoughts...

Mainly the reason why we decided to chose Svelte is because "their mission is to prioritise the end user over the developer" and this really resonated with us because putting the user front and centre is really what we want to do.

But also, why not?

P.S We are hiring! 👋