Forem: Arnav Chauhan

Bun 1.0 , is the Hype Justified?

Arnav Chauhan — Fri, 15 Sep 2023 10:47:52 +0000

Bun.js is a new JavaScript runtime that was released in v1.0 in September 2023. It has been met with a lot of hype, with some people calling it the "future of JavaScript." But is the hype justified?

I came across Bun.js in a Fireship.io video back in July of 2022 and it read that it was going to be the fastest runtime. I dismissed it at that time as another Javascript framework like Deno without looking much into it. But with version 1.0 out with the benchmarks and a small hands on preview I have defiantly changed my mind. Fun fact first commit to Bun was done on 18 April 2021.

Bun.js Introduction

Fundamentally, Bun.js is a server-side JavaScript runtime similar to Node. A bundler/transpiler and a package management are built on top of this. Unlike Node, which uses the V8 engine, Bun is designed from the ground up using the WebKit/Safari JavaScriptCore engine. It does not diverge from Node. The libraries are created using C and Zig, and they specifically avoid relying on Node or NPM, reducing the amount of JavaScript in their stack. All of these choices are made to maximize performance. Huge performance improvements result by rewriting all JavaScript-implemented APIs, such as network and disk IO, in a lower level language.

There are many features Bun provides, but to get started we should take note of the following features(taken from official documentation):

In bun.js, every file is transpiled. TypeScript & JSX are simple to use out of the box without any configration
bun.js automatically loads environment variables from .env files
Web APIs like fetch, WebSocket, and ReadableStream are builtin
Node-API bun.js implements most of Node-API (N-API). Many Node.js native modules work out of the box.
node:fs node:path bun.js natively supports a growing list of Node.js core modules along with globals like Buffer and process
Bun's plugin API is universal, meaning it works for both the bundler and the runtime.

Where Bun has all the Fun

Rapid startup: Bun.js starts up incredibly quickly, usually in less than one millisecond. This makes it perfect for applications that require responsiveness and for running on low-powered devices.
Better DX : Another thing we need to talk about though is the bun package manager that's up to 25 times faster than NPM. And it's actually a standalone tool that can be used in any no Js project today.
Small memory footprint: The memory footprint of Bun.js is typically 10MB or less. It is therefore perfect for programs that must be memory-efficient.
Minimal API surface area: Bun.js has a small number of APIs, making it simple to understand and utilize.
Bun.js's support for WebAssembly enables it to execute code that has been compiled into native machine code. This can dramatically boost some applications' performance.

Bun Developer expirience

Developer experience plays a big role in any framework or library that is out there. And I was shocked at how simple it is to work with bun, and how is support JSX out of the box.

Here is an example code for a simple JSX preview hello world website.

Bun.serve({
  fetch(req: Request) {
    return new Response(`<meta charset="UTF-8">
    <h1>Hello World from bun JSX 🤩</h1>
    `, {
        headers: {
            'Content-Type': 'text/html',
        }
    });
  },
  error(error: Error) {
    return new Response("Oops \n" + error.toString(), { status: 500 });
  },
  port: 4000
})

Overall, I am very impressed with Bun.js. It is a promising new JavaScript runtime that has a lot of potential. I believe that it is worth trying out if you are looking for a fast, efficient, and easy-to-use JavaScript runtime.

I hope this blog post was helpful! Do checkout the official website to learn more about Bun.js, please visit the official website: https://bun.sh/.

Why everyone is talking about Astro and island Architecture? 🚀

Arnav Chauhan — Thu, 18 Aug 2022 08:47:00 +0000

If you love exploring different technologies in the web development ocean I am sure Astro must have been popping up a lot in your feed since few months. Astro's V1.0 got launched recently and a lot of people are testing out its capabilities by migrating their blogs or portfolio sites to Astro.

But there are so frameworks that offer good SEO and lighthouse score so why are people still so hyped up about Astro. Well how would you react if someone told you that you can ship your simple website with zero JavaScript. When I heard this I was blown away but also had many doubts since there are scenarios where I need JavaScript and scenarios where loading JavaScript in a static pages just slows down the site.

To understand more about this lets deep dive into what Astro does differently than Next.js one of the widely used framework for static site generation.

Astro is a meta framework 🚀

