DEV Community: Michael Essiet

Embracing Rust-Style Error Handling in JavaScript with try.rs

Michael Essiet — Sat, 12 Apr 2025 09:45:44 +0000

JavaScript's error handling has long been a source of frustration for JS devs. The traditional try/catch mechanism often leads to verbose spaghetti code, making it challenging to manage errors effectively. Enter try.rs, a TypeScript library that I've been using for my personal projects that brings Rust-like error handling to JavaScript and TypeScript, offering a more structured and readable approach.

1. The Problem with JavaScript's Error Handling

The try...catch syntax has served us for years, but it often leads to certain challenges:

Verbosity and Nesting: Handling multiple potential failure points often requires nested try...catch blocks or multiple separate blocks, which can make code harder to read and follow ("try...catch hell").

try {
  const result = someFunction();
  try {
    const processed = anotherFunction(result);
  } catch (error) {
    console.error("Error in anotherFunction:", error);
  }
} catch (error) {
  console.error("Error in someFunction:", error);
}

Flow Interruption: try...catch can break the chain of functional method calls or make the "happy path" logic harder to distinguish from the error handling logic.
Implicit Errors: It's easy to forget to wrap potentially failing code in a try...catch. In environments like Node.js, an uncaught exception can crash the entire process. Even in the browser, it often times leads to broken user experiences.
Overly Broad Catching: A single catch block might catch different types of errors from the try block, requiring complex conditional logic within the catch to handle them appropriately. Sometimes, we might accidentally catch bugs instead of expected failures (like network issues), masking underlying problems.
Performance Considerations: While often negligible, exception handling mechanisms can introduce performance overhead compared to returning values, especially in older JavaScript engines or performance-critical loops.

2. Possible Solutions to Improve Error Handling

Over the years, us developers have explored various approaches to improve error handling in JavaScript:

Promise .catch()

For asynchronous operations, Promises provide a .catch() method to handle errors. This is cleaner than nested try...catch blocks but still requires careful chaining to avoid missing errors.

fetchData()
  .then((data) => processData(data))
  .catch((error) => console.error("Error:", error));

Callback Pattern

In older Node.js code, the callback pattern was widely used, where functions explicitly passed an error as the first argument. While this avoids throwing exceptions, it can lead to "callback hell" and is less common in modern JavaScript code now.

fs.readFile("file.txt", (err, data) => {
  if (err) {
    console.error("Error reading file:", err);
    return;
  }
  console.log("File data:", data);
});

Go-style Error Returns

Inspired by Go, some of us use a pattern where functions return a tuple (or array) containing an error and a result. This makes errors explicit but requires manual checking after every call. (e.g the try-catch package)

const [error, result] = mightFail();
if (error) {
  console.error("Error:", error);
} else {
  console.log("Result:", result);
}

Functional Error Handling

Libraries like fp-ts and neverthrow introduce functional programming concepts such as Either or Result types. These types explicitly represent success or failure as values, making error handling more predictable and composable.

3. Introducing try.rs: A Rust-Inspired Solution

try.rs is a TypeScript library that emulates Rust's Result<T, E> type, providing a structured way to handle operations that may fail. It encourages the explicit handling of errors, leading to more predictable and maintainable code.

Key Features:

Result Type: Encapsulates success (Ok<T>) and failure (Err<E>) outcomes.
Chainable Methods: Functions like map, andThen, and mapErr allow for fluent transformations.
Pattern Matching: The match method enables clear and concise handling of different result states.
Async Support: tryAsync wraps asynchronous functions, integrating seamlessly with async/await.
Type Safety: Leverages TypeScript's type system to enforce error handling at compile time.

4. Practical Examples of try.rs in Action

Handling Synchronous Operations

import { ok, err } from 'try.rs';
function divide(a: number, b: number) {
  if (b === 0) {
    return err("Division by zero");
  }
  return ok(a / b);
}
const result = divide(10, 2);
result.match({
  ok: (value) => console.log(`Result: ${value}`),
  err: (error) => console.error(`Error: ${error}`),
});

Wrapping Functions That May Throw

import { tryFn } from 'try.rs';
const parseJson = (input: string) => tryFn(() => JSON.parse(input));

const result = parseJson('{"name": "Alice"}');

result.match({
  ok: (data) => console.log(`Parsed data: ${data.name}`),
  err: (error) => console.error(`Parsing error: ${error}`),
});

Managing Asynchronous Operations

import { tryAsync } from 'try.rs';
async function fetchData(url: string) {
  return tryAsync(async () => {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  });
}

async function main() {
  const result = await fetchData('https://api.example.com/data');
  result.match({
    ok: (data) => console.log('Data:', data),
    err: (error) => console.error('Error:', error),
  });
}

main();

Conclusion

try.rs offers a compelling alternative to traditional JavaScript error handling by introducing a Rust-inspired Result type. It promotes explicit and consistent error management, leading to cleaner and more reliable code. By integrating try.rs into your JavaScript or TypeScript projects, you can enhance your application's robustness, readability, and maintainability. I've been using it internally for some time now so I thought I'd share it with all of you.

For more information and to get started, visit the try.rs npm package page.

Creating a Browser Extension using SolidJS + WXT II

Michael Essiet — Fri, 22 Mar 2024 17:10:28 +0000

It's no secret that browser extensions are a powerful tool for enhancing the browsing experience. They can be used to add new features, modify existing ones, or even create entirely new applications. In this article, we'll be talking about the process of creating a browser extension and things you should keep in mind using SolidJS and WXT.

Lessons learnt

The first time I tried to create a browser extension I was under the impression that it required some kind of special programming language, compilation method or something. Turns out they're just web apps bundled to run in the browser runtime. This means that you can use most of the same technologies that you use to build web apps to build browser extensions. You can use HTML, CSS, and JavaScript to build the user interface, and you can use JavaScript to interact with the browser's APIs.

WXT takes it to the next level though. It's a tool that allows you to scaffold a browser extension project with a single command. It also provides a way to manage your manifest file, pages, scripts and service workers. Did I forget to mention that it also offers framework support? Yup you can use WXT with React, Vue, Svelte, and SolidJS. It really helped in managing and creating the manifest file, background scripts, content scripts, browser actions, page actions, and permissions. Which are all important parts of a browser extension.

In my previous article about creating a browser extension using SolidJS, I had initially thought that all you needed was Javascript, HTML, CSS, and a manifest file and you were good to go. Oh, how wrong I was. I had to learn about the limitations of browser extensions, the importance of messaging, and the different APIs that are available to browser extensions. I also had to learn about the different parts of the manifest file and how to manage them. For instance, the permissions, the background scripts, the content scripts, the browser actions, the page actions, and the storage. And did you know that the window size is limited to 800x600? I didn't. This is why I decided to write this article. To share what I've learnt and to help others who might be interested in creating a browser extension.

Difference between browser extensions and web apps

Here's a table of the differences between browser extensions and web apps:

Browser Extensions	Web Apps
can be used to add new features, modify existing ones, or even create entirely new applications	is a client-server software application in which the client (or user interface) runs in a web browser
can be used to modify the behavior of the browser itself	are accessed through the internet and are designed to be used on a web browser
can be used to interact with the browser runtime's APIs and it's window APIs	can be used to interact with the server's APIs
can be used to interact with the browser's tabs, windows, and bookmarks	can only interact with their tab and the server
advised to use the browser's storage APIs e.g chrome.storage	web storage APIs a pretty much all you need e.g localStorage and sessionStorage

Concerning the last point, the browser's storage APIs are advised to be used in browser extensions because they can be used in service workers. Service workers are a type of web worker that runs in the background and can be used to intercept and handle network requests, cache resources, carry out messaging, and handle push notifications. They are also used to manage the browser's storage APIs.

API limitations

There are some limitations to the APIs that are available to browser extensions. For instance, the window object is not available to background scripts. This is because background scripts are compiled ahead of time to a single file and can't use the window or document object. They can only use the chrome object and the chrome.runtime object. The chrome object is used to interact with the browser's APIs and the chrome.runtime object is used to interact with the browser's runtime. The chrome.runtime object is used to manage the extension's lifecycle, to manage the extension's manifest file, to manage the extension's storage, to manage the extension's messaging, and to manage the extension's permissions.

Storage

There are two types of storage that are available to browser extensions:

