<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#existing-approach">Existing Approach</a></li>
<li><a href="#enter-bun">Enter Bun</a></li>
<li><a href="#use-cases">Use cases</a></li>
<li><a href="#other-use-cases">Other use cases</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>Bun (and Deno) brings new approach to development by introducing this new idea of an integrated toolkit for Javascript/Node.js developers.</p>
<p>I see the goal of these tools as giving developers an all-inclusive development environment that provide the essential tools out of the box.</p>
<p>This will only make the developer’s lives easier.</p>
<p>Now if you compare this to the existing approach, where you pretty much have to cobble together a bunch of tools, bundler configs and so forth just setup your development environment.</p>
<p>It makes a big difference.</p>
<p>In this article, I am going to go over the big idea behind Bun by:</p>
<ul>
<li>
<p>Comparing and constrasting it with the existing approach</p>
</li>
<li>
<p>Talking about how I’ve used Bun in my personal project</p>
</li>
<li>
<p>Talking about some use cases that I think it’ll be great for</p>
</li>
</ul>
<p>Let’s start with the existing approach to better understand what makes Bun powerful.</p>
<h2 id="existing-approach"><a href="#existing-approach" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Existing Approach</h2>
<p>When developing in Javascript/Typescript or Node.js, there are many tools you need before you start developing (assuming you are not using a framework).</p>
<p><strong>Some tools may include:</strong></p>
<ul>
<li>
<p><strong>Linter</strong> (eslint, prettier)</p>
</li>
<li>
<p><strong>Typescript Config</strong> (typescript)</p>
</li>
<li>
<p><strong>Bundler</strong> (Webpack, Vite, Rollup, ts-node, etc)</p>
</li>
<li>
<p><strong>Tests</strong> (Jest, Mocha, Chai, etc)</p>
</li>
<li>
<p><strong>API library</strong> (Axios, fetch)</p>
</li>
</ul>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/modern-tool-kit.png" alt="Modern Tool kit" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Modern Tool kit</blockquote>
  </div>
</div>
<p>While you may not need everything on this list, it’s not uncommon to have these type of tools in a development environment.</p>
<p>It’s a pretty standard set of tools if you work with Node.js/Typescript/Javascript codebases.</p>
<p>If you have ever had setup any of these tools, you probably know about the time investment (and struggles) it takes to set it up.</p>
<p>Each type of syntax (jsx, tsx, cjs, esm, etc) in the development all require a different setup in your bundler.</p>
<p>All of these responsibility will fall on the developers building the application.</p>
<blockquote class="common">
<p><b>DIY or use existing tool ?🤔</b></p>
<p>With the introduction of new toolkit like Bun, we can now ask the question of...</p>
<p><strong>Does it makes sense for us to roll your own or DIY the toolkit ?</strong></p>
</blockquote>
<div id="survey-2dc68b7d-9e6a-4918-8b1c-12f60f34d3b3">
  <survey id="2dc68b7d-9e6a-4918-8b1c-12f60f34d3b3"></survey>
</div>
<h2 id="enter-bun"><a href="#enter-bun" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Enter Bun</h2>
<p>The way I would describe Bun (and tools like Deno) is that these tools are all-inclusive.</p>
<p>Meaning the different development tools that are mentioned earlier are embedded into the toolkit itself rather than installed and configured separately by the developers.</p>
<p>This means with Bun, developers can now operate a higher baseline than before without worrying about details (and the headaches) that come with a development toolkit.</p>
<p>By choosing a tool like Bun, you are essentially reducing the the responsibility (at the expense of flexibility).</p>
<p>You can think of like node++.</p>
<p>While I think it’s great to learn about the details of setting up a development toolkit, it can also create a lot of friction when you are just getting started on a project or working on a prototype.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/bun-modern-tool-kit-layer.png" alt="Bun: The all-inclusive tool" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Bun: The all-inclusive tool</blockquote>
  </div>
</div>
<p>Next up, I’ll go over my personal use case of using Bun!</p>
<h2 id="use-cases"><a href="#use-cases" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use cases</h2>
<p>I have found Bun to be great for scripts on my own personal site and projects.</p>
<p>The use case that I recently used it for is where I have an existing Typescript codebase, and I want to re-use some of the code to perform some tasks.</p>
<p>The reason I chose Bun is because I just couldn’t bother with setting up a bundler to run a simple script to re-use Typescript code.</p>
<p>I wanted a tool that I can just install, and it’ll be able to just run my code without any other setup.</p>
<p>And guess what ? That’s exactly how it turned out when I used Bun!</p>
<p><strong>Here is my process:</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/bun-parsing-md.gif" alt="Bun: Parsing Markdown" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Bun: Parsing Markdown</blockquote>
  </div>
</div>
<p><strong>Steps:</strong></p>
<ol>
<li>
<p><strong>Existing Code</strong> - I already have a markdown parser (in Typescript) in my existing Next.js codebase</p>
</li>
<li>
<p><strong>Using Bun</strong> - Instead of setting up a bundler, I just used bun to use the markdown parser to parse the markdown posts</p>
</li>
<li>
<p><strong>Insert Into Database</strong> - Use <code class="language-">node-pg
</code> to insert entries into PostgreSQL</p>
</li>
</ol>
<p>And the rest is history.</p>
<p>As a bonus, Bun is also really fast (like really fast) ⚡️!</p>
<h2 id="other-use-cases"><a href="#other-use-cases" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Other use cases</h2>
<p>While Bun seem like a magical tool, it isn’t without issues.</p>
<p>The tool is still in Beta.</p>
<p>So, that means it may have bugs or it may be missing some features you may need.</p>
<p>For the most part, it should work as expected!</p>
<p><strong>Some of the other use cases (that I can think of):</strong></p>
<ul>
<li>CLI tools</li>
<li>Scripts (like the one above)</li>
<li>Small API services</li>
</ul>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>That’s it for a brief introduction into Bun!</p>
<p>Either way, I think either Bun (or Deno) has great long term potential because of the Developer Experience (DX) gains you get from it.</p>
<p>Tools like Bun (or Deno) raise the baseline for the development toolkit so that developers don’t have to worry about the development toolkit, and they can just focus on the application.</p>
<p><strong>Here are a few key takeaways (about Bun):</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/bun-takeaways.png" alt="Bun Takeaways" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Bun Takeaways</blockquote>
  </div>
</div>
<p>It’s very easy to get started.</p>
<p>I have pretty much replaced most of my scripts to use Bun and so far so good.</p>
<p>I encourage you to give it a go - <a href="https://bun.sh/docs" target="_blank" rel="nofollow noopener noreferrer">Bun</a>.</p>
<p>If you did learn something new from this article, be sure to share this article with a friend or co-worker 🙏❤️! (Thanks!)</p>
<p><strong>Itching to get hands on ?</strong></p>
<p>Check out my other article on Bun  👉 <a href="https://www.jerrychang.ca/writing/bun-learn-it-by-example" target="_blank" rel="nofollow noopener noreferrer">Bun: Learn It By Example</a>.</p>


Jerry Chang

Go Back

Bun: Is It The Next Biggest Thing ?

Enjoy the content ?