All Things Typescript Newsletter - Issue #17 - Bun is a fast all-in-one JavaScript runtime
Good morning; I hope you had a fantastic weekend. Over the last few days, I have worked on a Visual Studio Code extension named NPM Imported Packages Lens, which shows links to NPM, Github, and Homepage for an imported package in JS and TS files. It also supports React TSX and JSX. Here is the Github repository and the marketplace link to install it. Please try it out and give me any feedback you have to improve. I would love to expand it to Vue and other web frameworks.
On top of that, I spent some playing with Bun - the JS runtime, and I have an overview of it in today’s lesson section. I haven’t done any reviews on technology in the past; let me know if you want more on topics like this.
I hope you have a great week ahead, and let’s keep on learning.
Bun is a fast all-in-one JavaScript runtime
Bun is a self-contained JavaScript runtime, i.e., unlike NodeJS, which doesn’t handle building/bundling your project, just the runtime part, Bun does it all, from replacing your package manager to building to runtime. The current landscape for web development is very fragmented, and we have seen tools such as Vite try to solve some of these problems.
Bun tries to solve this by being an all-in-one drop-in replacement for your current tools. Replacing everything from your package manager to your bundling tool to your runtime environment for your JS/TS project. You can open any Javascript/Typescript project you have and run Bun install instead of yarn/npm/pnpm install. You can replace all your npm/yarn commands with burn, and they will likely work, including running the scripts file inside the package.json.
Quote
“Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:
in Start fast (it has the edgemind).
New levels of performance (extending JavaScriptCore, the engine).
Being a great and complete tool (bundler, transpiler, package manager).”
On top of that, Bun has a few more features:
Bult-in support for Fetch and Websockets
Supports Typescript and JSX (TSX) out of the box and are transpiled automatically
It supports most (if not all) NodeJS API, so your code works out of the box, unlike something like Deno, which would require some rewrite.
It supports node_modules, so all packages that work with NodeJS will work with Bun.
Automatically loads environment variables from .env; no need for third-party libraries.
It’s also very fast ⚡. It is implemented with JavaScriptCore from WebKit and uses Zig programming language for low-level control over memory, performance profiling, and benchmarking over every aspect that contributes to its being fast.
Highlighted Projects
GitHub - mainawycliffe/npm-imported-packages-lens
Contribute to mainawycliffe/npm-imported-packages-lens development by creating an account on GitHub.
Articles
TypeScript for Deno
In the previous delivery we saw several data types that TypeScript has and we also saw the custom types that are the union of several types. It is important to mention that you can make “object types”, that is to say, a “custom type” that is an object with a certain structure.
Understanding the exclamation mark in TypeScript
The exclamation mark ! is known as the non-null assertion operator in TypeScript. We will be using these terms interchangeably in this article. But what does this operator do? The non-null assertion operator tells the TypeScript compiler that a value typed as optional cannot be null or undefined.
Guide to promises in Node.js
In Node.js applications, it’s not unusual to see a large number of nested callback functions being used to accomplish several activities. This is commonly referred to as callback hell, as it can make the code extremely complicated and disorganized.
Setup a Monorepo with PNPM workspaces and speed it up with Nx!
In this article we’re going to have a deep dive into setting up a new monorepo using PNPM workspaces that hosts a Remix application as well as a React-based library.
Building an accessible glossary in vanilla JavaScript
The Kognity solution is written in Vue.js, but as much of its functionality is specific to their platform — and because I’d like to make things as generic as possible for this post — I will be implementing a similar solution in vanilla JavaScript.
Understanding schema stitching in GraphQL
One of the major benefits of GraphQL is that you can query for all the data you need through one schema. This may assume that most systems are one big monolithic service. However, as the schema grows, it may need to be split into smaller schemas to be maintainable.
React Hooks: The Deep Cuts
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class.
How to Lint Commit Messages with Husky and CommitLint
How many times have you come across a git log that looks like this? More than you’d like, right? We developers have a tendency to become lazy, and not put much effort into things we don’t consider important (which is mostly everything outside of our code).
Advanced TypeScript With Code Challenges: Intersection Types
TypeScript is awesome! More and more projects use it as the primary programming language. Especially in the area of frontend development, it became essential to build large-scale applications.
Tweets