Web Storage APIs (can't be used in service worker)
Browser storage APIs e.g chrome.storage (can be used in service worker)

The web storage APIs are a set of APIs that are used to store web app user data in the browser. The most common example of a web storage API is localStorage, which offers a storage limit up to 5MB and is semi persistent. The browser storage APIs are a set of APIs that are used to store extension and service worker user data, with the unlimitedStorage permission they can even store data large than 5MB. The most common example is chrome.storage.local.

One major thing to keep in mind though is the difference in the way the two storage APIs are used. The web storage APIs are used to store data in the browser's window object and can only be used in the window object. The browser storage APIs are used to store data in the browser's storage object and can be used in the window object and the service worker object. Browser storage APIs are asynchronous as opposed to web storage APIs which are synchronous.

// web storage APIs
localStorage.setItem("key", "value");
localStorage.getItem("key");

// browser storage APIs
chrome.storage.local.set({ key: "value" }, () => {
  console.log("Value is set to " + value);
});
chrome.storage.local.get(["key"], (result) => {
  console.log("Value currently is " + result.key);
});

WXT provides a wrapper for the different browser storage APIs. As you may have noticed chrome.storage.local is only usable on chromium browsers. The wrapper allows you to use single code to interact with different browsers. Making your extension compatible on Chrome, Safari, and Firefox.

await storage.setItem("local:key", "value");
await storage.getItem("local:key");

Permissions

Permissions are something that you should get very acquainted with if you plan to build an extension that functions more than just some simple todo app. This part my be a bit tricky because you have to be very specific about the permissions you request. You can't just request all permissions and hope for the best, because, when submitting your extension to the web store, the permissions you request are reviewed by the Chrome Web Store team. They will only approve the permissions that are necessary for your extension to function. If you request permissions that are not necessary for your extension to function, your extension will be rejected and asked to resubmit with the unnecessary permissions removed.

Here's a comprehensive list of the permissions that are available to browser extensions using Manifest V3 as of the time of writing this article:

Why Messaging is Important

Chrome extensions are sandboxed and can't access the DOM a page is running on. So in order to manipulate or identify things in the DOM there needs to be a messaging bridge created between the contentScript, backgroundScript, and popup. Anything from strings to booleans can be sent over this bridge, however, I recommend serializing objects as complex objects with methods and classes will not be able to be sent over the bridge.

Here's a quick example of how to create a messaging bridge between the contentScript, backgroundScript, and popup:

// contentScript.js
chrome.runtime.sendMessage({
  text: "hello from the content script",
  to: "background",
  from: "content",
});

// backgroundScript.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log(message.text);
  if (message.to === "background" && message.from === "content") {
    sendResponse({ text: "hello content, this is from the background script" });
  }
  if (message.to === "background" && message.from === "popup") {
    console.log("hello popup, this is from the background script");
  }
});

// popup.js
chrome.runtime.sendMessage({
  text: "hello from the popup",
  to: "background",
  from: "popup",
});

We're using the chrome.runtime API to send and receive messages between the contentScript, backgroundScript, and popup. The chrome.runtime.onMessage method is used to listen for messages and the chrome.runtime.sendMessage method is used to send messages.

Covering all basis in the manifest file