Unlike other frameworks like Gatsby or Next.js which are built on top of React , you can use components from React, Vue, Svelte and Solid.js directly in Astro. This makes it easy to migrate to Astro when you already have components written in this frameworks.

Zero JavaScript for static pages

If you load a statically generated Next.js site which does not required any JavaScript based interaction you will still see that in the network tab your browser still loads many JavaScript file that are required by the framework as you can see in the image below.

The main problem with this is that most of the time the JavaScript being loaded is not actually being used. You can see that almost 50% of my JavaScript is unused on my portfolio website which is made using Next.js.

Now one may argue that this can be minimized by using suspense and lazy loading but even after using those techniques that JavaScript is still loaded later which is not required at all.

Astro⚡ by default ships zero JavaScript to the browser. To achieve this Astro renders HTML on the server and strips away any remaining, unused JavaScript. This decreases the sites Time to interactive resulting in faster load time for content based websites. Here is one example of the decrease in size by using Astro
// Detect dark theme var iframe = document.getElementById('tweet-1437195415439360003-911'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1437195415439360003&theme=dark" }

How does Astro 🐱‍🚀 achieve this?

We all know that Next.js also uses static site generation just like Astro but still ships with JavaScript so how does Astro manager to ship zero JavaScript. Unlike Next.js which still keeps JavaScript in the HTML statically rendered. Astro strips all of the JavaScript. Next.js requires JavaScript since it runs on top of React and creates a Single Page Application that means JavaScript is loaded every time when the page changes. On the other hand Astro render a Multiple Page Application that means each route in your Astro site is a different HTML page with only static HTML and CSS.

But what if we required JavaScript like in a search bar or image carousel.

This is done by a technique called Partial Hydration 🐳. Astro allows you to ship JavaScript explicitly only for those components which you want to run in the browser. Astro lets you hydrate only the required individual component without interrupting the rest of the static site. Other SSG frameworks like Gatsby and Next.js do not this feature as they consider your entire website as a single JavaScript application.

Island Architecture in Astro 🏝️

Astro uses the idea of Island structure, which is about building entire websites using partial hydration. In frameworks like Next.js a website is built into client-side rendered Html, CSS and JavaScript bundles which are then shipped to the user. In island architecture static HTML pages are rendered on the server and slots/placeholders are added around highly dynamic areas for interactivity. These slots contain server-rendered HTML output from the corresponding widgets, which are then hydrated on demand at the client side.

Source: Astro Docs

This pattern isolates each page into separate small islands, any performance issue in one islands won’t cause any direct impact upon other units and also ensures that faster faster loading and rendering of lightweight components individually without being barred by other heavier components are loaded individually without being barred by other heavier components.

Conclusion

Combination of all the features listed above make Astro a good choice for sites which have a lot of static content like marketing sites, publishing sites, documentation sites and blogs.

Common Engineering mistakes new Software developers to make: Part-1

Arnav Chauhan — Sat, 06 Aug 2022 11:38:00 +0000

As new software developers, people tend to think of themselves just as a developer and often forget about the engineering aspect of their profession. Software development involves writing and understand code to build a software. Software engineering means using engineering concepts to develop software that is scalable, extensible, and maintainable in long run.

Many software engineers especially the ones who have just started with development often focus solely on the development problem and thus their software is rarely scalable or maintainable in long run. A lot of developers have a tough time understanding their own code which they would have written a month back which does not scale well when they start working in a team. In a team often others stumble upon your code when they have to use it or refactor it. It would be a big hassle if you have to explain what you have written to someone new every time such a situation arises. Thus when working in a team with senior engineers who review your code new developers often end up with multiple comments and requested changes on their review. Trust me I have been there, my PR once had around 40+ comments on GitHub when I was doing my first internship.

So far I have worked in multiple early stage startups and done few freelancing gigs and have seen many new developers struggle with few points that I will share. I recommend developers to read the book Clean Code : Robert C Martin as it's more approachable, especially for new developers.

Mistake 1 - Most widespread mistake

Poorly naming variables, functions, or any such identifiers.

Inevitably, code comments become lies over time. In practice, few people update comments when things change. Strive to make your code readable and self-documenting through good naming practices and known programming style.
Source

