Skip to content

A much simpler version of my Yew calculator written in Vue 3

Notifications You must be signed in to change notification settings

andythedishwasher/vue-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Vue Calculator

A much simpler version of my Yew calculator re-written in Vue 3

Why?

I wrote this as a massive simplification of an equivalent app I recently built with the Yew framework in Rust which is currently in development. The goal was to see just how few lines of code were actually needed to achieve the result with the same level of memory safety, which it seems I achieved. In all, this app is 221 lines long. The Yew app, in comparison, is built from a 311-line Rust file which has to be bundled into wasm and js files which then work together to reproduce the content in the DOM. That's great if you need the deep granular memory management features Rust provides in the course of optimizing performance on a large-scale, speed-sensitive project, but this is basically a pocket calculator.

The big idea I took away from this brief foray into the Vue framework was that just because Rust is beautiful, performant, and safe doesn't mean it's the best choice for everything. That said, I think I derived a lot of benefit in the process of working through the logic from having to follow Rust's mutability and ownership rules. It forced me to consider exactly when and where things would change and wouldn't allow me to proceed until I had worked out a solution that wouldn't result in a memory leak. This resulted in a somewhat more laborious logic design process, but ultimately yielded memory-safe code that I found it quite simple to translate into dynamic JS since I really only had to put all the variables and logical operations in the same scopes in order to ensure that everything updated at the right time.

Future Directions

This got me curious about why there don't seem to be any libraries out there for converting valid Rust code into valid JS. After all, you would be cutting out the Web Assembly middleman through this approach. Of course, as mentionend above, we wouldn't have access to our low-level memory management methods, so this would only be a useful approach for apps that are designed with JS in mind as a compilation target. The purpose this would serve in my mind would be to develop for the web with the benefit of the Rust compiler's friendly warnings. You're still essentially writing Javascript, but you're writing it with Rust's standards of memory safety. This would be great for any app that has a lot of dynamic, reactive state that needs a lot of logic performed conditional to that state. Rust can make ABSOLUTELY sure that whenever a variable is used, the runtime will know where to find it.

In terms of front ends specifically, a library like that could open up some interesting new possibilities for cross-platforming. The Yew framework, for example, seems to map pretty smoothly onto the Vue syntax (at least for single components). If Vue code can be successfully compiled from Rust code, that means that Rust code can essentially become a cross-platform codebase using frameworks like Ionic to interface with cross-platform runtimes like Capacitor. While you're not going to get that ultra-snappy Rust performance, you will at least get Vue performance, which appears to be fairly impressive overall for a Javascript framework. And you will get memory safety. Something to think about?

About

A much simpler version of my Yew calculator written in Vue 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published