A New Kind of Abstraction

Rate this content
Bookmark

Developers often look at abstractions as being ""the closer to the metal, the better,"" meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy.

Mike Hartington
Mike Hartington
8 min
20 Oct, 2021

Video Summary and Transcription

Abstractions simplify working with low-level concepts like APIs or languages, allowing developers to build on top of them and add helper functions. However, there are tradeoffs, such as increased code size. Abstractions operate on a spectrum, with different runtimes like Node, Dino, and the browser at opposite ends. Code that runs in Dino can likely run in the browser, and code that runs in Node can also run in the browser.

Available in Español

1. Introduction to Abstractions

Short description:

Hi. I'm Mike Hardington, a developer advocate at Ioniq. Today, I want to talk about abstractions. Abstractions simplify working with low-level concepts like APIs or languages. Developers often build on top of them to add helper functions. Some people build additional abstractions with more features and safety. However, there are tradeoffs, such as increased code size. Abstractions can also provide an escape hatch, allowing you to drop down to a lower level if needed. Abstractions operate on a spectrum, and you've likely encountered them more often than you think.

Hi. My name is Mike Hardington. I'm a developer advocate at a company called Ioniq. And I want to talk about abstractions today.

Now, typically, when people talk about abstractions, they normally mean this first kind. Where we have a low level concept, whether it's an API or a language itself. And working with it can be either cumbersome or lead to a lot of potential errors. In the form of user error or code that is very fragile and easy to break.

Now, to make working with this language or this API a lot simpler, what developers have often done is just build something on top of it that allows you to safely work within that run time or within that language. And be a little bit more productive. We're not necessarily creating a whole new language or a whole new library. We're just adding some helper functions. We can kind of think of this like a utilities concept.

Now, while most people find this very helpful, some people decide that this isn't enough. They want more. And so they build another abstraction on top of that. This one including more features, more safety, perhaps new concepts that are abstracting away the lower level concepts, and then so on and so forth. We have this whole entire concept of a hierarchy where there's an abstraction that is n degrees removed from the lower level, whether it's one degree above, one, two degrees, or even five.

Now, with abstractions there also comes some tradeoff. We also have to think about the impact on overall size. The further abstract you are from a given target, chances are you are also going to increase the final code output. You could be including more functions and more code into your project by using the wrong abstraction and bloat your project up pretty quickly. Something also worth considering is whether or not the abstraction also gives you an escape hatch. Now, languages like Python and Lua are built on top of C. They abstract away a lot of the inner workings that C offers but also give you an exit hook so that way if you need to drop down to C, you can do that. You can think of other libraries out there on the web that also offer similar escape hatch. They may build on top of something like Canvas and abstract away a lot of the complexity that Canvas has, but if you need to for performance reasons, you can just kind of hop out of that and get into the native layer of Canvas.

Now these are the traditional kinds of abstractions that I think most people are familiar with. Abstractions also operate on another vector. They can also be thought of as a spectrum, and this is something that once you realize how this relates to the code you work with, you'll see that you've dealt with this more often than you think of.

2. Thinking about Spectrum Abstractions

Short description:

When we think about spectrum abstractions, we consider where our code will run. Traditionally, we thought about node or the browser, but now we have runtimes like Dino. Each has its tradeoffs. Code that runs in node or Dino is at opposite ends of the spectrum. They are so different that code may not run on both without extra effort. However, if code runs in Dino, it can likely run in the browser, and if it runs in node, it can also run in the browser. These are the spectrums we deal with.

When we think about spectrum abstractions, you can think about the code that you write and where is that code going to run. The traditional example of is this code going to run in node or in the browser can now be updated to is this code going to run in node, the browser, or runtimes like Dino. All of these have different tradeoffs, and when we think about code that runs in node or code that runs in Dino, they are on opposite ends of the spectrum. They are so different from one another that without having to work real hard to make sure that that code, without having to work real hard and set up complex build systems, code may not be able to run on one or the other. Where if you have code that can run in Dino, chances are you can figure out a way to get it to run in the browser, and if you have code that runs in node, you can figure out a way to get it to run in the browser, as well. These are the kind of spectrums that we deal with.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
A Different Vue into Web Performance
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Abhijeet Prasad
Abhijeet Prasad
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.