I cannot stress this enough but name your variables according to what they are being used for. I have seen some people using variable names like -

var a , final c, const b

this is not at all scalable when you work in a team. For example, suppose you have written a function that doubles a number only if it is a multiple of 3. There are two ways to name the function.

function double(num){//code to double multiple of 3}

function doubleMultipleOfThree(num){//code to double multiple of 3}

Suppose someone in your team has used the first function name and you come across a code block where it is used while debugging the code.

if(number > 0) double(number);

You would expect the end result of this line to be double of whatever number is passed. But then you run it , the end result is not the same. So then you would have to go to the function body of double and read the whole function to understand what it does. This increases the time and effort for debugging/refactoring the code.

Supposed if the function name would have been doubleMultipleOfThree you would have easily figured out by the name itself what the function does and would not have to go to the function definition to understand it. Same principle applies to naming variables in your code.

Mistake 2 - Not understand GIT

Two main advantages of using Git at software development:

Tracking the changes and updates. We are able to see who made which changes. Git also provides when and why a change was made.
Allowing to work collaboratively. Software development projects usually require many people to work together. Git provides the developers with a systematic way of doing that. Thus, the developers focus on the project instead of extensive communication sessions between the other developers.

Most of the people are proficient with using GIT to achieve the first point, they can push, pull, commit and create a branch. This works fine when you are working alone, but when working in teams there are bunch of other commands and concepts that are used.

Since in teams many people are working on the same code there may be cases that changes in same files are made by two people. Which create merge conflicts.
Sometimes you may need to rebase a branch instead of merging to it to keep the GIT history clean.
You may need to stash your changes so that you can quicky switch to other branch without losing your changes.

These are few of the many scenarios that happen in team. So one need to have at least basic understanding of commands like :-

Rebase
Stash
Merge
Status
Log
Diff
Revert

These are the ones I can list but there are many more commands that a developer should know the functionality of even if they don't remember the syntax or arguments for them. Its even better if you understand how GIT branching works and how commands like merge and rebase affect it.

Nodejs GraphQl Authentication with JWT, Apollo-server, MySql and Sequelize ORM.

Arnav Chauhan — Sun, 24 Jul 2022 16:33:08 +0000

For past few years we have witnessed the growth of Microservice architecture at a whole different level.It focuses on developing software systems that tries to focus on building single-function modules with well-defined interfaces and operations. Along with it we have also seen a massive growth of Agile, Devops and APIs. Until few years back REST APIs were the industry standard and hot topic but in 2015 Facebook introduced GraphQL and in 2018 they released the first stable version of it.

Github Repo - GraphQL Authentication

In this article, we’ll focus on local authentication with JWT token.For database you can use any MySql database.Apollo-server is an open-source GraphQL server that is compatible with any kind of GraphQL client.I will use apollo to expose the API insted of express.

We will be making a simple authentication in which a user will have a first name, last name, email, password, company and unique employeeId. Company will be stored on another table so that we can explore fetching associations with GraphQL. Lets install the necessary packages first:

npm i apollo-server bcrpytjs dotenv jsonwebtoken sequelize mysql2 graphql

npm i -D sequelize-cli nodemon

const getUser = token => {
    try {
        if (token) {
            return jwt.verify(token, JWT_SECRET)
        }
        return null
    } catch (error) {
        return null
    }
}

This is the first line after the imports, this is how we have defined out JWT middle-ware which will verify if our JWT token is valid.

const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req }) => {
        const token = req.get('Authorization') || ''
        return { user: getUser(token.replace('Bearer', ''))}
    },
    introspection: true,
    playground


: true
})
server.listen({ port: PORT || 8080 }).then(({ url }) => {
    console.log(`🚀 Server ready at ${url}`);
  });

After this we define our Apollo server which we have to pass an object which contains:

typeDefs: which is the schema for the graphQL API, it defined the query and mutations we can call on the API.
resolvers: these are functions which are responsible for returning a result for respective API calls.
context: it is an object shared by all the resolvers of a specific execution.This is where we retrieve the JWT token from header and run the getUser function we defined earlier to check if its valid and store the result in user variable which can be accessed by any resolver.
introspection: it defines whether we can query the schema for information about what queries it supports and their structure.(usually false in production)
playground: is a graphical, interactive, in-browser GraphQL IDE we can use to run queries.

