DEV Community: psecuresystem

[Episode 0]: Introduction to Quantum Computing

psecuresystem — Thu, 19 Jan 2023 14:29:46 +0000

According to dictionary.com, quantum computing refers to a computer that makes use of the quantum states of electrons or other particles to store and process information as quantum bits.

The above sounds intimidating so let me break it down for you. To understand quantum computing, we must first understand what computing is. In short, computing refers to the process or act of calculation. Anything that can perform calculations is a computer. In today's world, computers have gone past simple calculations like addition, subtraction, multiplication and division and are now capable of solving complex problems because of their ability to perform a quadrillion calculations per second.

Now, what is quantum mechanics? Quantum mechanics refers to the study of interactions between really really small particles. We're talking millions of times smaller than atoms. Now why is this exciting, turns out that matter on a subatomic scale doesn't behave intuitively. These particles behave really strangely and studying their behavior can enable us improve our lives in various fields. Computing included.

In summary, Quantum computing refers to the application of quantum mechanics to create superpowerful computers.

Facts about Quantum Computing

Firstly, Quantum Computing leverages qubits. I know you're confused about what qubits are so let me break them down. In classical computing, a bit is either 0 or 1. This is not the case in quantum computing. In quantum computing, bits are a linear combination of 0 and 1. This type of bit is called a qubit. A qubit is a two-level quantum system where the two basis qubit states are usually written as ∣0⟩ and ∣1⟩. A qubit can be in state ∣0⟩, ∣1⟩, or (unlike a classical bit) in a linear combination of both states. This is called superposition.

Qubits have some basic properties which we must know before proceeding. These are:

Superposition (ability to be in a state of 0 and 1 at the same time)
Entanglement (spooky action at a distance) — Einstein's words…not mine…
Tunneling (finite probability of a particle moving through barriers it classically cannot, e.g Walking through walls)

