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.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Escape hatches allow developers to revert to lower-level code when needed, providing flexibility and control for performance optimization by accessing underlying functionalities directly.

In programming, abstractions help simplify working with low-level concepts like APIs or programming languages, making it more productive and safer by reducing user errors and fragility in code.

Developers often build additional layers of abstraction over a programming language or API, introducing helper functions and utilities to make the language easier and safer to use, without creating a new language or library.

Adding multiple layers of abstractions can lead to increased code size, which may result in bloating the project with unnecessary functions and code, potentially impacting performance.

Abstractions must consider the specific requirements and limitations of each runtime environment, ensuring that code can operate effectively across different platforms without complex build systems.

Cross-platform development can face issues such as feature limitations in webviews or unavailable APIs in native contexts, making it easier to move from web to native than vice versa.

Ionic focuses on creating abstractions that enable code to run efficiently both on the web and native platforms, helping developers find a balance that leverages the strengths of each platform.

Developers should consider the code footprint of the abstractions, the platforms on which the code needs to run, and the amount of work required to adapt the code across different devices and environments.

Mike Hartington
Mike Hartington
8 min
20 Oct, 2021

Comments

Sign in or register to post your comment.
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: Un Nuevo Tipo de Abstracción

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
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
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 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
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
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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 Kuznetsov
Mikhail Kuznetsov
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
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
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 Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.