Lets checkout our typeDefs or Schema.

const typeDefs = gql`
    input Pagination {
        page: Int!
        items: Int!
    }
    input UserFilter {
        employeeId: Int
        firstName: String
        lastName: String
    }
    type User {
        employeeId: Int!
        firstName: String!
        lastName: String!
        password: String!
        email: String!
        company: String!
    }
    type AuthPayload {
        token: String!
        user: User!
    }
    type Query {
        getUserList(search:UserFilter, pagination:Pagination, sort:String): [User]
    }
    type Mutation {
        registerUser(firstName: String!, lastName: String!, employeeId: Int!, email: String!, password: String!, company: String!): AuthPayload!
        login (email: String!, password: String!): AuthPayload!
    }
`

The gql template literal tag can be used to concisely write a GraphQL query that is parsed into a standard GraphQL AST. type defines a object with its parameters. The ! mark means that the parameters are compulsory and cannot be undefined or null. There are two distinct types, query and mutation. In simple words the query is SELECT statement and mutation is INSERT Operation.

Apart from scalar types of String, Int, Float, Boolean, and ID which we can directly assign as a type to argument or parameter we can have our own defined complex types as input. For that we use the input tag. The UserFilter input is a custom input which is being passed to get user list query. The [User] means that an array of type Users will be returned.

All this was the main crust of GraphQL whats left now is the database models which will change according to your database choice and the resolver functions which are just like functions you define for REST API on a specific route.Lets look at the sequelize models.

//User.js
module.exports = (sequelize, DataTypes) => {
    const User = sequelize.define('User', {
        firstName: { type: DataTypes.STRING, allowNull: true },
        lastName: { type: DataTypes.STRING, allowNull: true },
        email: { type: DataTypes.STRING, allowNull: false, unique: true },
        password: {type: DataTypes.STRING,allowNull: false},
        employeeId:{ type: DataTypes.INTEGER, allowNull: false, primaryKey: true, unique: true },
    }, {timestamps: false,
        hooks: {
            beforeCreate: async (user) => {
             if (user.password) {
              const salt = await bcrypt.genSaltSync(10, 'a');
              user.password = bcrypt.hashSync(user.password, salt);
             }
            },
            beforeUpdate:async (user) => {
             if (user.password) {
              const salt = await bcrypt.genSaltSync(10, 'a');
              user.password = bcrypt.hashSync(user.password, salt);
             }
            }
           }
    });
    User.associate = function (models) {
        User.hasOne(models.Company, { foreignKey: "employeeId" });
      };
    User.validPassword = async (password, hash) => {
        return await bcrypt.compareSync(password, hash);
       }
    return User;
  };
//Company.js
module.exports = (sequelize, DataTypes) => {
    const Company = sequelize.define('Company', {
        company: {type: DataTypes.STRING,allowNull: false},
        employeeId:{ type: DataTypes.INTEGER, allowNull: false, primaryKey: true, unique: true },
    }, {
      timestamps: false,
      freezeTableName: true,
    });
    Company.associate = function (models) {
        Company.belongsTo(models.User, { foreignKey: "employeeId" });
      };
    return Company;
  };

beforeCreate is a hook is called when create query is being called. The hook contains logic to hash the password with a salt so that we don’t store un-encrypted password in database. beforeUpdate this hook is called when update query is being called on user table. Just as before it hashesh the updated password. User.validPassword is a class Methods which users bcrypt to compare the hash stored in db against a string to check if both are same. User.associate is one-to-one association with company table with employeeId foreign key.Timestamp:false by default sequelize includes a createdAt and updateAt record in SQL table but this sets that to false. freezeTableName by defaults sequelize makes the table name plural which results in errors unless we have them set like that by default. Since I am not doing that freezeTableName helps me keep the table names exactly what I have defined and not changed the User to Users or Company to Companies. Index.js is just the default seqelize files to connect to database. It also takes all the models defined in the models folder, and it applies them to the “db” object.