An extensions manifest file is a JSON file that contains metadata about the extension. It's used to configure the extension and to specify the extension's properties. Here's a quick example of a manifest file:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first extension",
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": ["images/*"],
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

As of the time of writing this article manifest V3 is the latest version of the manifest file. Let's do a quick rundown of the properties in the snippet above:

manifest_version: The version of the manifest file. As of the time of writing this article, the latest version is 3.
name: The name of the extension.
version: The version of the extension.
description: A description of the extension.
permissions: An array of permissions the extension requires. For example, the storage permission is required to use the chrome.storage API.
action: The action property is used to define the browser action. The default_popup property is used to specify the HTML file that will be used as the popup. The default_icon property is used to specify the icon that will be used for the extension.
background: The background property is used to define the background script. The service_worker property is used to specify the service worker that will be used as the background script.
content_scripts: The content_scripts property is used to define the content scripts. The matches property is used to specify the URLs the content script will run on. The js property is used to specify the JavaScript files that will be used as the content script.
web_accessible_resources: An array of resources that are accessible to the web. For example, the images/* resource is accessible to the web.
options_ui: The options_ui property is used to define the options page. The page property is used to specify the HTML file that will be used as the options page. The open_in_tab property is used to specify whether the options page will open in a tab.
icons: An object that contains the icons that will be used for the extension.

Content Security Policy

The content_security_policy property is used to define the content security policy for the extension. The content security policy is used to specify the rules for the resources the extension can load. For example, the script-src 'self'; object-src 'self' content security policy specifies that the extension can only load scripts and objects from the extension itself.

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'",
    "content_scripts": "script-src 'self'; object-src 'self'",
    "web_accessible_resources": "script-src 'self'; object-src 'self'"
  }
}

Note: If you intend to use WASM in your extension, you'll need to add wasm-eval or wasm-unsafe-eval to the script-src directive in the content_security_policy property. Like so:

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-eval'; object-src 'self'",
    "content_scripts": "script-src 'self' 'wasm-eval'; object-src 'self'",
    "web_accessible_resources": "script-src 'self' 'wasm-eval'; object-src 'self'"
  }
}

Content scripts

Content scripts are JavaScript files that run in the context of web pages. They can read and modify the DOM of web pages and interact with the web page's JavaScript. Content scripts are used to modify the appearance and behavior of web pages.

To add a content script to your extension, you'll first need to add it to the manifest file.

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Once it's added you can then use the chrome.tabs.executeScript method to inject the content script into the web page.

// in-page script
chrome.tabs.executeScript({
  file: "content.js",
});

// content.js
console.log("I'm the content script");

However, if you plan on using WXT you won't need to do the above as WXT offers a method that can do this for you, eliminating the need for the chrome.tabs.executeScript method.

export default defineContentScript({
  matches: ["<all_urls>"],
  main() {
    console.log("I'm the content script");
  },
});

Background scripts

These scrips can also be referred to as service workers. You might think that they are similar to the content script with the only differing feature being that they run in the background, but you couldn't be further from the truth. Background scripts are fundamentally different in a sense that they can not be used like normal JavaScript scripts that run on the web, because they don't have access to the DOM, web page or anything related to it(like localStorage, the document and window objects).

Now you might be wondering since they're so limited what can they even be used for? Well as their name implies they can be used to run background tasks such as notifications, tracking, analytics, event-handling and messaging. I hope you understand why they're also referred to as service workers now.

Setting up a background script is similar to setting up a content script in normal extension workflows, however, when using WXT it can be done even easier.

export default defineBackground(() => {
  console.log("I'm the background script");
});

Something that you'll have to keep in mind is that the callback can not be made async as background scripts are synchronous. So if you're a fine of the async/await syntax you're out of luck, you'll have to use the good old then/finally/catch method chain.

Browser actions

Web extension browser actions are buttons that extensions add to the browser's toolbar, typically with an icon and optional popup functionality. These buttons allow users to interact with the extension directly from the browser interface. When a user clicks on a browser action button, it can trigger specific actions defined by the extension, such as opening a popup with HTML, CSS, and JavaScript content, or executing certain functions within the extension.

As of the time of writing this article I haven't been able to get these to work using WXT. It might be something with my implementation or WXT doesn't support it yet, however, here's a ChatGPT thread explaining how you can go about trying it out yourself using a none WXT managed code base.

Page actions

Page actions in Chrome extensions are specific actions that are relevant to particular pages rather than the browser as a whole. They are represented by icons added inside the browser's URL bar and can be associated with specific web pages. Page actions can be used for features that make sense for only a few pages, and they are hidden by default but can be shown for a particular tab using the pageAction.show() method.

Using WXT for Scaffolding

Now that we're past the basics, let's actually create a project. Run the following command to create a WXT project.

bunx wxt@latest init sample-project

The command will prompt you to choose a framework you would like to use. I recommend SolidJS, but go with whichever you're proficient in.

Once that's done your project's file structure will look like this:

.
├── README.md
├── assets
│   └── solid.svg
├── entrypoints
│   ├── background.ts
│   ├── content.ts
│   └── popup
│       ├── App.css
│       ├── App.tsx
│       ├── index.html
│       ├── main.tsx
│       └── style.css
├── package.json
├── public
│   ├── icon
│   │   ├── 128.png
│   │   ├── 16.png
│   │   ├── 32.png
│   │   ├── 48.png
│   │   └── 96.png
│   └── wxt.svg
├── tsconfig.json
└── wxt.config.ts

6 directories, 18 files

^{I used tree to print this. If you're using pkgx, just run pkgx tree to print the dirctory tree}

Directory structure

assets: This houses your images, svgs, and any other asset formats you'll be using.
entrypoints: This houses your background scripts, content scripts, and popup.
wxt.config.ts: This manages WXTs behavior and your manifest file settings.
package.json, public, tsconfig.json: Same old, same old.

Running the extension

bun dev

Building the extension

Using SolidJS for the popup

The popup directory is the UI of your extension. It's where you'll be using SolidJS to create the UI of your extension. The index.html file is the entry point of the popup, and the main.tsx file is the entry point of the SolidJS app. While the extension is running and open you can modify the App.tsx file and see it update in real time.

import { createSignal } from "solid-js";
import solidLogo from "@/assets/solid.svg";
import wxtLogo from "/wxt.svg";
import "./App.css";

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <>
      <div>
        <a href="https://wxt.dev" target="_blank">
          <img src={wxtLogo} class="logo" alt="WXT logo" />
        </a>
        <a href="https://solidjs.com" target="_blank">
          <img src={solidLogo} class="logo solid" alt="Solid logo" />
        </a>
      </div>
      <h1>WXT + Solid</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count()}
        </button>
        <p>
          Edit <code>popup/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p class="read-the-docs">
        Click on the WXT and Solid logos to learn more
      </p>
    </>
  );
}

export default App;

Note: WXT uses the @ symbol to refer to the root directory of your project. This is a feature of WXT and not SolidJS. You can get rid of it by changing the baseUrl in your tsconfig.json file and modifying the paths in your wxt.config.ts file. I recommend leaving it as is, because if you're not well versed in configs you might end up breaking the project.

Routing

You can add routing to your popup the exact same way you would any other SolidJS app. Here's an example of how you can do that:

// App.tsx
import { Router, useRoutes } from "@solidjs/router";

export default function App() {
  const Routes = useRoutes([
    { path: "/", component: <Home /> },
    { path: "/about", component: <About /> },
  ]);

  return (
    <Router>
      <Routes />
    </Router>
  );
}

// Home.tsx
export default function Home() {
  return <h1>Home</h1>;
}

// About.tsx
export default function About() {
  return <h1>About</h1>;
}

Managing your manifest properties with WXT

WXT uses a wxt.config.ts file to manage your manifest properties. Manifest properties can be assigned through the manifest object in the defineConfig function. Here's an example of how you can do that:

import { defineConfig } from "wxt";
import Solid from "vite-plugin-solid";

// See https://wxt.dev/api/config.html
export default defineConfig({
  vite: () => ({
    build: {
      target: "esnext",
    },
    plugins: [Solid()],
  }),
  manifest: {
    name: "WXT + Solid",
    description: "A WXT extension with SolidJS",
    version: "0.0.1",
    permissions: ["storage"],
    action: "popup",
    icon: {
      16: "/icon/16.png",
      48: "/icon/48.png",
      128: "/icon/128.png",
    },
  },
});

Compile and build

bun zip

This builds and zips your extension into a .zip file. You can then upload this file to the Chrome Web Store or drag and drop it into the chrome://extensions page to install it.

Conclusion

That's pretty much all the info you'll need on how to build and package your first extension using WXT + SolidJS. As you may have noticed this article leans heavily towards building for the Chrome Web Store. The same principles apply to building for Firefox, Edge, and Opera. The only difference is the manifest properties and the way you package your extension. I recommend giving the Chrome browser extension api doc a read (https://developer.chrome.com/docs/extensions/reference) to get a better understanding of how to use the Chrome extension api, and the differences between the different browsers.

If you would like to learn more about how to publish and distribute your extension, let me know and I might write an article on that. If you have any questions or need help with anything, feel free to reach out to me on Twitter. I'm always happy to help.

5 Developer CLI Essentials

Michael Essiet — Tue, 02 Jan 2024 18:00:00 +0000

Happy New Year everyone! I want to start this year right with an article showcasing some of the CLI tools that I couldn’t do without in 2023. With this article I’ll be adopting a new writing style, keeping things short and sweet while giving all you need to get started and productively use some of the things I will write about in 2024.

Without further a do, let’s jump into the tools that I just couldn’t do without.

1. pkgx

If you follow me on X, you’ve probably seen me mention this a couple of times. pkgx is the package manager to rule them all. No, I’m not exaggerating.

Pkgx allows you to run anything, anywhere and on almost any computer. Heck, one of our community members even got it to run on a powkiddy device.

You can run any command that pkgx has in its registry directly without having to explicitly install it on your machine. Here’s an example of what that looks like

Once you have pkgx installed, by simply prefixing any command that you want to run with pkgx, it will search its registry for the command and install it if it finds it. Then it will run the command for you immediately after.

Pkgx also has a dev environment tool built in. Using the dev command pkgx creates a dev environment in that directory and automatically installs any packages and tools needed for said environment.

2. git

As a developer, you must have some sort of version control tool like git. Git is a version control system that allows you to track changes in your code and easily revert to previous versions if needed. It's an essential tool for managing and organizing your codebase and workflow, and it integrates seamlessly with popular code hosting platforms like GitHub and GitLab.

Git makes things like debugging and collaboration easier since it allows you to revert to previous versions of things using commit history and merge and compare code from collaborators.

I can’t count how many times I’ve either created a separate branch to messily debug an issue clean it up and merge it into the main branch or how many times I’ve rollback commits because I broke something in some way or another.

Here’s a quick example of how to commit, branch, and merge code using git.

3. lazygit

Lazygit is a terminal UI that helps you visualize your git commit history and changes. With Lazygit you’re able to better understand the changes you’ve made to your project without having to keep running git status and git diff.

It’s an amazing tool for whenever you’ve made too many changes to a project or just have too many git operations going on. Now, I can’t say that I use it weekly but I can say that it has saved me some time and stress when working in large codebases and whenever I want to unscrew myself 😅.

4. bat

You can think of bat as a cat clone except with syntax highlighting. Bat has things like syntax highlighting, git diffs and more. I often use bat to peek into files while I code or try to understand a codebase that I was just introduced to.

As you can see it offers syntax highlighting for the package.yml file being viewed. I highly recommend it over cat especially if you’re a dev.

5. httpie

Httpie is an API test client in your terminal that offers JSON highlighting, header parsing, body parsing, session parsing, and more. It’s lightweight, open-source, and intuitive, everything that devs love. Here’s an example of it querying the Coingecko API

Conclusion

In conclusion, these CLI tools have been instrumental in my productivity as a developer. From the convenience of pkgx, which allows me to run any command without explicitly installing it, to the power of git for version control and collaboration. Lazygit helps me visualize my git history, while bat provides syntax highlighting for file viewing. Lastly, httpie simplifies API testing in the terminal. I highly recommend incorporating these tools into your workflow to enhance your development experience.

Creating a basic browser extension using SolidJS

Michael Essiet — Sat, 05 Aug 2023 22:27:23 +0000

I always thought that browser extensions were a complicated technology that required some kind of special programming language or compilation method. Turns out they're just web apps.

In this article we'll be building a very simple browser extension for generating QR codes. The technologies we'll be using in this article are listed below:

Make sure that you have these installed and ready to go. In order to create a SolidJS project and install the required dependencies you can run the following command.

npx degit solidjs/templates/ts-tailwindcss qrcode-extension
cd qrcode-extension && npm install

Getting started

Now that you have everything that you need installed open up the SolidJS project in your code editor. Your project should look something like this:

Head over to the App.tsx file inside the src/ where you'll see a basic app component.

You can run the app using the npm run dev -- --open terminal command. Feel free to make edits to the component and see your changes reflect in realtime.

Building the extension

The first and only thing that you'll need to install is the qrcode npm package, run this command to do so npm install qrcode.

Note: When using Typescript you'll run into an error about the qrcode package type definitions. In order to fix that error you will need to run npm install -D @types/qrcode.

Head over to the App.tsx file and modify the code like so:

import { createSignal, type Component } from "solid-js";
import QRcode from "qrcode";

const App: Component = () => {
  const [qrDataUrl, setQRDataUrl] = createSignal("");
  let canvasRef: HTMLCanvasElement;

  async function setter(v) {
    QRcode.toCanvas(canvasRef, v.currentTarget.value);
    setQRDataUrl(await QRcode.toDataURL(v.currentTarget.value));
  }

  return (
    <div class="flex h-[400px] min-w-[300px] flex-col items-center justify-center">
      <h1 class="text-3xl font-bold">QR Code Generator</h1>
      <input
        class="rounded p-2 outline outline-black"
        placeholder="Input text to encode..."
        onkeyup={setter}
      />

      <canvas
        class="m-4 h-0 w-0 rounded outline outline-black"
        ref={canvasRef}
      ></canvas>

      <a href={qrDataUrl()} download="qrcode.png">
        Download
      </a>
    </div>
  );
};

export default App;

In the above code snippet we're importing the createSignal primitive from SolidJS, as well as the QRcode package. We're also creating an input field that takes in the text that you would like to encode then calls a function called setter, which takes that text and converts it to a QR code using the QRcode package.

A download button is also provided which uses the generated data URL we set in the qrDataUrl signal.

That's all the code we need. Next just build the project by running the npm run build command. Once that's done, a dist folder will be created in the current working directory. cd into that folder and create a manifest.json file with this content:

{
  "name": "QR Code Generator",
  "version": "1.0",
  "description": "A generic QR code generator",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "index.html"
  },
  "manifest_version": 2
}

Testing the extension

Open up a Chromium based browser and head over to this url BROWSER://extensions, "BROWSER" being the name of your browser. e.g chrome://extensions, arc://extensions.

Once there you should see a button at the top right corner titled "Load unpacked". Click on that button and navigate to and select the dist folder that was created earlier. That's it! The extension should appear and be loaded into your browser.

Check your list of extensions and the QR Code Generator extension should be among them.

That's it! Your extension should be ready to go. If you would like to learn how to publish your extension to the Chrome web store I recommend following this guide from the Chrome Developers documentation.

If you enjoyed this article please don't forget to share, check out my other work and follow me.

How to build an iOS Expo App without using EAS Build

Michael Essiet — Sun, 19 Mar 2023 14:21:56 +0000

As a software developer with a fair amount of experience with Expo and React Native, I know how annoying it can get to just simply build an app from an Expo project.

Just the other day I found myself blankly staring at my screen wondering why my local Expo builds were failing, just to find out a few hours later that there is nothing that I can do about it because it was not my fault but a weird glitch with React Native and Expo. Thankfully I found a way to get the app to build and get it published. This is an article about how I went about doing that.

Don’t use the Expo commands

After several trial and errors I found out that there is no need to use the Expo/EAS build commands because you can just archive your app directly through Xcode. Yes, it works. To my surprise all the build phases are already setup in Xcode, so all you need to do is run Archive and your project will be completely built and archived for any platform you have selected, and yes the Javascript React Native code will be compiled.

Another reason why I recommend against using the Expo/EAS commands is that it asks for a file that is automatically present in Xcode if you’re logged into a company profile. I believe that file is some sort of certificate/signing file. Having all devs working on the project to manually provide this file can add a level of unnecessary complexity.

How to archive your project

Before talking about how you can go about archiving your project first let’s talk about what archiving even is in iOS app development.

Simply put archiving is the overall packaging of your application. This package includes .ipa files that are similar to .apk files in android. The wording can be a bit deceiving with calling it Archive and having Build directly under, but trust me if you’re looking to get a distributable file or start the distribution process via Xcode, Archive is what you’re looking for.

Now let’s get started on how we can go about archiving our app.

Firstly you’ll need to run npx expo prebuild if you have an Expo managed project.

After running the prebuild command you’ll need to run npx pod-install or cd into the ios directory and run pod install whichever you choose is totally up to your preference.

Once that’s done you’ll need to open the ios directory using Xcode. You can do that via right clicking in VSCode and selecting “open in xcode”. If you don’t make use of VSCode you can open the ios directory in finder from your terminal using the open . command, once that’s open you should see a file with the .xcworkspace file extension, double click it and it should open in Xcode.

Now that Xcode is open we’ll need to verify our Signing and Capabilities settings. For those not well versed in certificate management with MacOS and Xcode I suggest ticking the “Automatically manage signing” setting to leave signing to Xcode and the certificates associated with the logged in Apple developer account.

Now that we’re done with all the settings it’s time to Archive. To start archiving your project go to the “Product” drop down in the menu bar and select “Archive”.

That’s it, your project will start archiving.

Note that you will see a lot of warnings but that is normal as most of them are just null safety checks.

Once archiving is done a screen will popup where you can choose to export your app or just distribute it to App Store directly from Xcode.

Conclusion

In conclusion this method saved me a lot of time and painstaking hours of debugging. I highly recommend this over building locally using the EAS commands.

Migrating a React project to React Native — Best Practices and Things to Keep in Mind

Michael Essiet — Sun, 19 Feb 2023 09:17:30 +0000

Migrating a React project to React Native — Best Practices and Things to Keep in Mind

Introduction

React Native is a popular open source framework created by Facebook that allows developers to create cross-platform mobile applications with JavaScript. If you have an existing React project and are looking to migrate it to React Native, this blog post will provide best practices and tips on how to streamline your workflow.

This article will contain information on:

Setting up your project environment
Structuring your React project for migration
Polyfilling Node functions in React Native
Managing components

Set up your environment

The first step when migrating to React Native is to set up your environment. This includes installing the React Native command line interface (CLI), configuring your mobile device or simulator, and setting up any third-party libraries or plugins. Setting up your environment properly will help ensure a smoother transition to React Native. This is especially important when you are trying to migrate a cryptocurrency related project from react to react native as react native does not support some of the crypto classes, functions and plugins out of the box.

Structure your project

When migrating to React Native, it is important to structure your project in a way that is easy to manage. This means organizing your project into separate folders for components, styles, images, hooks, and any other necessary files. Keeping your project organized will help you to find files quickly and reduce the amount of time spent looking for them.

An easy way to ensure that your project is properly structured for migration is to ensure that a lot of your non-jsx functions, classes and files are modular and semi-framework agnostic and can be ripped out and placed into any project whether it be react or not. In the case of react native I would advise that you create custom hooks and service classes on the react side to make things easier for you to move and manage.

Polyfilling Node functions and classes

In some cases, React Native does not have the same Node.js functions and classes that are available in React. To make up for this, developers can use polyfills to make the same functions and classes available in React Native. Polyfills are JavaScript functions that are designed to mimic the behavior of the Node.js functions and classes, allowing developers to use the same code when migrating to React Native. This can help streamline the process of migrating a project, since developers don’t have to rewrite code to account for the differences between React and React Native. However, not all Node.js functions and classes can be polyfilled, so it is important to research which functions need to be replaced during the migration process. These polyfills are often times called shims. For more information on polyfilling the right functions and classes check out this github repo called rn-nodeify that helps in adding polyfills for most Node functions to your react native project.

Manage components

When migrating to React Native, it is important to keep track of all your components and how they interact with each other. This can be done by creating a component library that is organized according to the type of component. This will make it easier to find components when you need to make changes or add new features. Even though react components cannot be transferred to react native it is still advisable to manage and keep track of how your components interact with one another so that implementation in react native won’t feel like you’re reinventing the wheel.

Conclusion

Migrating a React project to React Native can be a time-consuming process, but with the right tools and techniques, it can be made easier. By setting up your environment, structuring your project, and managing your components, you can streamline your workflow and make your transition to React Native smoother.

Thanks for reading, that’s all for now. If you would like a much more in-depth guide on migrating a React application to React Native I would be happy to publish a more in-depth guide or post a YouTube video based on demand.

Check out some of my other work

What I’ve Learned Working On Open Source And Why I Think Everyone Else Should Too

Michael Essiet — Sat, 10 Dec 2022 19:12:13 +0000

Over the past 3 months I’ve taken a break from writing an article a week to contribute to open source. In this article I will be talking about what I’ve learnt, experienced and worked on, and how that has changed the way I interact with the community and code.

What I’ve worked on

Over these 3 months I’ve found myself working on everything from web3 SDKs to Solid.js documentation. I initially started my open source journey last year with VelocityX a Flutter UI framework. I started out by contributing to their documentation little by little and correcting any mistakes that there might be.

Over the past few months however, I’ve been working in the Solid.js community which I’ve been very passionate about for some time now. I’ve been writing documentation for the new Solid.js docs and I’m really excited for the community to see what we’ve been building when it’s ready.

I started working on the Supabase Auth UI kit recently, through expanding their Auth UI kit to support Solid.js. I also have plans on writing documentation for them as well in regards to Solid.js and how Solid.js developers can get started with Supabase.

From time to time I also dabble in web3 SDKs here and there. My most recent work was with the quickswap-sdk-lite package, this is mostly a fork of the simple-sushiswap-sdk package built by Josh Stevens, just with a few key things changed, such as the chainId, abi.json files and a little more. I also planned on expanding the Orcaswap typescript sdk but I haven’t found the time to yet.

I’ve also released a few packages on NPM and pub.dev but those solve very very specific problems so they won’t be of much use to many devs, but feel free to take a look at either of my profiles.

What I’ve learnt

As a software developer with a couple years of experience, finding a job hasn’t been easy. After applying for hundreds of roles and not even making it to the interview stage of most of them I had decided that I will carve my own path and work on open source in the meantime or even full-time, whether that be writing documentation, building software or just helping out community members.

I decided to start writing documentation for the Solid.js community. I found this as a way to help beginner and experienced developers get started with Solid.js. Another community I started contributing to is the Supabase community, as I am helping them expand their Auth UI library and plan on writing documentation which pertains to Solid.js.

While working in these communities over the past months I’ve realized that software development shouldn’t be solely based around making money, building cool stuff all the time, and creating SAASs or startups. It should also be about community building, software management and documentation, and knowledge sharing. After all, none of us as software developers would be where we are today if someone decided not to share their knowledge and just kept on building new things without explaining how he or she did it. This is one thing that a majority of software developers are missing, the ability to teach, write, and convey ideas at different levels of understanding.

Nobody is an island. As software developers we need to learn how to share our knowledge before moving forward and leaving everyone else behind.

The Experience Gained / Conclusion

In summary I’ve really gained a lot while working on open source. From developing web3 SDKs to writing documentation for Solid.js, open source is something that I have come to fall in love with. In just the few months that I’ve been doing this I’ve had the opportunity to connect with so many cool people, one of which being Ryan Carniato.

As a developer I highly recommend getting involved in open source at least once in your career, and when I say open source I mean contribute to a well known open source library, package, SDK or whatever it might be, I guarantee you that you’ll learn a lot from the experience.

This was just a quick update article to let you guys know what I’ve been doing over the past month and what I will be doing for the time being. If you would like to reach out don’t be afraid to DM me on Twitter or if you’ve already left twitter then feel free to add me on Discord. Bye for now 👋.

What I’ve Learnt While Working on My Second Flutter App: Numb

Michael Essiet — Sat, 24 Sep 2022 17:02:21 +0000

The Skills and Experience I Gained While Working On My Second App

Hi, it’s Michael. Over the past couple weeks starting from the beginning of September and today being the 23rd of September, I’ve been working on an app called Numb. You could say that this app is a sort of Numi clone for mobile. For those of you who don’t know what Numi is, it’s a calculator app on MacOS. You might be saying to yourself “Ok… what’s so special about a calculator app?” well Numi is more than just a normal calculator app. It allows you to do conversion, assign variables and many other things. Here’s a quick photo of what it looks like

Looks pretty cool huh? I found out about this from a fellow developer named Takuya Matsuyama, for some of you that name might ring a bell.

Numb is going to be a mobile version of this, developing a calculator in this way will be taking the mundane beginner developer project of the calculator and turn it into a broader spanning project that challenges both beginner to experienced developers.

TL;DR

I chose to make Numb in order to challenge myself and develop my skills in mobile app development , especially since I’m able to develop for iOS and Android now.
I chose Flutter to build this since it makes development quicker , easier and is more performant than other cross platform frameworks.
I gained a better understanding of Regex , it’s use cases and how important it is in a lot of software we take for granted
Numb will be open-source until I come to a conclusion on whether to monetize (subscription model), sell or make it free.

Why Make A Calculator App Of All Things?

I chose to make Numb because I saw it as a way to challenge my skills, experience and perception on some concepts.

Earlier in my developer journey I skipped the basic calculator app that a lot of us developers make as our first, second or third project. And now it’s coming back to bite me in the ass 😂.

One afternoon while thinking about a project that would look good in my resume I started thinking about apps I use everyday or at least once every 2 days, and it came to me that I’ve been using Numi quite often lately. So I did some digging and I realized that there was no app like this on mobile, I was only able to find one similar in concept but nothing else really. It wasn’t all that different from a basic calculator. That is when I decided to make one that I can carry around in my pocket.

I saw it as an opportunity to build not just for myself but for a lot of people out there who are looking for a quick calculator app without all the headaches of having to tilt and look for operands and hope that the syntax is right.

Why I Chose Flutter Over React Native

Over the past 2 years I’ve been dabbling in Flutter and React Native off and on. With my first app(Twitwall) being released in February 2021, I gained experience from a plethora of challenges and situations that I needed to figure out myself. My first app Twitwall was built using Flutter, I started developing it in December of 2020 after coming across Flutter for the first time. This would serve to be the driving factor that made me switch from React Native to Flutter.

While using React Native for the past few years I noticed that the community never seemed to be in consensus for anything. When googling for quick guides on how to do something or on how to implement a particular library/feature, the things I came across were either outdated, completely wrong or meant for a specific version of Expo/React Native. For instance, I remember looking for a quick way to implement a dismissible list item in react native since it was removed from React Native in a previous update. Luckily I came across a lot of guides, tutorials and articles on how to do so but they all went about it in a roundabout way — I mentioned this in one of my previous articles.

I initially started Numb with React Native, I had reached the point of developing the calculation and conversion engine. However, something at the back of my head said that I should develop the frontend a bit first, so I did and it didn’t go as planned. I had to make use of a lot of libraries that interact with the storage, databases and allow theming respectively. And these are the packages I chose: MMKV for storage; React Native SQLite Storage for the database; NativeBase for theming.

Installing these alone was a pain especially the database 🤦‍♂️, I had to install third-party libraries just to get it working. After all the installing and time wasted I still chose to stick with React Native, the last straw came after I had implemented some of the designs I had for the UI and they just didn’t look right at all — NativeBase was anything but Native looking, especially with their bottom modal sheet.

That’s when I decided that I’ll go with Flutter in the long run. With the performance gains, native feel and widget catalog I soon realized that I made the right choice. Installing the database(SQFlite) and the storage package(Get_Storage) literally took me less than 2 mins. You might be wondering “What about a theming library?” well with Flutter and in fact Dart you can make use of the ChangeNotifier class and implement theming yourself fairly easily. I wrote an article on this as well recently:

Quick and Simple Way To Add Theming To Any Flutter App

With all of that sorted I decided to deal with the engines before moving to the frontend aspect. Now I admit implementing the Regex, logic and structures was quite difficult especially since I took such a long break from Dart as a whole but I got rid of that ring rust fairly quickly roughly within a week. After running several tests on the engine I was shocked at how fast it was. From decomposing, filtering, compiling and calculating, the results were instant.

Moving on to the frontend implementing the designs I had come up with were fairly easy, no need for any external libraries when it came to the frontend.

All in all I chose Flutter because it was faster, easier and has little overhead in terms of widgets.

How My Perspective On Regex Changed

Earlier in my developer journey I saw regex as a tool that frontend devs will hardly ever use on the job, boy was I wrong 😂.

Over the past few weeks just working on this project alone, I’ve found myself on leetcode more times than not. In order to make sure that I’m implementing properly optimized algorithms for the engine I practiced a few leetcode algorithmic questions here and there, about 2 a day. But, I find myself using a more declarative approach while programming, I try not to reinvent the wheel unless absolutely necessary. However, in this project while making the engines, I had to do a lot of imperative programming especially since I had to deal with a lot of edge cases.

Regex is the backbone of the engines, you might think that it is some trained AI model that works with word and number recognition, but nope, it’s just good old regex. Arguably regex is one of the most powerful tools backend developers have at their disposal.

A look at the basic parsing algorithm

Regex saved me a lot of time while working on the engines, especially since I don’t have to go over every character in the input.

To Open-Source, To Sell or To Monetize? That Is The Question

As a developer still striving to get into the market and get a decent job, I don’t think that I’m in a position where I can make something that has taken so much of my time open-source and free in the long run. I’ve been deliberating over this issue for the past few days now, as I am an advocate for open-source software.

I have considered going with Numi’s monetization model and limiting the free version of the app to only having half the functionality and no cloud synchronization.

I have also considered selling this app to any company or individual willing to buy it for a good enough price as it is something that can be easily built upon to have high utility.

At the end of the day money keeps the lights on, and food on the table, not advocacy or how much you contribute to the community.

However, I later came to a decision to leave it open-source until I am either able to find a buyer or implement the monetization model.

If you are interested in buying the app, supporting its development or helping out with marketing in order for it to be a success, you can reach out to me on Twitter, Reddit or email me on my public email (emsaa2002@gmail.com).

Quick Look At The Screens So Far

From left to right: main screen, theming and nav modal, and help/instructions screen

I hope you enjoyed this article and I hoped that it helped you in at least one way. For the next few weeks I will not be releasing any articles since I will be focusing on helping out with the new Solidjs documentation and trying to make it into the fellows program, but I will be coming back towards the end of October with an update.

I hope you had a great time reading this article and I hope you have an even greater day, bye for now.

Follow me online for more frequent updates

Twitter: Michael.E (@devshogun) / Twitter
Reddit: Devshogun (u/Shogun-2077) — Reddit
Medium: Michael Essiet — Medium
Dev.to: Michael Essiet — DEV Community 👩‍💻👨‍💻

Quick and Simple Way To Add Theming To Any Flutter App

Michael Essiet — Sat, 17 Sep 2022 17:02:11 +0000

Theming Made Easy Using The ChangeNotifier Class

As a Frontend, Fullstack or even Backend developer I’m sure you must have googled “how to theme…” at least once. With app theming being so common nowadays but still being a bit complicated on most frameworks it’s not a surprise that “how to theme a * app” is commonly searched on google by Frontend to Backend developers alike.

In this article I will be sharing how I go about theming my Flutter apps, whether that be a side project or otherwise, using the ChangeNotifier class.

Prerequisites:

Basic Flutter and Dart knowledge
Flutter SDK fully installed on your development machine
A device or emulator to test your app
Basic knowledge on the ChangeNotifier class (Simple app state management | Flutter)

Let’s Begin

I will be starting out by creating the theme.dart file. It can be kept in any directory depending on your file structure. I keep it in its own separate folder that contains files like colors.dart and any other theming/styling variables.

Initial Setup

First things first, let’s change the root of our app into a stateful widget. We need to do this in order for the widget tree to re-render when the theme is changed. Some of you might think that is going to be very tasking process for the app especially if it’s a huge app like Instagram for instance, well you will be surprised to know that Flutter handles this quite well and if you do run into any bottlenecks or janky frames you can always make use of the AnimatedBuilder widget which takes in a Listenable as an argument and changes the children widgets or the widget tree that it wraps based on changes happening within the Listenable .

As I usually do in articles like this I explain the code within the code snippet. Take note of the comments.

Creating Theme.dart

We can leave the main.dart file as is for now and move on to creating the Theme.dart file.

In this file we will be declaring our themes whether that be light, dark, sunrise, noon, or whatever you want to call them. We do this by making use of the ThemeData class in Flutter

You can change the colors, text styles and more to whatever your app theme might be. Be careful while using some parameters though, for some reason some won’t work when combined with other parameters. For instance, the bodyMedium and bodyText1 parameters in the TextTheme class can not be used at the same time, this will cause an error that will break the app and show the below error

I don’t know why this is allowed to happen 🤷‍♂️. They should just deprecate the 2018 terms

Creating The AppTheme Class

We will be making a class called AppTheme that makes use of the ChangeNotifier class. This will house our theme state and the callback that will handle toggling of the theme.

In the above code snippet I added the AppTheme class into the theme.dart file. I did this because the class is only a few lines of code. Notice that I created an instance of it on the 30th line, I did this because it would be easier to understand if another person were to take a look at your code and look for the root instance of AppTheme.

I made themeMode a getter since it is ill advised to mutate state directly, since mutating state directly leads to unexpected bugs some times.

Implementing appTheme

Once you’ve created all that you can go back to your main.dart file and implement it in the MaterialApp widget at the root of your application, like so:

And with this you’re done. In order to make use of the themed values all you need to do is use Theme.of(context).* with (*) being the parameters you set in the ThemeData variables earlier e.g(Theme.of(context).textTheme.headlineMedium)

Let me show you the PlaceholderWidget code as an example

Conclusion

Let me show you what your app might look like if you followed this article to the letter:

Yup! It does that fading animation on it own, no extra code.

And voila! You’re all done theming your Flutter app. With less than 30 lines of code and a few changes to already existing code you’ve added theming to your Flutter app.

If this article helped you in any way, please feel free to share, leave a comment or applause 👏. If you think that I could improve the article in any way, please leave a comment, I would be happy to chat and rub minds.

If you really liked this article feel free to check out my other posts on similar topics. And don’t forget to tune in next week for an inside look into a little side project I’m working on.

Pull To Refresh Or Search Using Flutter

Flutter vs. React Native: A Cross-Platform Framework vs. React Ported For Mobile

Michael Essiet — Sat, 10 Sep 2022 13:44:21 +0000

Why React Native Makes Me Want To Pull My Hair Out

This is going to be a short article of me mostly venting about my struggles with both React Native and Flutter. Yes, I know it sounds weird but there are some things in React Native that I just don’t understand why they do and don’t exist, the same also goes for Flutter, but it’s much more manageable than React Native.

A few things to note before reading: the views in this article are my own and they should not be taken as advice in any way, shape or form; the scenarios in this article do not apply to all projects and might or might not apply to yours; and I won’t be going into too much detail in regards to the differences in syntax or sharing code snippets like I normally do. Since they are built off of 2 completely different programming languages the huge difference in syntax shouldn’t come as a shock to you.

Now let’s talk about the major differences between the 2:

Ease Of Use

Ease of use is very subjective, depending on the framework and dev stack you are coming from. If you’re coming from a web development stack that makes use of Javascript frameworks such as React or Vue, React Native will seem very familiar to you as opposed to Flutter. However, if you’re coming from a more traditional programming stack such as Java, C# or Kotlin, Flutter won’t exactly feel familiar but most of the basic concepts of OOP you know will apply.

If you’re a beginner just starting out your programming journey then I would say that Flutter is easier to use since it has a large library of built in widgets that just make the app development process seamless, but that can also work against you. With Flutter you can build a fully functioning app with cool animations and components without having to install any third party packages or libraries. Meanwhile for something as simple as a swipeable list view in React Native you will need to jump through so many hoops it’s ridiculous, from installing animation and gesture handling libraries such as react-native-gesture-handler and react-native-reanimated like why do I have to do all this for a component that should be built into the framework 🤦‍♂️

Documentation and Features

In terms of documentation Flutter beats out React Native in this one. I know a lot of React Native fan boys are going to hate on me for saying this, but hear me out.

Through out my journey as a developer I have never come across an official way to do something in React Native especially since the React Native team has close to 0 involvement in the community and in putting out beginner friendly and advanced content, either on Youtube or through blog posts. To be honest the React Native community and the fact that big tech companies are using it is the only reason why it’s still alive.

While on the other hand, the Flutter team puts out so much content on their Youtube channel and blog posts that it’s hard to believe that they even have enough time to work on their framework. From full blown app tutorials, to widget by widget tutorials, to basic tutorials and explanations about advanced concepts such as multithreading and the likes, it’s hard to believe that there are still people out there that would still disagree with me on this topic, but I guess everyone is free to believe what they want 🤷‍♂.

Now I know that React Native is very flexible as opposed to Flutter that can feel quite rigid at times, especially when using stuff like SVGs(till this day I’m still confused on why it’s so difficult to make use of SVGs in Flutter, but I guess you can’t have everything you want 😪).

Anyways all in all Flutter has better documentation and better built in components/widgets. But I’m not going to lie the community support that Javascript has works in React Natives favor 🙄.

Performance

Performance, performance the thing that everybody at all points of the development lifecycle cares most about. Let me save you some time and give you the answers first:

Flutter is faster in creating projects
Flutter is faster in hot reloading and restarting
Flutter is faster and smoother when carrying out complex animations since it has it’s own rendering engine
Flutter uses less CPU power on your development machine during development
React Native has smaller app bundles
Flutter has faster read and write speeds when interacting with device storage
Flutter build times are quicker

As you can see Flutter is faster…way faster. The speed doesn’t just apply to the things listed above it applies to a lot of other things as well, such as encryption and decryption. In an experiment I carried out recently I noticed that packages like ethers.js and web3.js were ported for dart so as a developer I became curious and decided to put ethers on dart up against ethers.js (the package it was ported from), and the results shocked me. Ethers on dart was 10 times faster on both iOS and Android. In the development space speed is very important and having something be 10 times faster is honestly ridiculous.

Developer Experience

Ya, I’m not even going to bother writing much about this. React Native makes me want to pull out my hair and Flutter is manageable as long as you don’t bury yourself in nesting hell 😂.

Oh, and did I forget to mention that if you’re really considering building complex applications using React Native that you will need to know a bit about how to code Natively since React Native doesn’t even come close to 80% integration with the Native code bases… but thank goodness for third party libraries am I right? 😅

Conclusion

Flutter over React Native any day for MOBILE APP DEVELOPMENT but never use Flutter or React Native for web development. Please!!! I don’t know why these 2 teams decided to do this… well I guess I understand Flutter’s case to an extent, since they want to be the one stop shop for all your development framework needs but why does React Native for web even exist. React Native’s whole existence is based off of it being React.js for mobile development, it’s kinda implied in the name “React” + “Native”. Personally I think using React Native for web development is an abomination and the fact that it exists is probably because someone on the React Native team brought it up during some meeting and the team leads said why not 🤷‍♂️.

I know a lot of people will have a lot of things to say regarding this article but these are all my views and you arguing with me over them won’t change a thing. Some things that we can all do that will make a change is contribute to the community by writing documentation, making videos, building well rounded packages and libraries, and making PRs to these projects with our own little additions (hopefully they get merged 🙏). Anyways big ups to the React Native community members for building for and keeping that framework alive and big ups to the Flutter team too for making such a well rounded framework 💪.

I’ll be writing again next week about a personal app I’m currently working on. If any of you know Numi for Mac, you could say I’m working on something similar.

If you enjoyed the article leave an applause and check out some of my other articles

React.js VS Solid.js, As A Beginner Which Should You Learn?

Michael Essiet — Sat, 03 Sep 2022 11:03:17 +0000

As A Beginner Which Framework Would Help You The Most On Your Developer Journey?

As a beginner getting into javascript Frontend frameworks for the first time you’re probably wondering about a few things like, which one is the fastest, which one is most used, which one is easier to learn or which one earns more. Well, if you are wondering about things like that, good thing you stumbled upon this article because we will be discussing which framework, Solid.js or React.js, would be the best fit for beginners, as well as answer a few questions you might have.

Since this is a beginner focused article I will be providing short explanations to some of the terminologies used while talking about frontend frameworks. Do keep in mind that we will not be discussing anything advanced such as hydration methods, server side rendering, diffing algorithms, granularity, etc.

DOM : Otherwise known as Document Object Model is an API for HTML documents that defines the logical structure of documents and the way documents can be accessed and manipulated.
JSX/TSX : This is a syntax extension to javascript and typescript respectively. You will see them very often especially in codebases containing React.js or Solid.js code. Files that have the .jsx or .tsx file extension will contain JSX or TSX code.
Virtual DOM(VDOM): This is a representation of the DOM stored in memory created by libraries like React.js, and it is synced with the real DOM by using a diffing algorithm.
Diffing : This is an algorithm that takes in 2 inputs and finds the difference between these inputs. As it is an algorithm different frameworks and libraries implement it in different ways and React.js is one of those libraries.
Components : React and Solid have things called components which can be different bits of reusable code such as navigation menus, drop downs, buttons, forms, helpers etc. The kinds of components you have, depends on you. The 2 types of components are function and class components. This is just a light summary,
Rendering : This is the process when your framework transforms your code into DOM(Document Object Model) nodes that are understandable by the browser.

Ok now that we’ve gotten some of the confusing lingo out of the way let’s talk about what you’re most curious about — which one is more popular or widely used?

Popularity

Without a doubt React.js is more popular than Solid.js since it is older and it was made by a more well known company/team(i.e Meta). With React.js being released in 2013 it should not be much of a surprise that it’s more popular than Solid.js which was first open-sourced in 2018 and officially had version 1.0 released in 2021, making it roughly 5 years younger than React.js. With companies like Meta, Netflix, Airbnb, Dropbox and many more using React.js. Having React.js be the first framework you learn is not a bad idea at all.

If you’re considering a framework because of it’s popularity, I would suggest that you go with React.js over Solid.js since it offers more job opportunities.

N.B : From here on out React.js will be referred to as React or react and Solid.js will be referred to as solidjs or Solid

Learning Curve & Development Experience

Both React and Solid have fairly low learning curves. They’re the ideal frontend frameworks to learn for a beginner coming straight out of the HTML, CSS and Vanilla JavaScript bootcamp, with a basic understanding of these 3 it shouldn’t take longer than 3 months to grasp React or Solid.

But there are some things that you need to keep in mind:

React has hooks which are functions that you use in function components, that offer you features that are only available in class components. They can not be used outside of function components since they are mainly built to be used inside them. If you try to make use of them outside of function components you will run into errors.
On the other hand Solid has primitives that you can use both inside and outside your components. Solid only has function components so there is no need for you to worry about running into class components and wondering “what the heck is this?”.
In React to store state within a component you have to make use of the useState hook. While in Solid you have to make use of the createSignal primitive or the createStore primitive. CreateStore is more used in arrays and objects, while createSignal is used more in storing numbers, strings and booleans. I’m sure you’re wondering why have 2 things that do the same thing, well Solid does this because they make createStore in such a way that using it for nested things like objects and arrays overall, make it faster, lighter and more reactive. I’m not going to go into too much detail into this but if you would like to know the details about it you can find it here.

With all this said, I’m sure you’re still wondering which is easier to learn, well I will have to say that Solid takes the cake in this one. With less specific things to worry about and components/helpers that make a lot of things easier, Solid just makes React look like it’s still in beta and I’m sure that as a beginner you wouldn’t want to deal with the complications of working with beta software.

For instance Solid has a neat built in component called For, it helps in simplifying the complexity of dealing with arrays or data within them, within your JSX code. For example:

Now here’s that same code in React

Notice the slight differences and absence of the For component? Depending on the kind of person you are you might prefer React in this particular case, but with the built in components that Solid has, it’s going to be hard to say that the development experience isn’t better.

Later on once you start making use of more complex libraries and writing much more complex and taxing code you will hit the React re-render hurdle that till this day vexes developers around the world. By the time you reinitialize something an infinite amount of times just to find out that it was just React doing it’s shananigans you will understand 🙃.

There are a lot more things that you will come to learn and understand when you decide to learn either Solid or React. At the end of this article I will be providing links to both their documentations, so once you’re done feel free to read through which ever framework you choose.

Performance

Now let’s get to the most important part, the part that companies or startups should consider before deciding on their tech stack, Perfomance. In this category there is no competition, Solid blows React out of the water. Here are a few photos to give you a little bit of context

In all these comparisons lower is better

I know these might seem like gibberish to some of you, but the tables analyze the time and memory it takes each of the frameworks to carry out the tasks in the first column. And in the first image you will notice that Solid is 5% slower than vanilla javascript as opposed to React that is about 93% slower. That is a huge margin. Here is the link to view the full table Interactive Results (krausest.github.io)

With Solid being almost as fast as vanilla JS there are not many frameworks that can beat its speed. Meanwhile React on the other hand bloats itself up with techniques like the VDOM, entire component re-render on even the smallest of changes, keeping long disposed of components still in memory, etc. Solid does things very differently with only updating things that have changed and doing its best to only render and load things that are needed in realtime through lazy prop evaluation and then getting rid of them when they’re not needed anymore. This in other words is called the Vanishing Components approach. I can write on this and other advanced concepts in another article if need be.

I’m sure you might still be asking “Michael, what makes Solid.js so blazingly quick?”, well I’m glad you asked, luckily for you I’ve got the answer from Ryan Carniato the creator of Solid.js himself. He replied:

While Solid has a component model for authoring, it has very little impact on how it executes. By escaping the component model at runtime Solid is able to do even more efficient updates than other libraries that use compilation or a VDOM to diff. — Ryan Carniato

you can find out more on this in the article Ryan posted(Thinking Granular: How is SolidJS so Performant? — DEV Community 👩‍💻👨‍💻) in which he explains this in more detail.

We can go on and on about how Solid blows React out of the water in regards to performance, but let’s move on to something that most, if not all of you are thinking about, and most likely came to this article to find out.

Job Opportunities

The job opportunities. One of the end goals of becoming a developer in the first place. Over the years many companies have integrated React into their sites, apps and some even their company infrastructure as a whole. Till this day React remains the most popular and well used framework in the world, it doesn’t matter where you live or work, no matter where you are you will come across a company, individual, government agency or even coffee shop looking to hire a React developer. With React there are countless job opportunities, but do keep in mind that with countless job opportunities also comes countless individuals looking to take those jobs.

On the other hand, I haven’t run into any companies recruiting specifically Solid.js developers YET. You might make the first startup that creates the first Solid.js developer job listing, who knows 🤷‍♂️. With all this said, I’m very certain that this will change in the future, especially with the level of frustration that React developers express on a daily basis (I’m one of them 🤣).

Community Support & Documentation

The React community is one of the largest communities in the developer space. That shouldn’t be a surprise with React being about 9 years old as of the day of writing this article. On the other hand with Solid just being more than 4 years old its community is significantly smaller but that won’t stay true forever.

In terms of documentation and coverage React has much more documentation both in the official docs and outside the docs with developers writing, recording and screenshotting about their apps, hurdles, issues, milestones or frustrations while using it. SolidJS has a few articles and videos posted online and the team and creator are active parts of the community. but it can’t be compared to React’s at the moment.

With all this said do keep in mind that Solid and React are very similar and very different as well so if you run into a SolidJS specific problem you can always feel free to ask the whole community since everyone is here to learn and grow. To your surprise a senior React developer that has never touched SolidJS might be the one to help you solve your problem.

React Documentation: Getting Started — React (reactjs.org)

Solid Documentation: SolidJS · Reactive Javascript Library

Conclusion

In conclusion, if I were to make a recommendation, I would say to start with React right now. I’m not sure where or when you will have come across this article, maybe SolidJS has taken the crown from ReactJS already. But as of September 1st, 2022, React is the framework/library to use as a beginner progressing from Vanilla javascript. Only once you’re done learning React and have honed your skills in it, would I strongly recommend learning Solid, as it is more performant, has a better dev experience and is much more closer to the community.

If this article was helpful please leave an applause 👏 , share and leave a comment of your thoughts on it. If I missed anything or made any mistakes, feel free to let me know. I’m always looking for ways to improve .

Happy coding and have a great day ✌️.

Check out some of my other articles:

Add Parallax Animation To Your Flutter App Using VelocityX and Sensor Plus

Michael Essiet — Sat, 27 Aug 2022 14:36:18 +0000

Learn A New Way To Use Tween Animations In Flutter

Everyone knows that parallax animations look cool and are really fun, but not everyone knows how difficult it is to actually apply it to apps. In this article I will be showing you a quick and easier way to add it to your Flutter apps using the TweenAnimationBuilder widget, transform widget and 2 handy packages.

Parallax effect made using Flutter, VelocityX and Sensor_Plus

First things first, what will we be needing in order to carry this out:

Flutter (of course)
VelocityX Flutter Package (not compulsory but helps a lot)
Sensor_Plus Flutter Package (very important)
And last but not least a little bit of knowledge using builder widgets in Flutter

TweenAnimationBuilder class - widgets library - Dart API

Let’s Get Started

Ok! Now that you’ve skimmed through the TweenAnimationBuilder documentation you should have a basic understanding of it. I encourage you to do a quick read of the Sensor_Plus package documentation and the VelocityX documentation as well, as they will help you in the future.

In order to get started with this make sure that you already have a Flutter app that you want to add this to or simply run flutter create app-name in your terminal.

First you’ll need to head over to the pubspec.yaml file and install the packages that I mentioned earlier (velocityx and sensor_plus).

Once that’s done the second thing that you’ll do is go into your app-name/lib directory and open up main.dart. In here you’ll see a lot of generated code, you can leave it for now and just create another .dart file in app-name/lib that will house the Parallax animation widget. You can name this file whatever you’d like.

Now Let’s Get Into Coding

Once you open this file in your code editor you can go ahead and create stateful widget or use the stfl — stateful widget generator code snippet that comes with the Flutter VSCode extension. You should have something like this

https://medium.com/media/0f463b832533235c9246a6036f943b33/href

Alright now that you’ve generated a basic stateful widget it’s time to modify a few things. Firstly let’s add the TickerProviderStateMixin to the _MyWidgetState class.

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

With this you will be ready to produce as many 60 frames per second animations as you’d like. And do endeavor to read the comments in the code as the code will be explained in the comments much more than in the article.

Getting the values out of the way

Here, we’ll be defining variables to hold the angular values that we will receive from the Sensor_Plus package.

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

Ok, so as the comments have already explained the values that have angle in them are used to store the data that we will receive from the accelerometerEvents.listen method. The streamsub value on the other hand will be used as an array of stream subscriptions. The StreamSubscription class here is used to properly type the array letting flutter know that this is an array of StreamSubscription objects. Whenever you use the .listen method on a stream the object returned is a StreamSubscription object. More on StreamSubscription below.

StreamSubscription class - dart:async library - Dart API

We made the build function return a Column widget because of the error that will appear if there is nothing returned.

Now let’s call void initState and void dispose so that we can initialize our accelerometerEvents.listen. We will also be changing the state of the xAngle, prevXAngle, yAngle, prevYAngle, zAngle, and prevZAngle variables in the .listen() callback function. Let’s go 👇

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

We make use of the initState and dispose functions in order to, respectively, subscribe and cancel subscriptions to the stream.

Notice that in the streamsub.add method we’re adding accelerometerEvents.listen() to our array of stream subscriptions. Inside the listen method we have a function that gives us the realtime value of the accelerometer events. The event object has 3 values: x, y and z. Make sure that you set the state of what the previous Angle values will be before setting the new state of the Angle values, this will be very important for what comes next.

Time To Animate

Now that the values are updating in realtime we can start making use of them using the flutter widget called *TweenAnimationBuilder *. We will be making use of the Column widget that we added earlier, of course you can make use of any container like widget you want but I’m making use of Column in case I would like to add anything after the widget. Alright, let’s get into it

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

In the code snippet above, we make use of 2 TweenAnimationBuilder widgets. This is because we will be animating the values of 2 axes, first the X, then the Y. The way that we will be doing this is through the Transform widget. You might be wondering why we are using the zAngle value if we’re going to be animating the Y axis. Well this is because of the way you move your device in 3D space, making use of the zAngle for this produces the best results. As you will see later, the values being parsed to the rotateX and rotateY Matrix4.indentity() methods, will seem a bit mismatched. Ok, now let’s see the values being used in action

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

*1. Here we passed in the negative of the animated zValue provided by the TweenAnimationBuilder . You will probably be asking why is it negative, like I said earlier it is because of the way you move your device in 3D space. In translates in a much more desired way as if we were to use the positive zValue or make a yValue.
*2. Here we passed in xValue. Yes, not the negative just the positive xValue.

I’m sure you’re interested in knowing why these values are divided by 10. It’s because if they are not divided by 10 the parallax motion would be too much event if the device is turned slightly.

*3. We made use of the xValue and zValue here and multiplied them by 8 in order to get a better shadow effect for the parallax card.

With this we are done with the Parallax animation and we can now see it in acton in our app. All we need to do is add this widget to our main.dart file as a widget. Like so

https://medium.com/media/4448338978a34173350d85c041f4de50/href

To get your main.dart file looking like this just make sure to get rid of all the boilerplate that is comes along with it when you generated the app earlier. Replace NameOfParallaxWidget() with whatever you named the parallax widget you made.

Conclusion

Now you should have something like this when you run your flutter app

And there you go you have a parallax animation. You can apply this method to any widget that you would like to animate by just changing the VxBox widget to another widget you would like to animate. You can even use it on text but it would be best to use it on the texts container instead 😅.

Here’s the link to my repo

flutter-test/parallaxnft_widget.dart at master · michaelessiet/flutter-test

I hope this article helped you out. If it did why not leave a clap 👏 and share 😁.

If you would like to add to the repo feel free to leave a PR or fork and experiment with it . If I got anything wrong don’t be shy to let me know in the comments. I’m always looking for a way to improve.

Thanks for reading ❤️ have a great time playing around with Flutter.

Pull To Refresh Or Search Using Flutter