Forem: Parag Chirde

SPA behaviour in Astro JS

Parag Chirde — Thu, 23 Feb 2023 06:56:07 +0000

Astro Js is a great framework for building completely static sites with out of the box SEO pros. However its MPA (Multi page application) approach might seem odd for few scenarios. To give your Astro application a SPA behaviour is possible and is super easy.

Introducing Turbo by Hotwired.
Here's a great blog to summarise the whole approach.
https://www.maxiferreira.com/blog/astro-turbo-persistent-islands/

Want to give your Astro app a SPA behaviour? Here's a quick boilerplate repo.
https://github.com/paragchirde/Astro-SPA

Event bus in Nuxt3

Parag Chirde — Fri, 15 Jul 2022 14:52:31 +0000

Event bus is typically a mechanism that makes it possible to have communication between different components. These components can be present at any level of component hierarchy in your project.

To know more about Event bus and its implementation in Nuxt2 visit link

VueJS Eventbus: Easy way to pass data between components

However, the official documentation you can see how the Event Bus implementation has changed from Vue 2 to Vue 3.

Introducing mitt, a new and simple way of implementing event bus on Vue3/Nuxt3

We’ll start by installing mitt.

npm i mitt

Next we’ll register a new plugin named mitt.client.js in the plugins directory.

import mitt from "mitt";
const emitter = mitt();
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('bus', {
      $on: emitter.on,
      $emit: emitter.emit,
    })
  })

Know more about registering plugins in Nuxt3 here

Let’s see how to emit and listen to events in different components. Consider two components A and B. In our case Component A will emit the event and Component B will listen to the event.

ComponentA.js

this.$bus.$emit("someEvent", 'Data to send')

ComponentB.js