const resolvers = {
    Query: {
        async getUserList(root, args, { user }) {
            try {
                if(!user) throw new Error('You are not authenticated!')
                const {search,pagination,sort} =args;
                var query={
                    offset:0,
                    limit:5,
                    raw: true,
                    //this is done to flaten out the join command
                    attributes: ['firstName','lastName','email','employeeId','Company.company',],
                    include: [{ model: models.Company,attributes:[]}]
                    }
                    //by defaults query is paginated to limit 5 items
                if(pagination){
                    query.limit=pagination.items;
                    query.offset=pagination.items*(pagination.page-1)
                }
                if(search){
                    query.where={
                        [Op.or]: [
                            search.firstName?{ firstName: search.firstName }:null,
                            search.lastName?{ lastName: search.lastName}:null,
                            search.employeeId?{ employeeId: search.employeeId}:null
                        ] 
                    }
                }
                if(sort){
                    query.order= [
                        [sort, 'ASC'],
                    ];
                }
                return await models.User.findAll(query);
            } catch (error) {
                throw new Error(error.message)
            }
        }
    },

    Mutation: {
        async registerUser(root, { firstName, lastName, email, password, employeeId,company }) {
            try {
                const userCheck = await models.User.findOne({ 
                    where: { 
                        [Op.or]: [
                            { email: email },
                            { employeeId: employeeId }
                    ] 
                }})
                if (userCheck) {
                    throw new Error('Email or Employee id already exists')
                }
                const user = await models.User.create({
                    firstName,
                    lastName,
                    employeeId,
                    email,
                    password
                })
                const companyModel = await models.Company.create({
                    employeeId,
                    company
                })
                const token = jsonwebtoken.sign(
                    { employeeId: user.employeeId, email: user.email},
                    process.env.JWT_SECRET,
                    { expiresIn: '1y' }
                )
                let createdUser={
                    company:companyModel.company,
                    employeeId: user.employeeId,
                    firstName: user.firstName, 
                    lastName: user.lastName, 
                    email: user.email
                }

                return {
                    token, user:createdUser, message: "Registration succesfull"
                }
            } catch (error) {
                throw new Error(error.message)
            }
        },

        async login(_, { email, password }) {
            try {
                const user = await models.User.findOne({ where: { email }})

                if (!user) {
                    throw new Error('No user with that email')
                }
                const isValid = await models.User.validPassword(password, user.password)
                if (!isValid) {
                    throw new Error('Incorrect password')
                }

                // return jwt
                const token = jsonwebtoken.sign(
                    { employeeId: user.employeeId, email: user.email},
                    process.env.JWT_SECRET,
                    { expiresIn: '1d'}
                )

                return {
                   token, user
                }
            } catch (error) {
                throw new Error(error.message)
            }
        }

    },
}

Resolvers contain the functions that are called for respective query and mutation. They take in 4 arguments

root contains the result returned from the resolver on the parent field.
args arguments passed into the field in the query.
context object shared by all resolvers in a particular query.
info contains information about the execution state of the query.

The query object in getUserList is a dynamic object which changes values based on arguments passed to the query. All arguments are optional. All queries require an Authorization header with valid jwt token. This is being validated by the
if(!user) throw new Error(‘You are not authenticated!’)

This is user variables is being retrieved from context which we passes earlier in server.js. If we don’t want a route to be authenticated we just have to get rid of this line. Lets get the basic query explained. offset and limit are the pagination parameters. raw is used to return a JSON object instead of a sequelize object so that it is easier to parase. Attributes lets us define what columns we want to be returned from SQL. Include is how we apply join between Company and User table so that we cant fetch the company name for a particular user. You will notice that we have set the attributes for include as empty. This means although they will be returned in query they will not be displayed. They would look something like this if returned {Company.company:"name",Company.employeeId:2} and this throws and error when we try to parase it using graphQL schema since there we have defined the User to have company key and not Company.company as the key. Thus to solve this we select ’Company.company’ as an attribute of user which gets mapped to the company.

{
“Authorization”:”eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbXBsb3llZUlkIjoyLCJlbWFpbCI6ImJAZ21haWwuY29tIiwiaWF0IjoxNjIyNTMwNTAyLCJleHAiOjE2MjI2MTY5MDJ9.3qQOHPzhKOjM6r5JNRWoMsvyt2IzwX8aa7Bj7s1zEZw”
}