Frontend development is not a one-size-fits-all domain; it’s rather like a garbage plate, with many different option to fill up from. Although there are standardized approaches, methodologies, and industry standards, we can pick, choose and fill up our plates according to our own tastes and preferences.

Before we can start creating our perfect plate, we should remind ourselves of the essentials: HTML, CSS, and Javascript lie at the heart of frontend development. They are the first thing you grab at a buffet – you can’t have the garbage plate without an actual plate! 

Choosing the main course 

Making choices can be hard. Making choices when it comes to choosing your frontend framework can be a real brainbuster. Thanks to the vast community of passionate devs there is a plethora of frameworks to choose from. 

The usual, please 

The very obvious choice would be any of the industry standards like React, Vue, and Angular. They offer robust solutions and boast large communities and extensive documentation. Their robustness might come as a double-edged sword, but you can’t go wrong there when building a complex web app.  

Today’s special 

In recent years, new players have started to emerge in the regions of frontend development, which has brought a fresh perspective on how we can approach and develop our web apps. 

Preact and Solid offer simple yet performant reactive user interfaces (and signals!), all bundled in a small package.  

Svelte differs from other frameworks mainly in the way how the app is built. While frameworks like React do the bulk of the work in the browser while the app is running, Svelte shifts that work into its own compile step that happens only when you build your app, resulting in a highly optimized vanilla Javascript.  

All these frameworks offer different paradigms for building user interfaces. 

Secret menu item 

I know asking yourself: ‘That’s all Javascript, we know it, we love it (ok, not necessarily), is there something else to offer?’ 

Oh, there sure is. It’s called WebAssembly (Wasm, in short). This technology is turning 7 years old this year and offers an open standard to execute binary code on the internet. In other words, if you want to write your frontend app but are sick of working with Javascript (or Typescript, for that matter) all the time, Wasm may be the right choice for you.  

Just imagine telling your colleagues that you are working on a web app that’s written in Rust. They’d probably look at you in shock, thinking you might’ve had one too many cups of coffee that day. Well, they’d be mistaken! If Rust caught your interest because of its secure features, blazingly fast speed, or incredible learning curve (Javascript, in comparison, is a child’s toy), you have Leptos and Yew, both popular choices in the Wasm world.  

Finding HTML in a Rust codebase sounds crazy, but it is very real. Even non-frontend devs will surely find this interesting. 

What is amazing is that even though, in its essence, it’s a different technology, these frameworks try to help developers by following the general rules and patterns, just like frameworks we work with on a daily basis. To better understand this, below is a code snippet of a simple app with a counter written in Yew. 

Chefs special, but keep it simple 

What if we could go back to the old times of writing simple HTML? Is it even possible in the age of reactive UIs and all these fancy frameworks? Maybe if we sparkle HTML with a bit of Javascript, we can get just that. And that fairy dust is htmx. 

  • Why should only <a> & <form> be able to make HTTP requests? 
  • Why should only click & submit events trigger them? 
  • Why should only GET & POST methods be available? 
  • Why should you only be able to replace the entire screen? 

These points are from the motivation section of the htmx webpage. What htmx aims to achieve is not to be another framework but to complete HTML as a hypertext. Htmx is a great choice for creating server-rendered pages. 

The examples below show a simple click-to-edit pattern. This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from /contact/1/edit. 

<div hx-target="this" hx-swap="outerHTML"> 

<div><label>First Name</label>: Joe</div> 

<div><label>Last Name</label>: Blow</div> 

<div><label>Email</label>: [email protected]</div> 

<button hx-get="/contact/1/edit" class="btn btn-primary"> 

Click To Edit 

</button> 

</div>

This returns a form that can be used to edit the contact. The form issues a PUT back to /contact/1, following the usual REST-ful pattern. 

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML"> 

<div> 

<label>First Name</label> 

<input type="text" name="firstName" value="Joe"> 

</div> 

<div class="form-group"> 

<label>Last Name</label> 

<input type="text" name="lastName" value="Blow"> 

</div> 

<div class="form-group"> 

<label>Email</label> 

<input type="email" name="email" value="[email protected]"> 

</div> 

<button class="btn">Submit</button> 

<button class="btn" hx-get="/contact/1">Cancel</button> 

</form>

Enjoy your garbage! 

Whew, that was something; now your garbage plate is complete. Good job! You can go enjoy it now. As you saw in this article, the choices are anything but limited. And if you feel like trying out something new, the menu is limited only by your own imagination.