mounted() {
this.$bus.$on("someEvent", (data) => {
    console.log(data);
    //Some stuff to do..
}

That’s pretty neat and clean. Thank you for reading!

Introduction to JAM stack

Parag Chirde — Sat, 02 May 2020 15:43:51 +0000

In the past few years, there has been a tremendous development in the way how we build web applications and then how we deploy them. Many stacks such as MERN (MongoDB, Express, React, Node), LAMP (Linux, Apache, MySQL, Python), MEAN (MongoDB, Express, Angular, Node), etc have proven to be extremely helpful to developers. These stacks have been very successful in their respective ways for developing modern web applications and allowed people to come up with different software design architectures and principles. Moreover, the browsers have been evolving at a rapid pace and are much faster, secure, and powerful than ever before. This lead to a new ear of developing applications that at client-centric i.e client-side applications and concepts such as client-side rendering, client-side routing, and much more. It suddenly became an immediate factor that the websites should load faster, users wanted everything to load instantly, faster rendering, faster video loading, image loading. Due to this Google also nowadays ranks the website based on the loading time. (Lighthouse is a great tool developed by Google itself that check how fast is your website and also gives the suggestions of how you can improve the loading time significantly).

JAM stack is a new emerging software development philosophy which calls a news term of “serverless”. Serverless doesn’t mean the complete absence of physical servers, but it is more of a logical term. Cloud computing is the backbone when it comes to serverless applications. The cloud provider actually runs the server for you and at the same time manages the dynamic allocation of resources, load balancing, monitoring for your application. This means you really don’t have to go through the sometimes cumbersome process of setting up the server, managing, scaling, and the whole deployment process of your application. It is the cloud that manages everything for you so that you can only focus on the core logic of your application without worrying about the DevOps process.
Cloudflare defines serverless as follows: Serverless computing is a method of providing backend services on an as-used basis. Servers are still used, but a company that gets backend services from a serverless vendor is charged based on usage, not a fixed amount of bandwidth or number of servers.
The term “Serverless” is confusing since with such applications there are both server hardware and server processes running somewhere, but the difference compared to normal approaches is that the organization building and supporting a ‘Serverless’ application is not looking after that hardware or those processes. They are outsourcing this responsibility to someone else.
The serverless applications leverage all the advantages of the FaaS i.e Function as a Service architecture. FaaS is an event-driven approach that runs and executes your server-side logic via the use of services. AWS Lambda and Microsoft Azure Functions are some popular FaaS providers. Serverless can also mean applications where server-side logic is still written by the application developer, but, unlike traditional architectures, it’s run in stateless compute containers that are event-triggered, ephemeral (may only last for one invocation), and fully managed by a third party.

JAM stack brings in together Javascript, API’s and Markup Languages to develop the applications. At first, it might seem like a little confusing when someone reads about the JAM stack. When I first read I was completely confused about how do I even build an actual application without even having any server and just mere Javascript? But as I started to dive deep into the architectural phenomena of JAM stack I was presented with the whole new methods of developing modern-day web applications. And it all actually made sense!
Let’s consider a scenario where we are developing a small project management software. In a more traditional way you would first think about the frontend (Vue, React, Svelte, Angular, etc), then comes the backend server-side language or framework such as Laravel and finally the database which might be a SQL or a NoSQL depending on need. Then comes the part of setting up the database connecting with the backend and setting up the server. This consumes time and sometimes is just too tiresome. After that, you decide to write your frontend and decide to work with API. All your business logic is now in your backend and you manipulate the data received from the API. Every time you make a request to the server about a page the server accepts the request, queries the database, and pulls the data, renders it into an HTML template, and finally pushed into the network as a response. So every time you make a new request the same process is repeated leading to network latency. Another major thing in such an approach is that of scaling the servers and of course the database as the data grows. You may then come up with the idea of cauterization which is good, but scaling the database is again something that needs your attention. Horizontal scaling or vertical scaling? Hmm, Can’t afford the vertical scaling, let’s do sharding you’ll say. More and more time into the scaling aspect is utilized. Then at some point, you notice the application is quite slow and then you start looking for the optimization techniques. You see where have you reached and what was your purpose?
No doubt you have learned a lot but you would surely not go through the same tedious process for every new application you make.
Now, this is where JAM stack comes into action. A completely modern way to develop fast, secure, and scalable web applications.
By nature, JAMstack sites are the following:
• Globally distributed and resilient to heavy traffic
• Centered around a developer-friendly, Git-based workflow
• Designed modularly, consuming other services via APIs
• Prebuilt and optimized before being served

JAM stack websites are often deployed using a Content Delivery Network (CDN), Cloudflare being one of the most popular. A CDN geographically distributes your website and the user can then reach your website to the nearest possible server resulting in reduced load time for every request made. Since a serverless JAM stack-based application doesn’t rely on a server-side code they can be distributed using a CDN without living on the server. This also unlocks the website loading speed that every developer thrives for.

Now we have covered a good amount of datils about JAM Stack. I would like to add some information about microservices as well. Microservices is another architectural pattern of building modern highly complex and dynamic applications wherein you have a ton of functionalities and features embedded in your application. Consider microservices as lego blocks to build a lego car. Each functionality is broken down and has its own environment in which it works in a more decoupled manner than a traditional monolith application. Microservices work hand in hand with serverless and adding JAM stack on top of it would lead to a perfect technology stack for your next application. Decoupling the front end from the backend allows for more modular development where we can take advantage of the huge ecosystem of third-party tools to provide website functionality.

Now let’s dive into how to decide some technologies for your next project using JAM stack. Consider the example of building a simple project management application. Our frontend will be completely decoupled with the backend.

I have used VueJS for the frontend purpose. FaunaDB is a new NoSQL database technology that is emerging. It is based on serverless architecture and completely API based. This is a true example of how you don’t have to set up a database and then take up the task of connecting it manually. Using faunaDB’s javascript driver you can directly connect to the database using the secret key generated in the Fauna’s dashboard. It has its own authentication system and first of its kind in terms of being a 100% ACID compliant and a transactional distributed database. With FaunaDB you don’t have to worry about the scalability at all, its all managed by Fauna and thus you can now more focus on the core business logic and purpose of your application.

Here is a link to the actual application which is completely serverless and makes use of FaunaDB’s multitenancy as well.
https://vue-fauna-project.herokuapp.com/

Feel free to go through the repo
https://github.com/parag1997/vue-fauna-test

I will be writing about how to develop a completely serverless application using JAM stack and faunaDB in my next article.

References & more reading:
https://www.netlify.com/jamstack/
https://jamstack.org/

Explain Blockchain like I'm 5

Parag Chirde — Mon, 30 Jul 2018 17:02:47 +0000

The concept of blockchain came with Stuart Haber and W. Scott Stornetta when in 1991 they published a paper about how to timestamp a digital document. It was until Satoshi Nakamoto published a paper on Bitcoin: A Peer-to-Peer Electronic Cash System which was completely based on the Blockchain concept.
Blockchain lets us for the first time have a shared version of truth that is open, distributed and tamper proof in its nature. Blockchain is an emergent technology concept that enables the decentralized and immutable storage of verified data.
Blockchain has a wide ranging set of applications and almost any field can benefit from having such a technology at its disposal. Blockchain is also heralded as a way by which trust can be ensured in the online world and lets us have greater confidence in the range of products and services that we use online.
While previously we would have the backend code residing in a server or a set of servers, Dapps let us run web enabled applications where the back end is instead hosted on a blockchain network which executes the code that is needed for it.
Distributed Ledger( a collection of accounting entries consisting of debits and credits) Computing power and breakthroughs in cryptography, along with the discovery and use of some new and interesting algorithms, have allowed the creation of distributed ledgers.
Blockchain is a new technology that uses cryptography with distributed computing. It was Satoshi Nakamoto the genius behind building up the blockchain where a network of computers collaborate to maintain a shared and a secured database. So we can call blockchain as a secure distributed database. Mining computers or nodes on the network validate the transaction, have them the block they are building and once the block is verified it is broadcasted to other nodes that all have the copy of.
Now since there is no centralized authority to verify the transaction the blockchain depends upon a distributed consensus algorithm. In order to make an entry on to the blockchain network(database) all the nodes have to agree on the state of the block so that no one computer in particular can make an alteration without the consensus of the others. Once the block is accepted it is finally added to the chain which may contain countless number of other blocks.
Blockchain was designed so that the transactions are immutable. The first generation blockchain was much more like a database, but the second generation of the blockchain provides the facility to execute any computer code on the blockchain.