Quantum computers can harness these properties of qubits(Well the first two. We really haven't figured out the third). If you want to read more on these, I recommend reading this brilliant article by Jasmine Tong and watching this video by Microsoft.

Creating the Programming Language

Now that we've gone through the insane weirdness of quantum computing and qubits, Lets get on to the fun stuff: programming.

Why on earth would you love to create a programming language for this hell of a field? Well, there are a couple of reasons:

Learning: "The best way to learn something is by doing it" - Some Wise Man. Working with it is the best way to learn more about quantum computing. Now there are a couple of ways we could do this. We could: Write Some Circuits, Implement them from scratch or Implement some algorithms. All these are excellent ways, but creating our programming language will not only help us to practice our programming skills but also do all these as well.
Project Name: Jokes aside, A quantum computing-focused programming language sounds like one hell of a programming project. There are few in the world(programming languages, not libraries).

So, what tech stack are we going to be using for it? I'm glad you asked. We're going to be using the following:

TypeScript
Git and GitHub for version control
Vscode as our primary editor, etc.

This series will get a new episode every Friday at 8:00 am GMT. So with no further ado, let's get coding.

Remember to subscribe to get email notifications for every new episode. Thanks

5 Backend Web Development Trends for 2023

psecuresystem — Tue, 17 Jan 2023 20:09:55 +0000

The backend has always been an exciting field. Like every other software development field, things are constantly evolving, and we need to keep up with the evolution and trends in this field so we won't be left behind. This year, we have seen many changes, from greater adoption of full-stack frameworks to the return of MySQL. As always, this article will cover it all. Here are the most popular tech trends of the new year.

Serverless Computing Prevails

Serverless computing is a method of providing backend services on an as-used basis. A serverless provider allows users to write and deploy code without the hassle of worrying about the underlying infrastructure.

Serverless computing is a way to offer backend services only when they are needed. Serverless architecture reduces the cost, hassle, and time required to maintain servers. It also makes it easier for developers to scale up their solutions while using serverless architecture since there are no policies considerations

REST is Still Alive

In the past few years, we have had a lot of innovations around the backend space, including those that promised to replace REST, e.g. graphQL. Given the popularity of graphQL, GRPC, etc. , it is a bit surprising that REST is still thriving and being used a lot. I guess a lot of this is due to its simplicity and the number of APIs written in it. I expect REST to be still used a lot in 2023 but alongside other methodologies in a microservice-focused approach.

Concurrency and Parallelism

In short, concurrency refers to multiple parts of a program executed in overlapping periods in no specific order (but not simultaneously) while parallelism is when many calculations or processes are carried out simultaneously. Concurrency is used all the time in production, but I believe that more devs(especially junior level) are beginning to pay attention to concurrency and parallelism practices. This is mainly because of how easy it is right now, especially with golang (but I might be wrong). Overall this is a good trend since it means faster speeds.

Increased Adoption of Full-Stack Frameworks

For a good reason, more people are beginning to use full-stack frameworks like next.js, solid start, etc. Since the dawn of time, if you wanted to create a full-stack app, you had to create your frontend and your backend separately. Even with full-stack frameworks like Django, ruby on rails, etc, it was just easier to use a separate frontend and backend.

However, recently with new libraries like TRPC for frontend, web assembly libraries etc, it has never been easier to create a full-stack app. And the full-stack frameworks are just getting better and better every day. I believe that this massive full-stack frenzy will continue even in 2023.

BAAS

Backend-as-a-Service (BaaS) is a cloud service model in which developers outsource all the behind-the-scenes aspects of a web or mobile application so that they only have to write and maintain the frontend. BaaS vendors provide pre-written software for activities that take place on servers, such as user authentication, database management, remote updating, and push notifications (for mobile apps), as well as cloud storage and hosting. BAAS is incredibly powerful and yet so simple. It really removes a lot of workload from managing the backend.

In 2022 we have seen many tools come out to further help baas grow e.g pocketbase, supabase etc. I expect BAAS to grow even further and get more adoption especially with side projects and early stage startups. Despite this backend is still going to be very valuable and a really good skill to learn.

Conclusion

Backend Development is a fascinating field and is getting more exciting every day. I expect many new innovations to backend development this year to further simplify the process. I also expect things like docker, kubernates, fundamental cloud computing etc to be among required things for back-end developers to know.

Thanks for reading this article to the end. If you're interested in tech or learning new things, follow my page as I post blog posts 3 times a week. Peace.

Creating a Real-time Chat App using Firebase and Solid Js

psecuresystem — Mon, 16 Jan 2023 09:47:08 +0000

Solid JS is a brand new blazingly fast framework created by @ryansolid. It takes reactivity and developer experience to a whole new level. Visually, It looks like react but is a lot better and performs a whole lot better as well.

Creating a real time chat app using firebase and solid js will really help us understand more about solid js and how it works.

Note: This tutorial is assuming you already have a firebase project setup. If you don't, follow this guide

About the Application

We are going to be creating a single page group-chatting application. Any client can go on their browser and join the chat. It is not much but will help us understand some key things about solid Js.

Bootstrapping the Application

To bootstrap the solid.js application, we will be using the terminal command

npx degit solidjs/templates/ts firebase-chat-app
cd firebase-chat-app

You can go ahead and install the dependencies and run the app with your favorite package manager. I'm using yarn.

yarn install
yarn add firebase
yarn dev

N.B: The bootstrapped application setup looks a bit similar to react except this is a different framework: Solid.js

Firebase Setup

To connect firebase to our application we will be using the firebase sdk.

To start off, we will be replacing src/index.tsx with this.

import { render } from 'solid-js/web';
import App from './App';
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

// Include your firebase config
const firebaseConfig = {};

export const app = initializeApp(firebaseConfig);

render(() => <App />, document.getElementById('root') as HTMLElement);

Next, We will need to create some hooks to help us use the firebase better. We will be creating two hooks. useAuth and useFirestore

useAuth:

Firstly we will create a useAuth.ts file a new hooks directory src/hooks/useAuth.ts.
We will then add the following to the useAuth.ts file:

export default function useAuth(app: FirebaseApp) {
  const [authState, setAuthState] = createStore<IAuthState>({
    user: null,
    error: null,
    loading: true,
  });
  const auth = getAuth(app);
  // Setup Listeners
  auth.onAuthStateChanged(
    (user) => {
      user &&
        setAuthState(
          produce((state) => {
            state.user = user;
            state.loading = false;
          })
        );
    },
    (error) => {
      error &&
        setAuthState(
          produce((state) => {
            state.error = error;
            state.loading = false;
          })
        );
    },
    () => {
      setAuthState(
        produce((state) => {
          state.loading = false;
        })
      );
    }
  );
  // Sign in if not already signed in
  signInAnonymously(auth).then((data) => {
    setAuthState(
      produce((state) => {
        state.user = data.user;
      })
    );
  });
  return authState;
}

useAuth will enable us to get the current auth state of the person logged in. It also help us sign in anonymously if we are not already logged in.

useFirestore

The useFirestore hook is created to help in adding records to a firestore collection, read data(in realtime) etc.

First of all, we create a useFirestore.ts file in the hooks directory. The code below is what is used in the hook file:

export default function useFirestore(app: FirebaseApp) {
  const db = getFirestore(app);
  const authState = useAuth(app);
  async function addData(collectionName: string, data: Record<string, any>) {
    const doc = await addDoc(collection(db, collectionName), {
      ...data,
      from: authState?.user?.uid,
      created: Timestamp.now(),
    });
    console.log('doc', doc);
  }

  function getData(collectionName: string) {
    const [data, setData] = createSignal<DocumentData[]>([]);
    getDocs(collection(db, collectionName)).then((records) => {
      setData(records.docs.map((doc) => doc.data()));
    });

    const q = query(collection(db, collectionName), orderBy('created', 'asc'));
    onSnapshot(q, (snapshot) => {
      setData(snapshot.docs.map((doc) => doc.data()));
    });
    return data;
  }

  return { db, addData, getData };
}

As you can see, we are creating two functions: One to add data to a given collection and another to get data from a specified collection. The addData function also sets up a listener to firestore to get the chats in realtime.

Building the app

Before We dive into making realtime chat work, we will create the ui for this using solid js.

First of all, we will have only one page which is the chat screen page. This is going to be in the App component.
The main div wraps the title, messages and message input box.

const App: Component = () => {
  const [messageTerm, setMessageTerm] = createSignal('');
  const [messageId, setMessageId] = createSignal('vision');

  return (
    <div class={styles.App}>
      <h1>Message the Group</h1>
      <div class={styles.App__messages}>
        <For each={messages()}>
          {(message) => (
            <div
              class={
                message.from == messageId()
                  ? styles.App__messageLocal
                  : styles.App__messageForeign
              }
            >
              {message.message}
            </div>
          )}
        </For>
      </div>
      <div class={styles.App__input}>
        <textarea
          placeholder='Message the group'
          onKeyUp={(e) => setMessageTerm(e.currentTarget.value)}
        />
        <button class={styles.App__button}>Send</button>
      </div>
    </div>
  );
};

There are a couple of things to notice about the solid.js code and its difference to react.

Usage of For Component instead of Mapping
Signals
Lifecycle hooks

Among others.

Putting it all together

Currently the messages are hardcoded and the send button does nothing. This next step is to add firebase functionality to our chat application.

Firstly, We will need to extract the chat into a new component.

Create a new file src/components/Chat.tsx. Add the chat screen code into it that was previously in App component.
Make sure imports are pointing to the right place.

Now that the chat is in a new file, we can replace App.tsx with

const App: Component = () => {
  const authState = useAuth(app);

  return (
    <Switch>
      <Match when={authState.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={authState.error}>
        <p>Error</p>
      </Match>
      <Match when={authState.user}>
        <Chat />
      </Match>
    </Switch>
  );
};

The app component now uses our custom useAuth hook to listen to the user's current auth state and renders a loading, error text or the chat screen based on the auth state.

Note: The Switch component is used for conditional rendering in solid when there are multiple conditions.

Next up, we will add firestore to our chat component. To achieve this we need to do the following:

Firstly, we get the data from firestore using our custom hooks:

const { addData, getData } = useFirestore(app);
const data = getData('chats');
const authState = useAuth(app);

The first two lines are for getting the data while the third is for the getting the current auth state.

Next, we make the messages dynamic. Previously the messages were hard coded but since we now have the firestore messages, we can replace the hardcoded messages with realtime messages as follows:

<For each={data()}>
  {(message) => (
    <div
     class={
       message.from == authState?.user?.uid
         ? styles.App__messageLocal
         : styles.App__messageForeign
      }
    >
      {message.message}
    </div>
   )}
</For>

Two things are happening in the code block above. Firstly we are replacing hardcoded messages array with the actual data. Secondly, the message source is gotten by comparing the message(firestore) from field with our unique id.

Finally, we can add an onClick handler to our send button to send the messages. The button with the onclick handler is now

<button class={styles.App__button} onClick={handleSubmit}>
   Send
</button>

The handleSubmit function implementation just adds sends the message to firestore. It is implemented like this:

function handleSubmit() {
  addData('chats', {
    message: messageTerm(),
  });
  submit_input.value = '';
}

We are using the addData function gotten from our useFirestore hook. submit_input is a ref to our textarea.

After doing all these, our website now looks like(with my styles)

You can test it by opening two different browser clients and chatting.

Conclusion

Creating this project has really helped us to understand solidjs concepts more like stores, signals, produce etc.

The deployed version can be found on https://realtime-solid-chat-app.web.app/. All the source code can be found on github

Thanks.
Buy me a coffee