DEV Community: Winglang

Building a Cloud-Native Spreadsheet Copilot with Winglang and LangChain

Avi Chawla — Fri, 14 Jun 2024 13:50:55 +0000

The interest in building “AI copilots” is higher than ever before:

Note: A copilot is an AI-powered application where users can ask questions in natural language and get responses specific to their context. The context could be the details in their dashboard, the code in the editor, etc.

Almost every technology company wants to integrate AI into their products.

As a result, it’s become essential to understand the workflow of how these applications are built and what common technologies power them.

Thus, in this article, we’ll build an AI-powered Spreadsheet copilot with user-interactive capabilities.

Here’s the tool stack we shall use:

We will build the UI of our spreadsheet chatbot application using Next.js, a React framework.

We will use WingLang for cloud capabilities.

We will use LangChain to interact with LLM providers.

Let’s begin!

Application Workflow with LangChain + Winglang

The above diagram provides a high-level overview of the application workflow:

The user will enter a prompt in the chatbot interface, something like:

Add a row for Sara, whose age is 29, who works in sales.
Add a row for Arya, whose age is 25, who works in marketing.

The prompt will be sent as an input to the LLM models through LangChain to an LLM provider, say, OpenAI’s GPT-3.5 or GPT-4, where it will perform function calling.
The model will provide a JSON response, which will be displayed on the app’s frontend to the user.
Moreover, the response object from LLM will also be stored in a cloud bucket with Wing so that we are not tied to a single cloud provider and can migrate to any one of them whenever needed.

Done!

LangChain Integration Walkthrough

Now, let’s look at the implementation where we integrate LangChain runnables and chains as REST API functionalities.

To get started, import the remote runnable from long-chain/runnable/remote.

Next, we define the remoteChainToAction function shown below, which allows us to deploy our LLM chains built with LangChain as REST APIs on the server side and invoked as remote runnables on the client side.

Here’s a breakdown of the above code:

The function accepts a LangChain chain object as a parameter.
It creates a runnable with the chain URL and handler function, as shown in line 5.
At line 13, it infers and sets parameters if they are not provided.

Next, from lines 14–28 (shown below), it converts the chain object into a backend action object that will call the LangChain service with the provided input.

Almost done!

Finally, we use Winglang to store the output received from the LLM in a bucket, as demonstrated below:

For starters, Winglang is an open-source programming language that abstracts away the differences between cloud providers by defining a standard infrastructural API.

In other words, Winglang provides an API that’s common to all providers.

For instance, when defining a data storage bucket in Winglang, there’s nothing like “S3 Bucket” or “Blob storage” or “Google Cloud Storage” we specifically tailor the application code to.

Instead, there’s a common abstraction called “Bucket,” and we implement the application code specific to this “Bucket” class. This can then be compiled and deployed to any cloud provider.

The same abstraction is available for all cloud-specific entities like functions, queues, compute units, etc.

After developing the app in Winglang, the entire application code and the infrastructure we defined can be compiled to any cloud provider in a one-line command, and Winglang takes care of all backend procedures.

This way, one can just focus on the application logic and how their app interacts with the infrastructural resources rather than the specificities of a cloud platform.

And we are done with the high-level implementation details.

To recap, we converted a LangChain chain object into an action object that our backend can use to integrate a remote LangChain process, which in turn invoked a remote service to process input data and return the result. Finally, we stored the response from the LLM into a cloud Bucket defined in Winglang.

Spreadsheet Copilot Demo

In this section, let’s do a demo of the AI copilot.

Here’s our spreadsheet chatbot, built using the Next.js framework, where we can perform multiple operations by entering prompts in the chat, such as adding a row, deleting a row, multiplying values, or adding a month to a date, similar to Excel.

Let’s enter this prompt: “Add a row for Sara, whose age is 29, who works in sales.”

We get the desired result within a few seconds.

Next, let’s enter this prompt: “Delete the row with Sara’s information.”

As depicted above, the row with Sara’s information has been deleted.

That’s it!

This is how we can build our AI-powered applications on top of LLMs with the above underlying architecture.

Conclusion

With that, we come to the end of this article, where we learned how to build AI copilots powered by Winglang and LangChain.

To recap:

We built the UI of our spreadsheet chatbot application using Next.js, a React framework.
We used WingLang for cloud capabilities.
We used LangChain to interact with LLM providers.

…And all of this with just a few lines of code.

Stay tuned for more insights and developments in AI and cloud computing.

Thanks for reading!

Build a QA Bot for your documentation with LangChain 😻

Nathan Tarbert — Tue, 11 Jun 2024 13:22:48 +0000

TL;DR

In this tutorial, we will build an AI-powered Q&A bot for your website documentation.

🌐 Create a user-friendly Next.js app to accept questions and URLs
🔧 Set up a Wing backend to handle all the requests
💡 Incorporate @langchain for AI-driven answers by scraping and analyzing documentation using RAG
🔄 Complete connection between frontend input and AI-processed responses.

What is Wing?

Wing is an open-source framework for the cloud.

It allows you to create your application's infrastructure and code combined as a single unit and deploy them safely to your preferred cloud providers.

Wing gives you complete control over how your application's infrastructure is configured. In addition to its easy-to-learn programming language, Wing also supports Typescript.

In this tutorial, we'll use TypeScript. So, don't worry—your JavaScript and React knowledge is more than enough to understand this tutorial.

Check out Wing ⭐️

Building the frontend with Next.js

Here, you’ll create a simple form that accepts the documentation URL and the user’s question and then returns a response based on the website's data.

First, create a folder containing two sub-folders - frontend and backend. The frontend folder contains the Next.js app, and the backend folder is for Wing.

mkdir qa-bot && cd qa-bot
mkdir frontend backend

Within the frontend folder, create a Next.js project by running the following code snippet:

cd frontend
npx create-next-app ./

Copy the code snippet below into the app/page.tsx file to create the form that accepts the user’s question and the documentation URL:

"use client";
import { useState } from "react";

export default function Home() {
    const [documentationURL, setDocumentationURL] = useState<string>("");
    const [question, setQuestion] = useState<string>("");
    const [disable, setDisable] = useState<boolean>(false);
    const [response, setResponse] = useState<string | null>(null);

    const handleUserQuery = async (e: React.FormEvent) => {
        e.preventDefault();
        setDisable(true);
        console.log({ question, documentationURL });
    };

    return (
        <main className='w-full md:px-8 px-3 py-8'>
            <h2 className='font-bold text-2xl mb-8 text-center text-blue-600'>
                Documentation Bot with Wing & LangChain
            </h2>

            <form onSubmit={handleUserQuery} className='mb-8'>
                <label className='block mb-2 text-sm text-gray-500'>Webpage URL</label>
                <input
                    type='url'
                    className='w-full mb-4 p-4 rounded-md border text-sm border-gray-300'
                    placeholder='https://www.winglang.io/docs/concepts/why-wing'
                    required
                    value={documentationURL}
                    onChange={(e) => setDocumentationURL(e.target.value)}
                />

                <label className='block mb-2 text-sm text-gray-500'>
                    Ask any questions related to the page URL above
                </label>
                <textarea
                    rows={5}
                    className='w-full mb-4 p-4 text-sm rounded-md border border-gray-300'
                    placeholder='What is Winglang? OR Why should I use Winglang? OR How does Winglang work?'
                    required
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                />

                <button
                    type='submit'
                    disabled={disable}
                    className='bg-blue-500 text-white px-8 py-3 rounded'
                >
                    {disable ? "Loading..." : "Ask Question"}
                </button>
            </form>

            {response && (
                <div className='bg-gray-100 w-full p-8 rounded-sm shadow-md'>
                    <p className='text-gray-600'>{response}</p>
                </div>
            )}
        </main>
    );
}

The code snippet above displays a form that accepts the user’s question and the documentation URL and logs them to the console for now.

Perfect! 🎉You’ve completed the application's user interface. Next, let’s set up the Wing backend.

How to set up Wing on your computer

Wing provides a CLI that enables you to perform various Wing actions within your projects.

It also provides VSCode and IntelliJ extensions that enhance the developer experience with features like syntax highlighting, compiler diagnostics, code completion and snippets, and many others.

Before we proceed, stop your Next.js development server and install the Wing CLI by running the code snippet below in your terminal.

npm install -g winglang@latest

Run the following code snippet to ensure that the Winglang CLI is installed and working as expected:

wing -V

Next, navigate to the backend folder and create an empty Wing Typescript project. Ensure you select the empty template and Typescript as the language.

wing new

Copy the code snippet below into the backend/main.ts file.

import { cloud, inflight, lift, main } from "@wingcloud/framework";

main((root, test) => {
    const fn = new cloud.Function(
        root,
        "Function",
        inflight(async () => {
            return "hello, world";
        })
    );
});

The main() function serves as the entry point to Wing.

It creates a cloud function and executes at compile time. The inflight function, on the other hand, runs at runtime and returns a Hello, world! text.

Start the Wing development server by running the code snippet below. It automatically opens the Wing Console in your browser at http://localhost:3000.

wing it

You've successfully installed Wing on your computer.

How to connect Wing to a Next.js app

From the previous sections, you've created the Next.js frontend app within the frontend folder and the Wing backend within the backend folder.

In this section, you'll learn how to communicate and send data between the Next.js app and the Wing backend.

First, install the Wing React library within the backend folder by running the code below:

npm install @winglibs/react

Next, update the main.ts file as shown below:

import { main, cloud, inflight, lift } from "@wingcloud/framework";
import React from "@winglibs/react";

main((root, test) => {
    const api = new cloud.Api(root, "api", { cors: true })
    ;

    //👇🏻 create an API route
    api.get(
        "/test",
        inflight(async () => {
            return {
                status: 200,
                body: "Hello world",
            };
        })
    );

    //👉🏻 placeholder for the POST request endpoint

    //👇🏻 connects to the Next.js project
    const react = new React.App(root, "react", { projectPath: "../frontend" });
    //👇🏻 an environment variable
    react.addEnvironment("api_url", api.url);
});

The code snippet above creates an API endpoint (/test) that accepts GET requests and returns a Hello world text. The main function also connects to the Next.js project and adds the api_url as an environment variable.

The API URL contained in the environment variable enables us to send requests to the Wing API route. How do we retrieve the API URL within the Next.js app and make these requests?

Update the RootLayout component within the Next.js app/layout.tsx file as done below:

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang='en'>
            <head>
                {/** ---👇🏻  Adds this script tag 👇🏻 ---*/}
                <script src='./wing.js' defer />
            </head>
            <body className={inter.className}>{children}</body>
        </html>
    );
}

Re-build the Next.js project by running npm run build.

Finally, start the Wing development server. It automatically starts the Next.js server, which can be accessed at http://localhost:3001 in your browser.

You've successfully connected the Next.js to Wing. You can also access data within the environment variables using window.wingEnv.<attribute_name>.

Processing user's requests with LangChain and Wing

In this section, you'll learn how to send requests to Wing, process these requests with LangChain and OpenAI, and display the results on the Next.js frontend.

First, let's update the Next.js app/page.tsx file to retrieve the API URL and send user's data to a Wing API endpoint.

To do this, extend the JavaScript window object by adding the following code snippet at the top of the page.tsx file.

"use client";
import { useState } from "react";
interface WingEnv {
    api_url: string;
}
declare global {
    interface Window {
        wingEnv: WingEnv;
    }
}

Next, update the handleUserQuery function to send a POST request containing the user's question and website's URL to a Wing API endpoint.

//👇🏻 sends data to the api url
const [response, setResponse] = useState<string | null>(null);

    const handleUserQuery = async (e: React.FormEvent) => {
        e.preventDefault();
        setDisable(true);
        try {
            const request = await fetch(`${window.wingEnv.api_url}/api`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ question, pageURL: documentationURL }),
            });
            const response = await request.text();
            setResponse(response);
            setDisable(false);
        } catch (err) {
            console.error(err);
            setDisable(false);
        }
    };

Before you create the Wing endpoint that accepts the POST request, install the following packages within the backend folder:

npm install @langchain/community @langchain/openai langchain cheerio

Cheerio enables us to scrape the software documentation webpage, while the LangChain packages allow us to access its various functionalities.

The LangChain OpenAI integration package uses the OpenAI language model; therefore, you'll need a valid API key. You can get yours from the OpenAI Developer's Platform.

Next, let’s create the /api endpoint that handle incoming requests.

The endpoint will:

accept the questions and documentation URLs from the Next.js application,
load the documentation page using LangChain document loaders,
split the retrieved documents into chunks,
transform the chunked documents and save them within a LangChain vector store,
and create a retriever function that retrieves the documents from the vector store.

First, import the following into the main.ts file:

import { main, cloud, inflight, lift } from "@wingcloud/framework";
import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { createStuffDocumentsChain } from "langchain/chains/combine_documents";
import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import { createRetrievalChain } from "langchain/chains/retrieval";
import React from "@winglibs/react";

Add the code snippet below within the main() function to create the /api endpoint:

    api.post(
        "/api",
        inflight(async (ctx, request) => {
            //👇🏻 accept user inputs from Next.js
            const { question, pageURL } = JSON.parse(request.body!);

            //👇🏻 initialize OpenAI Chat for LLM interactions
            const chatModel = new ChatOpenAI({
                apiKey: "<YOUR_OPENAI_API_KEY>",
                model: "gpt-3.5-turbo-1106",
            });
            //👇🏻 initialize OpenAI Embeddings for Vector Store data transformation
            const embeddings = new OpenAIEmbeddings({
                apiKey: "<YOUR_OPENAI_API_KEY>",
            });

            //👇🏻 creates a text splitter function that splits the OpenAI result chunk size
            const splitter = new RecursiveCharacterTextSplitter({
                chunkSize: 200, //👉🏻 characters per chunk
                chunkOverlap: 20,
            });

            //👇🏻 creates a document loader, loads, and scraps the page
            const loader = new CheerioWebBaseLoader(pageURL);
            const docs = await loader.load();

            //👇🏻 splits the document into chunks 
            const splitDocs = await splitter.splitDocuments(docs);

            //👇🏻 creates a Vector store containing the split documents
            const vectorStore = await MemoryVectorStore.fromDocuments(
                splitDocs,
                embeddings //👉🏻 transforms the data to the Vector Store format
            );

            //👇🏻 creates a document retriever that retrieves results that answers the user's questions
            const retriever = vectorStore.asRetriever({
                k: 1, //👉🏻  number of documents to retrieve (default is 2)
            });

            //👇🏻 creates a prompt template for the request
            const prompt = ChatPromptTemplate.fromTemplate(`
                Answer this question.
                Context: {context}
                Question: {input}
                `);

            //👇🏻 creates a chain containing the OpenAI chatModel and prompt
            const chain = await createStuffDocumentsChain({
                llm: chatModel,
                prompt: prompt,
            });

            //👇🏻 creates a retrieval chain that combines the documents and the retriever function
            const retrievalChain = await createRetrievalChain({
                combineDocsChain: chain,
                retriever,
            });

            //👇🏻 invokes the retrieval Chain and returns the user's answer
            const response = await retrievalChain.invoke({
                input: `${question}`,
            });

            if (response) {
                return {
                    status: 200,
                    body: response.answer,
                };
            }

            return undefined;
        })
    );

The API endpoint accepts the user’s question and the page URL from the Next.js application, initialises ChatOpenAI and OpenAIEmbeddings, loads the documentation page, and retrieves the answers to the user’s query in the form of documents.

Then, splits the documents into chunks, saves the chunks in the MemoryVectorStore, and enables us to fetch answers to the question using LangChain retrievers.

From the code snippet above, the OpenAI API key is entered directly into the code; this could lead to security breaches, making the API key accessible to attackers. To prevent this data leak, Wing allows you to save private keys and credentials in variables called secrets.

When you create a secret, Wing saves this data in a .env file, ensuring it is secured and accessible.

Update the main() function to fetch the OpenAI API key from the Wing Secret.

main((root, test) => {
    const api = new cloud.Api(root, "api", { cors: true });
    //👇🏻 creates the secret variable
    const secret = new cloud.Secret(root, "OpenAPISecret", {
        name: "open-ai-key",
    });

    api.post(
        "/api",
        lift({ secret })
            .grant({ secret: ["value"] })
            .inflight(async (ctx, request) => {
                const apiKey = await ctx.secret.value();

                const chatModel = new ChatOpenAI({
                    apiKey,
                    model: "gpt-3.5-turbo-1106",
                });

                const embeddings = new OpenAIEmbeddings({
                    apiKey,
                });

                //👉🏻 other code snippets & configurations
    );

    const react = new React.App(root, "react", { projectPath: "../frontend" });
    react.addEnvironment("api_url", api.url);
});

From the code snippet above,
- The secret variable declares a name for the secret (OpenAI API key).
- The lift().grant() grants the API endpoint access to the secret value stored in the Wing Secret.
- The inflight() function accepts the context and request object as parameters, makes a request to LangChain, and returns the result.
- Then, you can access the apiKey using the ctx.secret.value() function.

Finally, save the OpenAI API key as a secret by running this command in your terminal.

Congratulations! You've successfully completed the project for this tutorial.

Here is a brief demo of the application:

Let's dig a little bit deeper into the Wing docs to see what data our AI bot can extract.

Wrapping It Up

So far, we have gone over the following:

What is Wing?
How to use Wing and query data using Langchain,
How to connect Wing to a Next.js application,
How to send data between a Next.js frontend and a Wing backend.

Wing aims to bring back your creative flow and close the gap between imagination and creation. Another great advantage of Wing is that it is open-source. Therefore, if you are looking forward to building distributed systems that leverage cloud services or contribute to the future of cloud development, Wing is your best choice.

Feel free to contribute to the GitHub repository, and share your thoughts with the team and the large community of developrs.

The source code for this tutorial is available here.

Thank you for reading! 🎉

Building your own ChatGPT Graphical Client with NextJS and Wing 🤯

Nathan Tarbert — Thu, 16 May 2024 14:56:39 +0000

TL;DR

By the end of this article, you will build and deploy a ChatGPT Client using Wing and Next.js.

This application can run locally (in a local cloud simulator) or deploy it to your own cloud provider.

Introduction

Building a ChatGPT client and deploying it to your own cloud infrastructure is a good way to ensure control over your data.

Deploying LLMs to your own cloud infrastructure provides you with both privacy and security for your project.

Sometimes, you may have concerns about your data being stored or processed on remote servers when using proprietary LLM platforms like OpenAI’s ChatGPT, either due to the sensitivity of the data being fed into the platform or for other privacy reasons.

In this case, self-hosting an LLM to your cloud infrastructure or running it locally on your machine gives you greater control over the privacy and security of your data.

Wing is a cloud-oriented programming language that lets you build and deploy cloud-based applications without worrying about the underlying infrastructure.
It simplifies the way you build on the cloud by allowing you to define and manage your cloud infrastructure and your application code within the same language.
Wing is cloud agnostic - applications built with it can be compiled and deployed to various cloud platforms.

Check out ⭐ Wing

Let's get started!

To follow along, you need to:

Have some understanding of Next.js
Install Wing on your machine. Not to worry if you don’t know how to. We’ll go over it together in this project.
Get your OpenAI API key.

Create Your Projects

To get started, you need to install Wing on your machine. Run the following command:

npm install -g winglang

Confirm the installation by checking the version:

wing -V

Create your Next.js and Wing apps.

mkdir assistant
cd assistant
npx create-next-app@latest frontend
mkdir backend && cd backend
wing new empty

We have successfully created our Wing and Next.js projects inside the assistant directory. The name of our ChatGPT Client is Assistant. Sounds cool, right?

The frontend and backend directories contain our Next and Wing apps, respectively. wing new empty creates three files: package.json, package-lock.json, and main.w. The latter is the app’s entry point.

Run your application locally in the Wing simulator

The Wing simulator allows you to run your code, write unit tests, and debug your code inside your local machine without needing to deploy to an actual cloud provider, helping you iterate faster.

Use the following command to run your Wing app locally:

wing it

Your Wing app will run on localhost:3000.

Setting Up Your Backend

Let’s install Wing’s OpenAI and React Libraries. The OpenAI library provides a standard interface to interact with the LLM. The React library allows you to connect your Wing backend to your Next app.

npm i @winglibs/openai @winglibs/react

Import these packages in your main.w file. Let's also import all the other libraries we’ll need.

bring openai
bring react
bring cloud
bring ex
bring http

bring is the import statement in Wing. Think of it this way, Wing uses bring to achieve the same functionality as import in JavaScript.

cloud is Wing’s Cloud library. It exposes a standard interface for Cloud API, Bucket, Counter, Domain, Endpoint, Function and many more cloud resources. ex is a standard library for interfacing with Tables and cloud Redis database, and http is for calling different HTTP methods - sending and retrieving information from remote resources.

Get Your OpenAI API Key

We will use gpt-4-turbo for our app but you can use any OpenAI model.

Create an OpenAI account if you don’t have one yet. To create a new API key, Go to platform.openai.com/api-keys and select Create new secret key.

Set the Name, Project, and Permissions, then click Create secret key.

Initializing OpenAI

Create a Class to initialize your OpenAI API. We want this to be reusable.

We will add a personality to our Assistant class so that we can dictate the personality of our AI assistant when passing a prompt to it.

let apiKeySecret = new cloud.Secret(name: "OAIAPIKey") as "OpenAI Secret";

class Assistant {
    personality: str;
    openai: openai.OpenAI;

    new(personality: str) {
        this.openai = new openai.OpenAI(apiKeySecret: apiKeySecret);
        this.personality = personality;
    }

    pub inflight ask(question: str): str {
        let prompt = `you are an assistant with the following personality: ${this.personality}. ${question}`;
        let response = this.openai.createCompletion(prompt, model: "gpt-4-turbo");
        return response.trim();
    }
}

Wing unifies infrastructure definition and application logic using the preflight and inflight concepts respectively.

Preflight code (typically infrastructure definitions) runs once at compile time, while inflight code will run at runtime to implement your app’s behavior.

Cloud storage buckets, queues, and API endpoints are some examples of preflight. You don’t need to add the preflight keyword when defining a preflight, Wing knows this by default. But for an inflight block, you need to add the word “inflight” to it.

We have an inflight block in the code above. Inflight blocks are where you write asynchronous runtime code that can directly interact with resources through their inflight APIs.

Testing and Storing The Cloud Secret

Let's walk through how we will secure our API keys because we definitely want to take security into account.

Let's create a .env file in our backend’s root and pass in our API Key:

OAIAPIKey = Your_OpenAI_API_key

We can test our OpenAI API keys locally referencing our .env file, and then, since we are planning to deploy to AWS, we will walk through setting up the AWS Secrets Manager.

First, let's head over to AWS and sign into the Console. If you don't have an account, you can create one for free.

Navigate to the Secrets Manager, and let's store our API key values.

We have stored our API key in a cloud secret named OAIAPIKey. Copy your key, and we will jump over to the terminal and connect to our secret, which is now stored in the AWS Platform.

wing secrets

Now paste in your API Key as the value in the terminal. Your keys are now properly stored, and we can start interacting with our app.

Storing The AI’s Responses in the Cloud.

Storing your AI's responses in the cloud gives you control over your data. It resides on your own infrastructure, unlike proprietary platforms like ChatGPT, where your data lives on third-party servers that you don’t have control over. You can also retrieve these responses whenever you need them.

Let’s create another class that uses the Assistant class to pass in our AI’s personality and prompt. We would also store each model’s responses as txt files in a cloud bucket.

let counter = new cloud.Counter();

class RespondToQuestions {
    id: cloud.Counter;
    gpt: Assistant;
    store: cloud.Bucket;

    new(store: cloud.Bucket) {
        this.gpt = new Assistant("Respondent");
        this.id = new cloud.Counter() as "NextID";
        this.store = store;
    }

    pub inflight sendPrompt(question: str): str {
        let reply = this.gpt.ask("{question}");
        let n = this.id.inc();
        this.store.put("message-{n}.original.txt", reply);
        return reply;
    }
}

We gave our Assistant the personality “Respondent.” We want it to respond to questions. You could also let the user on the frontend dictate this personality when sending in their prompts.

Every time it generates a response, the counter increments, and the value of the counter is passed into the n variable used to store the model’s responses in the cloud. However, what we really want is to create a database to store both the user prompts coming from the frontend and our model’s responses.

Let's define our database.

Defining Our Database

Wing has ex.Table built-in - a NoSQL database to store and query data.

let db = new ex.Table({
    name: "assistant",
    primaryKey: "id",
    columns: {
        question: ex.ColumnType.STRING,
        answer: ex.ColumnType.STRING
    }
});

We added two columns in our database definition - the first to store user prompts and the second to store the model’s responses.

Creating API Routes and Logic

We want to be able to send and receive data in our backend. Let’s create POST and GET routes.

let api = new cloud.Api({ cors: true });

api.post("/assistant", inflight((request) => {
    // POST request logic goes here
}));

api.get("/assistant", inflight(() => {
    // GET request logic goes here
}));

let myAssistant = new RespondToQuestions(store) as "Helpful Assistant";

api.post("/assistant", inflight((request) => {
    let prompt = request.body;
    let response = myAssistant.sendPrompt(JSON.stringify(prompt)); 
    let id = counter.inc(); 

    // Insert prompt and response in the database
    db.insert(id, { question: prompt, answer: response });

    return cloud.ApiResponse({
        status: 200
    });
}));

In the POST route, we want to pass the user prompt received from the frontend into the model and get a response. Both prompt and response will be stored in the database. cloud.ApiResponse allows you to send a response for a user’s request.

Add the logic to retrieve the database items when the frontend makes a GET request.

api.get("/assistant", inflight(() => {
    let questionsAndAnswers = db.list();

    return cloud.ApiResponse({
        body: JSON.stringify(questionsAndAnswers),
        status: 200
    });
}));

Our backend is ready. Let's test it out in the local cloud simulator.

Run wing it.

Lets go over to localhost:3000 and ask our Assistant a question.

Both our question and the Assistant’s response has been saved to the database. Take a look.

Exposing Your API URL to The Frontend

We need to expose the API URL of our backend to our Next frontend. This is where the react library installed earlier comes in handy.

let website = new react.App({
    projectPath: "../frontend",
    localPort: 4000
});

website.addEnvironment("API_URL", api.url);

Add the following to the layout.js of your Next app.

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
            <script src="./wing.js" defer></script>
           </head>
            <body className={inter.className}>{children}</body>
        </html>
    );
}

We now have access to API_URL in our Next application.

Implementing the Frontend Logic

Let’s implement the frontend logic to call our backend.

import { useEffect, useState, useCallback } from 'react';
import axios from 'axios';

function App() {

    const [isThinking, setIsThinking] = useState(false);
    const [input, setInput] = useState("");
    const [allInteractions, setAllInteractions] = useState([]);

    const retrieveAllInteractions = useCallback(async (api_url) => {
            await axios ({
              method: "GET",
              url: `${api_url}/assistant`,
            }).then(res => {
              setAllInteractions(res.data)
            })
  }, [])

    const handleSubmit = useCallback(async (e)=> {
        e.preventDefault()

        setIsThinking(!isThinking)


        if(input.trim() === ""){
          alert("Chat cannot be empty")
          setIsThinking(true)

        }

          await axios({
            method: "POST",
            url: `${window.wingEnv.API_URL}/assistant`,
            headers: {
              "Content-Type": "application/json"
            },
            data: input
          })
          setInput("");
          setIsThinking(false);
          await retrieveAllInteractions(window.wingEnv.API_URL);     

  })

    useEffect(() => {
        if (typeof window !== "undefined") {
            retrieveAllInteractions(window.wingEnv.API_URL);
        }
    }, []);

    // Here you would return your component's JSX
    return (
        // JSX content goes here
    );
}

export default App;

The retrieveAllInteractions function fetches all the questions and answers in the backend’s database. The handSubmit function sends the user’s prompt to the backend.

Let’s add the JSX implementation.

import { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
    // ...

    return (
        <div className="container">
            <div className="header">
                <h1>My Assistant</h1>
                <p>Ask anything...</p>
            </div>

            <div className="chat-area">
                <div className="chat-area-content">
                    {allInteractions.map((chat) => (
                        <div key={chat.id} className="user-bot-chat">
                            <p className='user-question'>{chat.question}</p>
                            <p className='response'>{chat.answer}</p>
                        </div>
                    ))}
                    <p className={isThinking ? "thinking" : "notThinking"}>Generating response...</p>
                </div>

                <div className="type-area">
                    <input 
                        type="text" 
                        placeholder="Ask me any question" 
                        value={input} 
                        onChange={(e) => setInput(e.target.value)} 
                    />
                    <button onClick={handleSubmit}>Send</button>
                </div>
            </div>
        </div>
    );
}

export default App;

Running Your Project Locally

Navigate to your backend directory and run your Wing app locally using the following command

cd ~assistant/backend
wing it

Also run your Next.js frontend:

cd ~assistant/frontend
npm run dev

Let’s take a look at our application.

Let’s ask our AI Assistant a couple developer questions from our Next App.

Deploying Your Application to AWS

We’ve seen how our app can work locally. Wing also allows you to deploy to any cloud provider including AWS. To deploy to AWS, you need Terraform and AWS CLI configured with your credentials.

Compile to Terraform/AWS using tf-aws. The command instructs the compiler to use Terraform as the provisioning engine to bind all our resources to the default set of AWS resources.

cd ~/assistant/backend
wing compile --platform tf-aws main.w

Run Terraform Init and Apply

cd ./target/main.tfaws
terraform init
terraform apply

Note: terraform apply takes some time to complete.

You can find the complete code for this tutorial here.

Wrapping It Up

As I mentioned earlier, we should all be concerned with our apps security, building your own ChatGPT client and deploying it to your cloud infrastructure gives your app some very good safeguards.

We have demonstrated in this tutorial how Wing provides a straightforward approach to building scalable cloud applications without worrying about the underlying infrastructure.

If you are interested in building more cool stuff, Wing has an active community of developers, partnering in building a vision for the cloud. We'd love to see you there.

Just head over to our Discord and say hi!

🌝 15 JavaScript frameworks for your next project ⚔

Anmol Baranwal — Mon, 06 May 2024 13:03:49 +0000

The developer ecosystem has grown much and there are so many frameworks that a lot of developers don't know.

We "as developers" get a lot of framework options on how to build our app. Those choices are very important.

Let's cover 15 frameworks for you to make your next project. I will provide detailed resources so that you can learn each of these.

Trust me! This list is all you need.

Let's get started.

Library vs Framework

Before we start, let's understand how a framework is different from a library. Developers use it interchangeably!

Both libraries and frameworks are reusable code written by someone else.

In simpler terms:

Think of a library like a trip to Ikea. You've got your space at home, but you need some furniture help. You don't want to start from scratch, so you head to Ikea where you can pick and choose what you need. You're the one making the decisions.

Now, a framework is more like constructing a model home. You've got a set of plans and a few choices for the layout and design. But ultimately, the blueprint and the builder are in control. They'll let you know where you can add your input, but they're running the show.

In technical terms.

With a library, you're directing the flow of the application. You decide when and where to use the library's functions. But with a framework, the framework controls the flow. It gives you some spots to insert your code, but it's the one calling the shots on when your code runs.

I used this article "The Difference Between a Framework and a Library" by Freecodecamp especially due to the simple explanation. Give it a complete read!

1. Wing - A programming language for the cloud.

The wing is a framework designed to develop cloud applications.
It lets you build apps in the cloud and has a fairly easy syntax.

The core concept is that you can specify resources directly within your application.

You can run a local simulation and visualize what happens in each step using the Winglang console.

You Code. Test Locally. Compile. Deploy to Cloud Provider.

You would need Node v20 or higher for Wing.

Make a parent directory (we are using shared-counter) and set up the frontend with a new React app using Vite. You can use this npm command.

npm create -y vite frontend --template react-ts

// once installed, you can check if it's running properly.
cd frontend

npm install

npm run dev

You can install Wing using this npm command.

npm install -g winglang

You can verify the installation using wing -V.

Wing also provides official VSCode extension & IntelliJ which provides syntax highlighting, completions, go-to-definition, and embedded Wing Console support. You can install it before building an app!

You can build any full-stack app with Wing as a cloud backend.

Create a backend directory.

mkdir ~/shared-counter/backend
cd ~/shared-counter/backend

To create a new empty Wing project.

wing new empty
// This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program

wing it // to run it in the Wing simulator
// The Wing Simulator will be opened in your browser and will show a map of your app with a single function.
//You can invoke the function from the interaction panel and check out the result.

The structure would be as follows after using the command wing new empty.

bring cloud;

// define a queue, a bucket, and a counter
let bucket = new cloud.Bucket();
let counter = new cloud.Counter(initial: 1);
let queue = new cloud.Queue();

// When a message is received in the queue -> it should be consumed
// by the following closure
queue.setConsumer(inflight (message: str) => {
  // Increment the distributed counter, the index variable will 
  // store the value before the increment
  let index = counter.inc();
  // Once two messages are pushed to the queue, e.g. "Wing" and "Queue".
  // Two files will be created:
  // - wing-1.txt with "Hello Wing"
  // - wing-2.txt with "Hello Queue"
  bucket.put("wing-{index}.txt", "Hello, {message}");
  log("file wing-{index}.txt created");
});

You can install @winglibs/vite to start the dev server rather than using the npm run dev to start the local web server.

// in the backend directory
npm i @winglibs/vite

You can send data to your frontend using publicEnv available at backend/main.w.
Let's see a minor example.

// backend/main.w
bring vite;

new vite.Vite(
  root: "../frontend",
  publicEnv: {
    TITLE: "Wing + Vite + React"
  }
);

// import it in frontend
// frontend/src/App.tsx
import "../.winglibs/wing-env.d.ts"

//You can access that value like this.
<h1>{window.wing.env.TITLE}</h1>

You can do more:

read/update API routes & check it using Wing Simulator.
Fetching the values by using the backend.
Synchronize browsers using @winglibs/websockets which deploys a WebSocket server on the backend, and you can connect this WebSocket to receive real-time notifications.

Some of the features that can save a lot of your time are Hot Reloading to get instant feedback and the smooth generation of the necessary security policies.

There is no need to learn the syntax for each cloud provider.
Your code can be compiled to AWS, GCP, Azure, or any custom platform. Awesome :D

You can read the complete step-by-step guide on how to build a simple web application with React for our frontend and Wing for our backend. Testing is done using Wing Simulator and deployed to AWS using Terraform.

The AWS architecture after the deployment would be like this.

To give developers options and a better experience, Wing has rolled out full support for additional languages such as TypeScript (Wing). The only mandatory thing is you will have to install the Wing SDK.

This will also make the console fully accessible for local debugging and testing without learning the Wing language.

The wing currently supports these outputs:

AWS CDK platform
Terraform/AWS platform
Terraform/GCP platform
Terraform/Azure platform
Simulator platform
Custom platforms

Wing even has other guides so it's easier to follow along.

You can read the docs and see the examples.

You can also use Wing in the playground to check out the structure and examples.

If you're more of a tutorial person. Watch this!

Wing has 4.5k+ stars on GitHub, 1600+ Releases, and is still not on the v1 release which means a huge deal.

Star Wing ⭐️

2. Nest - efficient and scalable server-side applications.

A progressive Node.js framework for building efficient and scalable server-side applications with TypeScript/JavaScript.

It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript), and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest uses Express, but also provides compatibility with a wide range of other libraries, like Fastify, allowing for easy use of the myriad of available third-party plugins.

Nest provides a level of abstraction above these common Node.js frameworks (Express/Fastify) but also exposes their APIs directly to the developer. This gives a level of freedom to developers.

Before we learn more, watch Nestjs in 100 seconds!

You certainly don't have to reinvent the wheel considering the level of flexibility they provide.

This is how you can set up a new project with the Nest CLI.

npm i -g @nestjs/cli
nest new project-name

This will bootstrap the app.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

You can read the docs.

They also offer a set of paid courses (I wonder why). Feel free to check them out if you need a complete roadmap and want to become an expert at using Nest.

But I recommend learning using these free tutorials by Freecodecamp.

NestJs Course for Beginners - Create a REST API - It's around 3.42 hours and covers a lot of topics.
Comprehensive NestJS Course - It covers 20 modules and is 14 hours long.

If you're looking for something as a starter project, learn How to Send Emails With Nodemailer in NestJS. You can get solid fundamentals using this.

Nest.js has a large community of developers and is used by a lot of companies. Find the complete list of projects and companies that have used Nest.

By the way, my most common concern as a beginner was with similar names, Nextjs, Nuxtjs, and Nestjs. I'm covering all so you don't have to get confused. Haha!

Nest has 64k+ stars on GitHub, with 15k+ commits, and is on the v10 release.

Star Nest ⭐️

3. Gatsby - best React-based framework with performance, scalability, and security built-in.

Gatsby is a free and open source framework based on React that helps developers build blazing-fast websites and apps.

It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

Unlike Next.js, Gatsby does not perform server-side rendering. Instead, it generates HTML content on the client side during build time.

I've seen some of the great portfolios built using Gatsby.

Get started with the following npm command.

npm init gatsby

It’ll ask for a site title and the name of the project’s directory. Continue following the prompts to choose your preferred language (JavaScript or TypeScript), CMS, styling tools, and additional features.

This is how you can use this.

cd my-gatsby-site

// to start the local dev server
npm run develop

You can read the docs. I personally loved the flow of the documentation.

You can also follow tutorial to get started, How To Guides and Conceptual Guides that goes deep in Gatsby concepts along with website architecture.

Gatsby provides out-of-the-box PWA and a lot of themes. Using a Gatsby theme, all of your default configuration (shared functionality, data sourcing, design) is abstracted out of your site, and into an installable package. You can read more about the themes.

For instance, gatsby-theme-blog is the official Gatsby theme for creating a blog. There may be theme options that can be configured via gatsby-config.js.

npm install gatsby-theme-blog

Gatsby is not an ideal solution for content-heavy enterprise-scale websites like e-commerce stores or extensive media websites. The build time will drastically increase as the size of the content grows.

Find the list of 606 sites that are built using Gatsby. Out of those, 53 sites are open source so this can give inspiration and also a starting point.

They also provide a huge set of plugins divided into categories along with the clear docs in each of them. One of the examples is a plugin to add Google Analytics to your app.

npm install gatsby-plugin-google-analytics

You can also use Starter library of Gatsby. What more do you need to build your next app with Gatsby?

Use these reference guides to get detailed information about Gatsby's APIs.

If you prefer a full course, I recommend watching Gatsby Static Site Generator Tutorial - a 9 hours tutorial by Freecodecamp.

Gatsby has 55k stars on GitHub, is on the v5 release, and is used by 245k+ developers.

Star Gatsby ⭐️

4. Nextjs - The React framework for the web.

One of my favorite frameworks due to the level of optimization it provides.

Next.js enables you to create full-stack web applications by extending the latest React features and integrating powerful Rust-based JavaScript tooling for the fastest builds.

Next.js was created by the Dutch company Vercel (previously known as ZEIT) in 2017.

Next.js does offer static generators as well like Gatsby. Next.js is built with the principle of Build once, runs everywhere so you can make web applications with Next.js, mobile apps, desktop apps, and progressive web apps.

Nextjs offers a lot of features such as file routing, rendering techniques (such as ISR), and deep-level Image and font optimization. You can check the SEO stats of any nextjs website and it would be top-notch in most cases.

Get started with the following npm command.

npx create-next-app@latest

You can read the docs and follow this guide to get started.

There are a lot of concepts involved, and it would take months to read complete docs. I wrote an article some time back that you can check out. It didn't get famous but it's one of the best that I wrote with years of my experience in Nextjs. I've also mentioned the official course provided by the Nextjs team.

12 things you didn't know you could do with Nextjs

Anmol Baranwal ・ Feb 20 '24

#nextjs #programming #beginners #tutorial

If you want to learn through a YouTube tutorial, I recommend watching these recent tutorials as the docs are updated very often so it's better to watch something more recent rather than a few years back.

Nextjs 13 (App Router) with TypeScript - 1 hour tutorial.
Next.js 14 Full Course 2024 - 3 hours tutorial.

You can also watch Nextjs in 100 seconds. They have added a basic tutorial leading it to 11 minutes.

I've learned it by myself using docs and built more than 6 projects using it, even a 20k+ codebase SAAS app. That is why I say, it's one of the best frameworks you can choose.

Some of the popular websites that are built using Next.js are Auth0, Coinbase, Docker, GitHub, Hulu, Netflix, Sesame, Starbucks, Trulia, Twitch, and Uber. You can see all the websites that use Nextjs.

They have also provided a wide range of starter templates that you can directly use.

Next has 120k stars on GitHub, is on the v14.2 release, and has 6000k+ weekly downloads on NPM. Used by 2.6M developers as shown on their repository.

Star Nextjs ⭐️

5. Preact - Fast 3kB React alternative with the same modern API.

Preact is a lightweight, swift, high-performance library and alternative to React. Preact is merely 3kb in size (minified and gzipped) and yet gives you all the necessary functionality of React, making it one of the best JavaScript frameworks.

Jason Miller, a senior Developer Programs Engineer at Google, created Preact.

Preact is basically all the power of Virtual DOM components, without the overhead such as:

Familiar with React API & patterns that is ES6 Class, hooks, and Functional Components.
Extensive React compatibility via a simple preact/compat alias.
Everything you need like JSX, VDOM, DevTools, HMR, SSR.

You can easily switch to Preact from React in an existing project during production since they support the same API.

A sample structure of code is shown below. You can also see this sample codepen that you can view to understand the structure of the codebase in Preact.

Get started with the following npm command.

npm init preact

This is how you can run the dev server.

# Go into the generated project folder
cd my-preact-app

# Start a development server
npm run dev

You will have to configure some stuff, especially aliasing. Follow this guide.

You can read the docs and see the extensive list of demos & examples.

They also provide a web-based tutorial which you can follow to learn Preact.

Use Awesome Preact if you need example apps, boilerplates, components, toolkits, and more.

Preact has 36k stars on GitHub and is on the v10 release.

Star Preact ⭐️

6. tRPC - End-to-end typesafe APIs made easy.

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

The client above is not importing any code from the server, only its type declarations

If we're going deep, then you should definitely read a bit about the history.

A Brief History of API: RPC, REST, GraphQL, tRPC

JS for ZenStack ・ Jan 11 '23

#webdev #javascript #api #typescript

Currently, GraphQL is the dominant way to implement typesafe APIs in TypeScript (and it's amazing!). Since GraphQL is designed as a language-agnostic specification for implementing APIs, it doesn't take full advantage of the power of a language like TypeScript.

If your project is built with full-stack TypeScript, you can share types directly between your client and server, without relying on code generation.

tRPC is for full-stack TypeScript developers. It makes it easy to write endpoints that you can safely use in both the front and backend of your app. Type errors with your API contracts will be caught at build time, reducing the surface for bugs in your application at runtime.

This is designed for mono repo, as you need to export/import the type definitions from/to your server.

Get started with the following npm command.

npm install @trpc/server@next @trpc/client@next

You have to define a backend router with an instance. Read the the quickstart guide for more details.

It's important to understand the concepts involved in trpc such as about rpc and terminologies used.

You can read the docs.

If you already work in a team where languages are mixed or have third-party consumers over whom you have no control, you should create a language-agnostic GraphQL-API.

If you want to test things out, I recommend using this template that includes a minimal example.

You can also watch this 45 minutes YouTube tutorial to understand more about trpc.

They have 32k+ stars on GitHub, are on the v11 beta release, and are used by 51k developers.

Star tRPC ⭐️

7. Nuxtjs - Intuitive Vue Framework.

Nuxt is a progressive open-source framework based on the Vue.js ecosystem used to build performant web applications, especially server-side rendered apps.

But remember that Nuxt is not a substitute for Vue.js as it cannot function alone. And neither can it be considered a full-fledged backend framework like Express.

Watch Nuxtjs in 100 seconds to grasp the overall concept.

Nuxt is one of the best JavaScript frameworks to create these three kinds of web apps – Pre-rendered Static pages, Single-page web applications (SPA), Server-side rendered web applications(SSR), or even universal Apps.

Developers love Nuxt especially because of a rich collection of libraries and modules.

Get started with the following npm command.

npx nuxi@latest init <my-project>

You can read the docs and check codesandbox example.

You can follow this guide to learn about more of the key concepts.

There are a lot of integration options so it's easier for you to keep using your preferred tools and services.

You can see the list of free courses to learn about the Nuxt ecosystem.

If you want a recommended course, then learn from Nuxt 3 — Course for Beginners - a 3 hour tutorial by Freecodecamp.

Some of the popular websites that are built using Nuxt are Aircall, Amplitude, Backmarket, Bitpay, Bootstrap Vue, Fox News, Gitlab, Icons8, Instrument, MyScript, Nespresso, Note.com, Ozon.ru, Roland Garros, System76, Todoist, Upwork, Wappalyzer. Find the complete list of showcased websites under different categories.

If you want to test and build quickly, then I recommend checking out the starter templates.

Nuxt has 51k+ stars on GitHub and is used by 318k+ developers.

Star Nuxt ⭐️

8. Ember.js - A JavaScript framework for creating ambitious web applications.

Ember.js is a JavaScript framework for building scalable single-page web applications for businesses. Model-View-ViewModel (MVVW) architecture is the foundation for Ember, unlike other frameworks.

Ember.js was originally a SproutCore 2.0 framework that was renamed Ember.js by its creator Yehuda Katz, an accomplished developer credited as one of the chief creators of jQuery.

They also provide a Command-line interface tool. The Ember CLI is the official way to create, build, test, and serve the files that make up an Ember app or addon.

npm install -g ember-cli

Even though Ember.js is an older front-end JavaScript framework compared to React, Vue, and Svelte, it still packs a punch and has a big user base with major companies like – Microsoft, LinkedIn, Netflix, and Twitch. View the complete list.

With strong defaults, you may never need to configure anything in your app, but the options are there if you need them!

That means Ember.js follows the “CoC – Convention over Configuration” approach, which ensures that there is no need for any configuration in most cases so that you can jump straight away to coding and building your web application.

They also support 2-way data binding similar to AngularJS.

As we are going deep, it's important to understand how ember.js came to be, the pioneers behind its creation, and the life-altering decisions that go into making open source software. Watch this!

Once you have installed Ember CLI.

npm install -g ember-cli

You can create a new app as shown.

ember new ember-quickstart --lang en

cd ember-quickstart
npm start

You can read the detailed quickstart docs and the official guides.

For learning ember.js, you can follow this step-by-step tutorial created by their official team. You can read more about APIs on the Ember API Documentation.

There are thousands of JavaScript libraries that work great in Ember. When an npm package offers some Ember-specific features, they call it an addon. An addon provides a way to write reusable code, share components and styling, extend the build tooling, and more—all with minimal configuration. Find the complete list of addons.

If you're looking for more articles to learn Ember.js, I recommend these:

Ember JS Essentials: A beginner's guide to installation and its features by Startech.
A Guide to Building Your First Ember.js App by Toptal.

This will be enough to understand the structure and to decide when Ember is appropriate for your project.

They have 22k+ stars on GitHub and are on the v5.8 release with 500+ releases.

Star Ember.js ⭐️

9. Backbone.js - Give your JS App some Backbone with Models, Views, Collections, and Events.

Backbone.js is a JavaScript-based framework that connects to an API via a RESTful JSON interface.

Jeremy Ashkenas, renowned for creating some of the best JavaScript frameworks, such as CoffeeScript and Underscore.js, launched Backbone.js in October 2010.

It is intended to create single-page web applications and maintain synchronization between different web application components, such as numerous clients and servers.

Backbone.js is known for being small and light because it only requires jQuery and one JavaScript library, Underscore.js, to use the entire library.

Backbone.js supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

This is a simple backbone view.

var AppView = Backbone.View.extend({
  // el - stands for element. Every view has an element associated with HTML
  //      content will be rendered.
  el: '#container',
  // It's the first function called when this view is instantiated.
  initialize: function(){
    this.render();
  },
  // $el - it's a cached jQuery object (el), in which you can use jQuery functions
  //       to push content. Like the Hello World in this case.
  render: function(){
    this.$el.html("Hello World");
  }
});

You can read the docs.

Backbone.js is used by many trusted companies such as Walmart, Pinterest, SoundCloud, and many more.

You can refer to their wiki where they have documented Tutorials, blog posts, and example sites.

There are a couple of great articles that you can refer to learn more:

BackboneJS: Getting Started - Recommended.
Backbone.js for Absolute Beginners
BackboneJS Tutorial - Tutorials point.

They have 28k+ stars on GitHub and are used by 66k+ developers as per repo stats.

Star Backbone.js ⭐️

10. Svelte - Cybernetically enhanced web apps.

Svelte is a new way to build web applications.

It was created by Rich Harris (famous frontend developer). Svelte was first launched in 2016 and has witnessed an absolute explosion in popularity.

Many developers consider Svelte a truly game-changing and revolutionary idea that fundamentally changes how we code web applications.

Svelte, unlike other JavaScript frameworks such as React or Vue.js, has no virtual DOM. Instead, you build components boilerplate-free in simple HTML, CSS, and JavaScript code.

Svelte Compiler then compiles this code into small framework-free vanilla JavaScript modules during build time and surgically updates the DOM when the state changes.

So unlike other traditional frameworks like React or Vue.js, Svelte does not require high browser processing.

Svelte relies on reactive programming to surgically update the DOM. As a result, it can achieve the fastest rendering compared to almost any other framework and tops most of the performance benchmarks.

Get started with the following npm command.

npm create svelte@latest my-app

This is how you can use it.

cd my-app
npm install
npm run dev -- --open

You can read the docs. The team also provides a official VSCode extension that can integrate with various other editors and tools as well.

They also provide a detailed web-based tutorial to learn Svelte.

You can see all the examples to understand critical concepts and structure including DOM events, lifecycle, motion, transitions, and dealing with SVGs.

These are a couple of tutorials that you can watch to learn everything about Svelte.

Learn Svelte – Full Course for Beginners - 23 hours tutorial by Freecodecamp.
Sveltekit & Tailwind - 2 hours tutorial by Freecodecamp.

A big kudos to the instructors for providing such detailed tutorials for absolutely free!

Svelte has 76k+ stars on GitHub, is on the v4.2 release, and is used by 282k developers.

Star Svelte ⭐️

11. Remix - Build Better Websites.

Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers.

Built on top of React Router, Remix is four things:

A compiler
A server-side HTTP handler
A server framework
A browser framework

You can watch this to understand more about Remix by Fireship.

Through nested routes, Remix can eliminate nearly every loading state as shown.

Get started with the following npm command.

npx create-remix@latest

This is how you can use this.

mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
npm i -D @remix-run/dev vite

Read this quickstart guide if you want to include your server and more on how you need to provide a Vite config with the Remix Vite plugin since Remix uses Vite.

You can read the docs. They have distributed it depending on what you want to do, which I loved by the way.

Find the complete list of websites that are built using Remix.

You should also check out Remix Resources which is made by the community. Some of them are helpful and improve the whole ecosystem.

If you've come across Remix for the first time, I suggest going through Remix Tutorial -30min created by the official team.

They have 27k+ stars on GitHub and are on the v2.8 release.

Star Remix ⭐️

12. AdonisJS - TypeScript-first web framework for building web apps and API servers.

AdonisJS is a fully-featured backend framework for Node.js. The framework is created from the ground up with a strong emphasis on developer ergonomics and ease of use.

AdonisJS focuses on the backend and lets you choose the frontend stack of your choice meaning Frontend agnostic.

It is one of the rarest frameworks in the Node.js community that ships with a suite of first-party packages that helps you create and ship products without wasting hundreds of hours assembling different npm packages.

At the fundamental level, AdonisJS provides structure to your applications, configures a seamless TypeScript development environment, configures HMR for your backend code, and offers a vast collection of well-maintained and extensively documented packages.

They have emphasized a bit on testing which is very good.

Get started with the following npm command.

npm init adonisjs@latest hello-world

AdonisJS embraces the classic MVC design pattern. You start by defining the routes using the functional JavaScript API, bind controllers to them, and write logic to handle the HTTP requests within the controllers.

import router from '@adonisjs/core/services/router'
import PostsController from '#controllers/posts_controller'

router.get('posts', [PostsController, 'index'])

Controllers can use models to fetch data from the database and render a view (aka template) as a response.

import { HttpContext } from '@adonisjs/core/http'
import Post from '#models/post'

export default class PostsController {
  async index({ view }: HttpContext) {
    const posts = await Post.all()
    return view.render('pages/posts/list', { posts })
  }
}

If you are building an API server, you can replace the view layer with a JSON response. But, the flow of handling and responding to the HTTP requests remains the same.

You can read the docs.

You can also refer to the starter kits.

They also provide a VSCode extension which you should use if you're starting with Adonisjs.

You must check out Awesome Adonisjs which provides a list of awesome bookmarks, packages, tutorials, videos, courses, companies with websites using this and other cool resources from the AdonisJS ecosystem.

Most of the time it is tough to get started with something very new so the team has provided 10+ courses to learn about the Adonisjs ecosystem.

They have 15k+ stars on GitHub and are on the v6.8 release.

Star AdonisJS ⭐️

13. Astro - The web framework for content-driven websites.

Astro is an open-source, server-first web framework that combines the best of static site generation (SSG) and server-side rendering (SSR) to create fast, SEO-friendly websites. Astro is purpose-built to power content-rich websites like blogs, and e-commerce and has a great development ecosystem.

Get started with the following npm command.

npm create astro@latest

You can read the docs and the showcased websites built with Astro. Some of those are really awesome and visually stunning!

Astro supports React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more. Read about all the features documented.

You can follow this tutorial to build your first blog with Astro. Or use the themes to jumpstart your next project. Some of those are free while others are paid!

You can see the loading performance as shown and even I was surprised by this.

Performance is crucial especially if you're doing something commercially because an efficient algo will lead to saving more money and hassle.

The integration options are huge whether in terms of accessibility, icons, or using different libraries.

You can watch Astro Web Framework Crash Course a one-hour tutorial by Freecodecamp.

Astro has 42k+ stars on GitHub, is on the v4.6 (1800+ releases), and is used by 112k+ developers.

Star Astro ⭐️

14. Fresh - The next-gen web framework.

Fresh is a next-generation web framework, built for speed, reliability, and simplicity.

Some stand-out features:

Island-based client hydration for maximum interactivity.
Zero runtime overhead meaning no JS is shipped to the client by default.
No configuration necessary.
TypeScript support out of the box.

The framework uses Preact and JSX for rendering and templating, handling tasks on both the server and the client.

Moreover, Fresh eliminates the need for a build step. The code you write operates directly on both the server and client sides. Transpilation of TypeScript or JSX to plain JavaScript occurs dynamically, precisely when required. This facilitates incredibly rapid iteration cycles and swift deployments.

Get started with this.

deno run -A -r https://fresh.deno.dev

The most significant architectural decision Fresh adopts is its usage of the islands architecture pattern.

This means that Fresh applications ship pure HTML to the client by default. Parts of a server-rendered page can then be independently re-hydrated with interactive widgets (islands).

The client is only responsible for rendering parts of the page that are interactive enough to warrant the extra effort. Any purely static content does not have related client-side JavaScript and is thus very lightweight.

You can read the docs.

You can find all the websites that are built using this such as the portfolio website of Max Schmidt.

They have 11k+ stars on GitHub and are on the v1.6 release.

Star Fresh ⭐️

15. Vue.js - a progressive JavaScript framework for building UI on the web.

Vue.js is a progressive framework due to its capability to facilitate the design of high-end single-page web applications through dual integration mode. Read all the ways of using Vue including from embedding web components to standalone scripts, or even for building complex apps with server-side rendering or static site generation.

Using the MVVM (Model-View-ViewModel) architecture, Vue.js keeps things simple, flexible, and beginner-friendly.

Vue.js was first launched in 2014 by Evan You, a developer working for Google who took inspiration from AngularJS to deliver a simple, lightweight, and efficient alternative.

While borrowing some features from ReactJS and AngularJS, Vue.js has enhanced them to offer a smoother, more user-friendly experience. For example, Vue.js combines AngularJS's 2-way data binding with React's efficient Virtual DOM.

Vue has an inbuilt MVC that enables quick and easy configuration, unlike React. Also, the zipped version of Vue.js is barely 18-20 kb in size, much lighter than its bloated, bulky rivals like React or AngularJS.

Vue.js also includes a handy built-in component for CSS transitions and animations.

Watch Vue.js in 100 seconds to learn more!

Get started with the following npm command.

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will get prompts for several optional features such as TypeScript and testing support.

This is how you can start the dev server.

cd <your-project-name>
npm install
npm run dev

A simple app.

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

The above example demonstrates the two core features of Vue:

Declarative Rendering: Vue extends standard HTML with a template syntax that declaratively describes HTML output based on JavaScript state.
Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

You can also use it using CDN which will use the global build. Read the quickstart guide to know more.

You can read the docs and see the code editor examples of different topics, even on how to build a Markdown Editor.

To get a taste of Vue.js, you can try it directly in their live playground as well.

One of the articles about Vue that I really loved is by Michael on DEV. Must read!

25 Vue Tips You Need to Know

Michael Thiessen ・ Jul 21 '21

#vue #webdev #javascript #tutorial

If you're just starting, you can follow this official tutorial created by their team.

Similar to Astro, they also have a courses section and Vue School where you can find all sorts of topics.

Vue.js powers many reputable websites, including Font Awesome, Upwork, and Namecheap, among others.

Freecodecamp has a 3 hour tutorial on Vue for beginners but I don't recommend it because it is from 2019, and we know how quickly concepts change in these frameworks.

They have 44k+ stars on GitHub and are on the v3.4 release. It is one of the most loved frameworks of all time by developers.

Star Vuejs ⭐️

There are so many other frameworks some of which you can check out: Aurelia.js, Mithril.js, Stimulus.js, Meteor.js, Angular.js, React.js, Knockout.js and Alpine.js.

Yes I know, I'm feeling 😵 and excited at the same time. HAHA!

I've got some video recommendations that could give more depth to this article.

I made this full of tutorials on purpose to help you find everything in one place. I hope you enjoyed this!

While I'm a big fan of Next.js, exploring other awesome frameworks like Wing could be perfect for your next project.

Let us know which frameworks you're planning to use or if there's anything else you think others should know.

Have a great day! Till next time.

I create tech content to help others grow 1% daily so you can follow me on Twitter and LinkedIn to get daily insights.

If you like this kind of stuff, please follow me for more :)

Follow Winglang for more content like this.

Winglang Follow

Winglang is a new open-source programming language that combines infrastructure and runtime code in a safe and unified programming model (aka "cloud-oriented"). It comes with a built-in local simulator and an observability & debugging console.

Local simulation of serverless function concurrency

Elad Ben-Israel — Wed, 01 May 2024 18:09:20 +0000

The 9th issue of the Wing Inflight Magazine.

I am pleased to share another issue of the Wing Inflight Magazine with recent updates and news
from the Winglang project.

So what is Wing again?

Wing is a new programming environment for the cloud. It makes it easy for developers to build and test distributed systems that leverage a variety of powerful cloud primitives such as queues, topics, API endpoints, buckets, websites, topics, and a growing ecosystem of winglibs.

Wing comes with a visual cloud simulator which can be used to interact and test complete cloud applications on your local machine, with fast hot reloading and without having to deploy a single
resource to the cloud.

One of the unique capabilities of Wing is that it supports what we call pluggable platform
providers. This means that applications can be cloud- and provisioning-engine agnostic, so they can be deployed to multiple cloud providers using multiple provisioning engines.

There is already support for Terraform/OpenTofu, CloudFormation, AWS, GCP, and Azure, and discussions about

Check out the compatibility matrix, add your 👍 to the relevant issue, and share your use case to help us prioritize!

Check out the compatibility
matrix, add your 👍 to the
relevant issue, and share your use case to help us prioritize!

Platform teams can also create their own custom platforms using CDK constructs. This offers central
control over best practices, compliance policies, security, deployment strategies, and any other
aspect of how Wing applications are implemented in an organization's cloud environment.

Wing is still in active development, but we are starting to see some really cool stuff being
built with it. If you are up for a really fun (yet possibly bumpy) ride, we encourage you to take
Wing for a spin on your local machine or in the Wing
Playground and let us know what you
think.

We are designing Wing to be familiar and friendly for developers who come from modern
object-oriented background such as TypeScript, Swift, C#, and Java, so it will take you 5
minutes to learn.

In today's issue

🐛 Debugging with breakpoints
📊 Local simulation of serverless function concurrency
💁 A new project template for React with Vite
🔘 Adding UI to Wing classes through bring ui
🪝 Exposing cloud endpoints for webhook development
🏋️‍♀️ Explicit lifting of preflight objects
🤞 Changes to default object identifiers
💼 Implicitly loaded platform extensions
🕑 Standardize cron expressions
🎥 Goodies from the Wingly Update
🦁 Wing in the Wild
👯‍♂️ Community Events

Debugging with breakpoints

It is now possible to set breakpoints and fully debug your Wing applications!

The Wing VS Code extension, breakpoints can be added to .w files, both for preflight and inflight
code and simply hit F5 to debug. The built-in debugger can now be used to inspect and step through
the code.

See PR by Mark

Local simulation of serverless function concurrency

We've made improvements to how cloud.Functions are executed in the Wing Simulator so they
functionally behave like FaaS providers. We are now running each function within an isolated child
process and manage its concurrency limits.

The concurrency option that can be passed to cloud.Function or any resource that takes an
inflight closure can be used to control these limits.

For example:

bring util;
bring cloud;

let queue = new cloud.Queue();

let handler = inflight (x) => {
  log("only one at a time: {x}");
};

queue.setConsumer(handler, concurrency: 1);
//                         ^^^^^^^^^^^^^^

test "push 10" {
  for i in 0..10 { queue.push("{i}"); }
  util.waitUntil(() => { return queue.approxSize() == 0; });
}

When running this with concurrency: 1, the code finishes after ~1.5s
When running with concurrency: 10, the code finishes after 0.5s

See PR by Chris

A new project template for React with Vite

We are continuing to add new project templates for various types of projects, and we've recently
created one for the infamous combination of React with
Vite tooling.

Check out this guide
for a detailed tutorial or just get started with:

mkdir my-project && cd my-project
wing new react-vite

Adding UI to Wing classes through `bring ui`

It is now possible to associate simple user interface elements with Wing preflight classes through
the ui module. These elements can dynamically interact with your system via simple implementations
of inflight closures:

bring ui;

class MyResource {
  counter: cloud.Counter;

  new() {
    this.counter = new cloud.Counter();

    new ui.Button("Cool Button", inflight () => {
      this.counter.inc();
    });

    new ui.Field("Counter", inflight () => {
      return "{this.counter.peek()}";
    });
  }
}

Now, when a MyResource node is selected in the Wing Console, you'll see this in the inspector
pane:

We are adding more UI elements and can't wait to see what people will build with this!

See PR by Cristian

Exposing cloud endpoints for webhook development

When developing applications that react to requests from other services via webhooks such as bots
and extensions, it is often very valuable to be able to accept requests from these external systems
during development.

So now, every cloud.Endpoint in your application (either explicitly or implicitly defined via a
cloud.Api, cloud.Website, etc) can be exposed and requests will be tunneled into the local
simulator:

This is an experimental feature and still needs some ironing out, and we would love to hear what
You think about it.

See PR by Elad

Explicit lifting of preflight objects

When inflight code is referencing a preflight object, the object is lifted and the operation
performed on the object is qualified in order to be able to determine things like IAM permissions.

In many cases, the Wing compiler can automatically qualify the lift. For example, in the code below,
it is clear that the inflight closure performs a push operation on the lifted queue object:

bring cloud;

let myQueue = new cloud.Queue();

inflight () => {
  myQueue.push("hello");
};

But since the Wing compiler currently does not perform symbolic execution, there are cases where
it's currently impossible for the compiler to qualify the lift. For example, if I assign myQueue
to a new variable called (yourQueue), we will get the following error:

bring cloud;

let myQueue = new cloud.Queue();

inflight () => {
  let yourQueue = myQueue;
  yourQueue.push("hello");
//^^^^^^^^^ Expression of type "Queue" references an unknown preflight object, can't qualify its capabilities.
};

To overcome this limitation, a new builtin lift() can be used to explicitly qualify the lifts:

bring cloud;

let myQueue = new cloud.Queue();

inflight () => {
  lift(myQueue, ["push"]);

  let yourQueue = myQueue;
  yourQueue.push("hello");
};

New builtin lift function allows you to lift preflight objects for the current inflight closure.

This syntax is still under discussion, but we wanted to make sure this is not blocking users.
Check out the RFC and join the conversation.

See PR by Yoav

Changes to default object identifiers

When creating preflight
objects in Wing, each object
gets an identifier which is unique to its scope of definition. These identifiers are essential for
producing deterministic unique addresses for cloud resources when they are provisioned.

The default identifier for objects in Wing is the name of the class. In the following example, the
identifier of the bucket is simply "Bucket":

new cloud.Bucket();

Previously, the default identifier included the namespace of the class, so in the above example the
identifier was "cloud.Bucket", but since namespaces can now be aliased (bring cloud as my_cloud), this resulted in unstable defaults, which can have dire implications on infrastructure.

By the way, Wing also has dedicated syntax (as ID) to determine the identity of an object in case
there are multiple instances of the same type or you want to be more explicit:

new cloud.Bucket() as "my_bucket";

We are discussing potentially changing this
syntax, so let us know what you think.

See PR by Elad

Implicitly loaded platform extensions

Platform extensions are one of the most powerful
capabilities of Wing. They can determine how cloud resources are implemented in your cloud
environment, validate that your application adheres to an organizational policy or inject best
practices and common patterns "under the hood".

So far, it was possible to configure Wing to use a platform provider using an explicit --platform
switch passed to the Wing CLI, but we've seen a need for modules or libraries to be able to provide
platform extensions without having to require explicit configuration.

To that end, as Wing compiles your code, any wplatform.js files found will be loaded automatically
as a platform. This occurs after explicit ones like -t tf-aws and also applies to any winglibs
used by your applications.

One of the currently explored use cases is the ability for libraries to expose their own platform
parameters.

For example, the eventbridge winglib
exposes a platform parameter called eventBridgeName to allow developers to connect to an existing
EventBridge bus:

wing compile -t @winglang/platform-awscdk -v eventBridgeName="my-bus" main.w

Here's a sneak peak on how this platform extension is implemented:

module.exports.Platform = class {
  parameters = {
    type: "object",
      properties: {
        eventBridgeName: {
        type: "string",
      },
    },
  };
};

See PR by Hasan

Standardize cron expressions

A cron expression like * * * * * is valid in a unix-based crontab, but not in AWS. On the other
hand, * * * * ? is valid in AWS, but not elsewhere.

Now, Wing will expect cron expression to match the standard syntax, and will automatically convert
it to the AWS syntax when deploying to AWS:

bring cloud;

new cloud.Schedule(cron: "* * * * *");

See PR by Marcio

Goodies from the Wingly Update

The Wingly Update is our corky bi-weekly stream where we share
the latest developments of the project, chat with folks from the cloud industry, geek out and
celebrate the beauty of the cloud.

If you haven't been able to catch our show, you can find the complete stack of all our episodes
here.

Here are a few goodies we curated from recent shows:

The recent CHANGELOG with @MarkMcCulloh
An overview of where we are in our journey towards Wing for TypeScript.
A chat with Allen Helton about Texas, life, conferences, cowboys and his love for serverless.
A fun chat with Michael Antonio from AWS about his journey at Microsoft and Amazon, IAC, CDK and computing nostalgia.

Wing in the Wild

This is a new section in our magazine where we curate content about Wing from the world wide and
wonderful web:

An awesome overview video of Wing by Amichai Mantinband.
Ayush Thakur wrote about his experience building a NextS app with a Wing backend.
Asher Sterkin's explored an implementation of production-grade REST APIs in Wing as well as used Wing to manage multiple AWS environments.

Community Events

You can find details for all our events in the Wingnuts
Calendar,
amongst them:

Winglang Community Meeting is our bi-weekly gathering where members of our community showcase cool apps, demos, and other projects.
Monday Office Hours is our bi-weekly opportunity for you to share your feedback, thoughts, and concerns, or simply drop by to say hi.

Summary

That's it for this edition!

You are invited to join the Wing Slack! Come say hello and hang out
with fellow Wingnuts! Give winglang.io a visit and take Wing out for a spin.
If you're not already, stay updated on the latest changes in our
repo.

Looking forward to entertaining you in your next flight!

- The Wing Team

Build a Full-Stack app using these React libraries and cloud backend.

Anmol Baranwal — Mon, 25 Mar 2024 13:30:03 +0000

Today, we're going to learn how to build a full-stack app with Wing as a backend.

We will use React with Vite for the frontend.
I know there are other frameworks like Vue, Angular, and Next but React is still the most common, and a huge number of trusted startups use it to date.

If you don't know, React is an open source library created by Facebook to build web and native user interfaces. As you can see from the repository, it is used by 20.4M+ developers. So, it's worth the effort.

Let's see how we can use Wing as a backend.

Wing - A programming language for the cloud.

Winglang is a new open-source programming language designed for the cloud (aka "cloud-oriented"). It lets you build apps in the cloud and has a fairly easy syntax.

Wing programs can be executed locally (yes, no internet required) using a fully functional simulator, or deployed to any cloud provider.

You would need Node v20 or higher for Wing.

Make a parent directory (we are using shared-counter) and set up the frontend with a new React app using Vite. You can use this npm command.

npm create -y vite frontend -- --template react-ts

// once installed, you can check if it's running properly.
cd frontend

npm install

npm run dev

You can install Wing using this npm command.

npm install -g winglang

You can verify the installation using wing -V.

Create a backend directory.

mkdir ~/shared-counter/backend
cd ~/shared-counter/backend

To create a new empty Wing project.

wing new empty
// This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program

wing it // to run it in the Wing simulator
// The Wing Simulator will be opened in your browser and will show a map of your app with a single function.
//You can invoke the function from the interaction panel and check out the result.

The structure would be as follows after using the command wing new empty.

bring cloud;

// define a queue, a bucket, and a counter
let bucket = new cloud.Bucket();
let counter = new cloud.Counter(initial: 1);
let queue = new cloud.Queue();

// When a message is received in the queue -> it should be consumed
// by the following closure
queue.setConsumer(inflight (message: str) => {
  // Increment the distributed counter, the index variable will 
  // store the value before the increment
  let index = counter.inc();
  // Once two messages are pushed to the queue, e.g. "Wing" and "Queue".
  // Two files will be created:
  // - wing-1.txt with "Hello Wing"
  // - wing-2.txt with "Hello Queue"
  bucket.put("wing-{index}.txt", "Hello, {message}");
  log("file wing-{index}.txt created");
});

You can install @winglibs/vite to start the dev server rather than using the npm run dev to start the local web server.

// in the backend directory
npm i @winglibs/vite

You can send data to your frontend using publicEnv available at backend/main.w.
Let's see a minor example.

// backend/main.w
bring vite;

new vite.Vite(
  root: "../frontend",
  publicEnv: {
    TITLE: "Wing + Vite + React"
  }
);

// import it in frontend
// frontend/src/App.tsx
import "../.winglibs/wing-env.d.ts"

//You can access that value like this.
<h1>{window.wing.env.TITLE}</h1>

You can do more:

read/update API routes & check it using Wing Simulator.
Fetching the values by using the backend.
Synchronize browsers using @winglibs/websockets which deploys a WebSocket server on the backend and you can connect this WebSocket to receive real-time notifications.

You can read the complete step-by-step guide on how to build a simple web application with React for our frontend and Wing for our backend. Testing is done using Wing Simulator and it's deployed to AWS using Terraform.

The AWS architecture after the deployment would be like this.

This will also make the console fully accessible for local debugging and testing without learning the Wing language.

Wing even has other guides so it's easier to follow along.

You can read the docs and see the examples.

You can also use Wing in the playground to check out the structure and examples.

If you're more of a tutorial person. Watch this!

Wing has 3.5k+ Stars on GitHub, 1500+ Releases, and is still not on the v1 release which means a huge deal.
Go try it out and make something cool!

Star Wing ⭐️

The developer ecosystem has grown and many developers have built something unique around React.

I'm not covering how you can use React because it's such a wide topic and I've pasted a couple of resources at the end that will help you learn React.

But to help you make an awesome React project, we are covering 25 open source projects that you can use to make your work easier.
This will have plenty of resources, ideas, and concepts.

I will even give you some learning resources, and project examples of a few products to learn React.
Everything would be free & only React.

Let's cover it all!

1. Mantine Hooks - react hooks for state and UI management.

This may not be especially for React, but you can use these hooks to make your work easier. The hooks are ready to use with each having a good number of options.

If I have to rate, this would be the most useful project that everyone can use rather than writing code from scratch.

Trust me, getting 60+ hooks is a big deal considering they have a simple way for you to see the demo of each of the hooks with easy docs to follow.

Get started with the following npm command.

npm install @mantine/hooks

This is how you can use useScrollIntoView as part of mantine hooks.

import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Box } from '@mantine/core';

function Demo() {
  const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({
    offset: 60,
  });

  return (
    <Group justify="center">
      <Button
        onClick={() =>
          scrollIntoView({
            alignment: 'center',
          })
        }
      >
        Scroll to target
      </Button>
      <Box
        style={{
          width: '100%',
          height: '50vh',
          backgroundColor: 'var(--mantine-color-blue-light)',
        }}
      />
      <Text ref={targetRef}>Hello there</Text>
    </Group>
  );
}

They almost have everything from local storage to pagination, to scroll view, intersection, and even some very cool utilities like eye dropper and text selection. This is damn too helpful!

You can read the docs.

You can also use an alternative library if you're looking for more options.

They have more than 23k stars on GitHub but it's not only for the hooks because they are a component library for React.

It has weekly downloads of 380k+ along with the v7 release that shows they are constantly improving and trustworthy.

Star Mantine Hooks ⭐️

2. React Grid Layout - draggable and resizable grid layout with responsive breakpoints.

React-Grid-Layout is a responsive grid layout system built exclusively for React applications.

With support for draggable, resizable, and static widgets, it offers an easy solution for using a grid.

Unlike similar systems like Packery or Gridster, React-Grid-Layout is jQuery-free, ensuring a lightweight and efficient implementation.

Its seamless integration with server-rendered apps and the ability to serialize and restore layouts make it a valuable tool for developers to use grid layouts in their React projects.

Get started with the following npm command.

npm install react-grid-layout

This is how you can use a responsive grid layout.

import { Responsive as ResponsiveGridLayout } from "react-grid-layout";

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      >
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    );
  }
}

You can read the docs and see the demo. There is a series of demos and it's even available by clicking on "view the next example".

You can also try the things on codesandbox.

The project has 19k+ Stars on GitHub, is used by 16k+ Developers, and has massive weekly downloads of 600k+ on the npm package.

Star React Grid Layout ⭐️

3. React Spectrum - A collection of libraries and tools for great UX.

React Spectrum is a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

They provide so many things that it's hard to cover everything in just a single post.

Overall, they provide these four libraries.

React Spectrum
React Stately - A huge set of React Hooks that provides cross-platform state management for your design system.
React Aria
internationalized

We will see a bit about React Aria which is a library of unstyled React components and hooks that helps you build accessible, high-quality UI components for your app.
It has been meticulously tested across a wide variety of devices, interaction modalities, and assistive technologies to ensure the best experience possible for all users.

Get started with the following npm command.

npm i react-aria-components

This is how you can build a custom select.

import {Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue} from 'react-aria-components';

<Select>
  <Label>Favorite Animal</Label>
  <Button>
    <SelectValue />
    <span aria-hidden="true">▼</span>
  </Button>
  <Popover>
    <ListBox>
      <ListBoxItem>Cat</ListBoxItem>
      <ListBoxItem>Dog</ListBoxItem>
      <ListBoxItem>Kangaroo</ListBoxItem>
    </ListBox>
  </Popover>
</Select>

Trust me, for study purposes, this is a goldmine.

They use their own robust 40+ styling components which is way more than what is generally provided. They also have their own set of design systems such as font, UI, typography, motion, and more.

You can read about Spectrum and their architecture in detail.

They have over 11k stars on GitHub, indicating their quality despite not being widely known. Studying them can provide valuable insights into setting up your library.

Star React Spectrum ⭐️

4. Keep React - UI component library for Tailwind CSS & React.js.

Keep React is an open source component library built on Tailwind CSS and React.js. It provides a versatile set of pre-designed UI components that enable developers to streamline the creation of modern, responsive, and visually appealing web applications.

Get started with the following npm command.

npm i keep-react

This is how you can use Timeline.


"use client";
import { Timeline } from "keep-react";
import { CalendarBlank } from "phosphor-react";

export const TimelineComponent = () => {
  return (
    <Timeline horizontal={true}>
      <Timeline.Item>
        <Timeline.Point icon={<CalendarBlank size={16}  />} />
        <Timeline.Content>
          <Timeline.Title>Keep Library v1.0.0</Timeline.Title>
          <Timeline.Time>Released on December 2, 2021</Timeline.Time>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={<CalendarBlank size={16}  />} />
        <Timeline.Content>
          <Timeline.Title>Keep Library v1.1.0</Timeline.Title>
          <Timeline.Time>Released on December 23, 2021</Timeline.Time>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={<CalendarBlank size={16}  />} />
        <Timeline.Content>
          <Timeline.Title>Keep Library v1.3.0</Timeline.Title>
          <Timeline.Time>Released on January 5, 2022</Timeline.Time>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

The output would be as below.

The little smooth animations make it all worth it, and you can use it if you want to quickly build a UI without any hassle.

You can read the docs and check the storybook for detailed usage testing.

The project has over 1k stars on GitHub, and some of its components are incredibly handy to use.

Star Keep React ⭐️

5. React Content Loader - SVG-powered component to easily create skeleton loadings.

This project provides you with an SVG-powered component to easily create placeholder loadings (like Facebook's cards loading).

Skeletons are used during the loading state to indicate to users that content is still loading.
Overall, it's a very handy project for enhancing the overall user experience.

Get started with the following npm command.

npm i react-content-loader --save

This is how you can use it.

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default MyLoader

You can even drag the individual skeleton or use pre-defined made for different socials like Facebook, and Instagram.

You can read the docs and see the demo.

The project has 13k+ Stars on GitHub and is used by 45k+ developers on GitHub.

Star React Content Loader ⭐️

6. React PDF - Create PDF files using React.

This package is used to create PDFs using React.

Get started with the following npm command.

npm install @react-pdf/renderer --save

This is how you can use this.

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

You can read the docs and see the demo.

React-pdf now ships a hook called usePDF that enables accessing all PDF creation capabilities via a React hook API. This is great if you need more control over how the document gets rendered or how often it's updated.

const [instance, update] = usePDF({ document });

The project has 13k+ Stars on GitHub and has more than 270 releases with 400k+ weekly downloads which is a good sign.

Star React PDF ⭐️

7. Recharts - redefined chart library built with React and D3.

The main purpose of this library is to help you write charts in React applications without any pain.

The Main principles of Recharts are.

Simply deploy with React components.
Native SVG support, lightweight depending only on some D3 submodules.
Declarative components, components of charts are purely presentational.

Get started with the following npm command.

npm install recharts

This is how you can use this.

<LineChart width={500} height={300} data={data} accessibilityLayer>
    <XAxis dataKey="name"/>
    <YAxis/>
    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
    <Tooltip/>
  </LineChart>

You can read the docs and see more on Storybook.

They provide an insane amount of options to customize it, which is why developers love it. They also provide a wiki page for general FAQs.

You can also try it on codesandbox here.

The project has 22k+ Stars on GitHub and is used by 200k+ developers.

Star Recharts ⭐️

8. React Joyride - create guided tours in your apps.

Tours can be an excellent way to showcase your app to new users or explain the functionality of new features. It improves the user experience and can create a personalized touch.

Get started with the following npm command.

npm i react-joyride

This is how you can use it.

import React, { useState } from 'react';
import Joyride from 'react-joyride';

/*
 * If your steps are not dynamic you can use a simple array.
 * Otherwise you can set it as a state inside your component.
 */
const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
  {
    target: '.my-other-step',
    content: 'This another awesome feature!',
  },
];

export default function App() {
  // If you want to delay the tour initialization you can use the `run` prop
  return (
    <div>
      <Joyride steps={steps} />
      ...
    </div>
  );
}

They also provide a list of components and an easy way to customize the default user interface.

You can read the docs and see the demo.

You can also try the things on codesandbox.

They have 6k+ Stars on GitHub and have more than 250k weekly downloads on the npm package.

Star React Joyride ⭐️

9. SVGR - Transform SVGs into React components.

SVGR is a universal tool to transform SVG into React components.
It takes a raw SVG and transforms it into a ready-to-use React component.

Get started with the following npm command.

npm install @svgr/core

For instance, you take this SVG.

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

After running SVGR, it will be converted to.

import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

It optimized SVG using SVGO and uses Prettier for formatting code.

Transforming HTML into JSX takes place in several steps:

Converting SVG into HAST (HTML AST)
Converting HAST into Babel AST (JSX AST)
Transforming AST using Babel (renaming attributes, changing attribute values, ...)

You can read the docs and check things at playground.

The project has 10k+ Stars on GitHub and is used by 8M+ developers with weekly downloads of 800k+ on npm.

Star SVGR ⭐️

10. React Sortable Tree - Drag-and-drop sortable component for nested data and hierarchies.

A React component that enables the drag-and-drop sorting of hierarchical data.

Get started with the following npm command.

npm install react-sortable-tree --save

This is how you can use this.

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app

export default class Tree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] },
      ],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Check the various props options and themes that you get with this.

You can read the docs and check out the Storybook for a demonstration of some basic and advanced features.

It may not be actively maintained (still not archived), so you can also use a maintained fork version.

The project has 4.5k+ Stars on GitHub and is used by 5k+ developers.

Star React Sortable Tree ⭐️

11. React Hot Toast - Smoking Hot React Notifications.

React Hot Toast offers a blazing 🔥 default experience with easy customization options. It leverages a Promise API for automatic loaders, ensuring smooth transitions.
Lightweight at under 5kb, it remains accessible while empowering developers with headless hooks like useToaster().

Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger toast() from anywhere!

Get started with the following npm command.

npm install react-hot-toast

This is how easy it is to use.

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

They have lots of options to customize it but the useToaster() hook provides you a headless system that will manage the notification state for you. This makes building your notification system much easier.

You can read the docs, the styling guide and see the demo.

The project has 8k+ Stars on GitHub and is used by 230k+ developers.

Star React Hot Toast ⭐️

12. Payload - the best way to build a modern backend + admin UI.

Payload is a headless CMS and application framework. It's meant to boost your development process, but importantly, stay out of your way as your apps get more complex.

No black magic and fully open source, Payload is both an app framework and a headless CMS. It is truly the Rails for TypeScript—and you get an admin panel. You can understand more about Payload using this YouTube Video.

You can learn about the concepts involved by using Payload.

Payload interacts with your database via the database adapter that you choose. Right now, Payload officially supports two database adapters:

MongoDB w/ Mongoose
Postgres w/ Drizzle

Get started with the following command.

npx create-payload-app@latest

You will have to generate a Payload secret key and update your server.ts to initialize Payload.

import express from 'express'
import payload from 'payload'

require('dotenv').config()
const app = express()

const start = async () => {
  await payload.init({
    secret: process.env.PAYLOAD_SECRET,
    express: app,
  })

  app.listen(3000, async () => {
    console.log(
      "Express is now listening for incoming connections on port 3000."
    )
  })
}

start()

You can read the docs and see the demo.

They also offer an e-commerce template that integrates seamlessly with Payload + Stripe. This template features a stunning, fully functional front end, including components for shopping carts, checkout processes, order management, and more.

Payload has 18k+ Stars on GitHub and has more than 290 releases so they're constantly improving especially in DB support.

Star Payload ⭐️

13. React Player - A React component for playing a variety of URLs.

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion, and Kaltura. You can see the list of supported media.

The maintenance of ReactPlayer is being taken over by Mux which makes them a good choice.

Get started with the following npm command.

npm install react-player

This is how you can use this.

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />

// If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size.

// like this: import ReactPlayer from 'react-player/youtube'

You can also use react-player/lazy to lazy load the appropriate player for the URL you pass in. This adds several reactPlayer chunks to your output but reduces your main bundle size.

import React from 'react'
import ReactPlayer from 'react-player/lazy'

// Lazy load the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

You can read the docs and see the demo. They provide plenty of options including adding subtitles and making it responsive in an easy way.

They have 8k+ stars on GitHub, are used by 135k+ developers, and have a massive 800k+ weekly downloads on the npm package.

Star React Player ⭐️

14. Victory - React components for building interactive data visualizations.

Victory is an ecosystem of composable React components for building interactive data visualizations.

Get started with the following npm command.

npm i --save victory

This is how you can use this.

<VictoryChart
  domainPadding={{ x: 20 }}
>
  <VictoryHistogram
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleHistogramDateData}
    bins={[
      new Date(2020, 1, 1),
      new Date(2020, 4, 1),
      new Date(2020, 8, 1),
      new Date(2020, 11, 1)
    ]}
  />
</VictoryChart>

This is how it's rendered. They also offer animations and theme options, which are generally useful.

You can read the docs and follow the tutorial to get started. They provide around 15 different chart options.

It's also available for React Native (docs), so that's a plus point. I would also recommend checking out their FAQs where they describe solutions of common problems with code and explanation such as styling, annotation (labels), handling axes.

The project has 10k+ Stars on GitHub and is used by 23k+ developers on GitHub.

Star Victory ⭐️

15. React Slick - React carousel component.

React Slick is a carousel component built with React. It is a react port of a slick carousel

Get started with the following npm command.

npm install react-slick --save

This is how you can use custom pagination.

import React, { Component } from "react";
import Slider from "react-slick";
import { baseUrl } from "./config";

function CustomPaging() {
  const settings = {
    customPaging: function(i) {
      return (
        <a>
          <img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
        </a>
      );
    },
    dots: true,
    dotsClass: "slick-dots slick-thumb",
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <div className="slider-container">
      <Slider {...settings}>
        <div>
          <img src={baseUrl + "/abstract01.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract02.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract03.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract04.jpg"} />
        </div>
      </Slider>
    </div>
  );
}

export default CustomPaging;

You can read about the prop options and methods that are available.

You can read the docs and all sets of examples with code & output.

They have 11k+ Stars on GitHub and 360k+ developers use it on GitHub.

Star React Slick ⭐️

16. Medusa - Building blocks for digital commerce.

Medusa is a set of commerce modules and tools that allow you to build rich, reliable, and performant commerce applications without reinventing core commerce logic.

The modules can be customized and used to build advanced e-commerce stores, marketplaces, or any product that needs foundational commerce primitives. All modules are open source and freely available on npm.

Get started with the following npm command.

npm install medusa-react @tanstack/react-query@4.22 @medusajs/medusa

Include this in app.ts.
Only children of MedusaProvider can benefit from its hooks. So, the Storefront component and its child components can now use hooks exposed by Medusa React.

import { MedusaProvider } from "medusa-react"
import Storefront from "./Storefront"
import { QueryClient } from "@tanstack/react-query"
import React from "react"

const queryClient = new QueryClient()

const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}
      baseUrl="http://localhost:9000"
    >
      <Storefront />
    </MedusaProvider>
  )
}

export default App

For instance, this is how you can create a cart by using mutations.

import { useCreateCart } from "medusa-react"

const Cart = () => {
  const createCart = useCreateCart()
  const handleClick = () => {
    createCart.mutate({}) // create an empty cart
  }

  return (
    <div>
      {createCart.isLoading && <div>Loading...</div>}
      {!createCart.data?.cart && (
        <button onClick={handleClick}>
          Create cart
        </button>
      )}
      {createCart.data?.cart?.id && (
        <div>Cart ID: {createCart.data?.cart.id}</div>
      )}
    </div>
  )
}

export default Cart

They have provided a set of e-commerce modules (vast options) like discounts, price lists, gift cards, and more.

They also provide an easy way for admin & customer authentication which you can read in the docs.

They provide a nextjs starter template and Medusa React as an SDK.

The project has 22k+ Stars on GitHub and is used by 4k+ developers.

Star Medusa ⭐️

17. React Markdown - Markdown component for React.

Markdown is crucial, and rendering it with React is highly useful for various scenarios.

It offers a React component capable of safely rendering a string of markdowns into React elements. You can customize the transformation of markdown by passing plugins and specifying components to be used instead of standard HTML elements.

Get started with the following npm command.

npm i react-markdown

This is how you can use this.

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)

Equivalent JSX would be.

<p>
  Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>.
</p>

They have also provided a cheatsheet and a ten-minute step-by-step tutorial.

You can read the docs and check the demo.

The project has 12k+ Stars on GitHub, has 2700k+ weekly downloads, and is used by 200k+ developers which proves how useful it really is.

Star React Markdown ⭐️

18. React JSONSchema Form - for building Web forms from JSON Schema.

react-jsonschema-form automatically generates React forms from JSON Schema, making it ideal for generating forms for any data with just a JSON schema. It offers customization options like uiSchema to tailor the form's appearance beyond default themes.

Get started with the following npm command.

npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save

This is how you can use this.

import { RJSFSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';

const schema: RJSFSchema = {
  title: 'Todo',
  type: 'object',
  required: ['title'],
  properties: {
    title: { type: 'string', title: 'Title', default: 'A new task' },
    done: { type: 'boolean', title: 'Done?', default: false },
  },
};

const log = (type) => console.log.bind(console, type);

render(
  <Form
    schema={schema}
    validator={validator}
    onChange={log('changed')}
    onSubmit={log('submitted')}
    onError={log('errors')}
  />,
  document.getElementById('app')
);

They provide advanced customization options including custom widgets.

You can read the docs and check the live playground.

It has 13k+ Stars on GitHub and is used by 5k+ developers. They are on the v5 with 190+ releases so they're constantly improving.

Star React JSONSchema Form ⭐️

19. Craft.js - build extensible drag and drop page editors.

Page editors enhance user experience but building one from scratch can be daunting. Existing libraries offer pre-built editors with editable components, but customization often requires modifying the library itself.

Craft.js addresses this by modularizing page editor components, simplifying customization with drag-and-drop functionality, and rendering management. Design your editor in React without complex plugin systems, focusing on your specific needs and specifications.

Get started with the following npm command.

npm install --save @craftjs/core

They have also provided a short tutorial on how you can get started. I'm not covering it since it's very easy and detailed.

You can read the docs and check the live demo along with one other live example.

It has around 6k+ Stars on GitHub but still useful considering they are improving.

Star Craft.js ⭐️

20. Gatsby - best React-based framework with performance, scalability, and security built-in.

Gatsby is a React-based framework that empowers developers to build lightning-fast websites and apps, merging the flexibility of dynamic rendering with the speed of static site generation.

With features like customizable UIs and support for various data sources, Gatsby offers unparalleled control and scalability. Plus, it automates performance optimizations, making it a top choice for static websites.

Get started with the following npm command.

npm init gatsby

This is how you can use Link in Gatsby (react component).

import React from "react"
import { Link } from "gatsby"

const Page = () => (
  <div>
    <p>
      Check out my <Link to="/blog">blog</Link>!
    </p>
    <p>
      {/* Note that external links still use `a` tags. */}
      Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>!
    </p>
  </div>
)

They have provided a set of starter templates with how to use it, the dependencies involved, and a demo of each of the templates.

You can read about some of the common concepts involved with Gatsby such as React Hydration, the Gatsby build process, and more.

You can read the docs and check tutorials for getting started.

Gatsby has 55k+ Stars on GitHub and is used by 240k+ developers

Star Gatsby ⭐️

21. Chat UI Kit React - Build your chat UI with React in minutes.

The Chat UI Kit by Chatscope is an open source UI toolkit for developing web chat applications.
Even though the project is not widely used, the features are useful for beginners just checking out the project.

Get started with the following npm command.

npm install @chatscope/chat-ui-kit-react

This is how you can create a GUI.

import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';

<div style={{ position:"relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>       
      <MessageList>
        <Message model={{
                 message: "Hello my friend",
                 sentTime: "just now",
                 sender: "Joe"
                 }} />
        </MessageList>
      <MessageInput placeholder="Type message here" />        
    </ChatContainer>
  </MainContainer>
</div>

You can read the docs.
More detailed documentation is present in the storybook.

It provides some handy components like TypingIndicator, Multiline Incoming, and many more.

I know some of you prefer a blog to understand the whole structure, so you can read How to Integrate ChatGPT with React by Rollbar that uses Chat UI Kit React.

Some of the demos that you can see:

Chatbot UI
Chat Friends - Check this out!

Star Chat UI Kit React ⭐️

22. Botonic - React Framework to Build Conversational Apps.

Botonic is a full-stack Javascript framework to create chatbots and modern conversational apps that work on multiple platforms: web, mobile, and messaging apps (Messenger, WhatsApp, Telegram, etc). It's built on top of ⚛️ React, Serverless, and Tensorflow.js.

If you're not aware of the concept of conversational apps, you can read them on the official blog.

With Botonic you can create conversational applications that incorporate the best out-of-text interfaces (simplicity, natural language interaction) and graphical interfaces (multimedia, visual context, rich interaction).
It's a powerful combination to provide a better user experience than traditional chatbots, which rely only on text and NLP.

This is how you can simple Botonic is.

export default class extends React.Component {
  static async botonicInit({ input, session, params, lastRoutePath }) {
    await humanHandOff(session))
  }

  render() {
    return (
      <Text>
        Thanks for contacting us! One of our agents
        will attend you as soon as possible.
      </Text>
    )
  }
}

They support TypeScript as well so it's a plus point.

You can see some of the examples built using Botonic along with their source code.

You can read the docs and how to Create a Conversational App from Scratch.

Star Botonic ⭐️

23. React Flowbite - React components built for Flowbite and Tailwind CSS.

Everyone has a different preference for the UI they want to build their website with.

Flowbite React is an open source collection of UI components, built in React, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.

Get started with the following npm command.

npm i flowbite-react

This is how you can use table and keyboard components together.


'use client';

import { Kbd, Table } from 'flowbite-react';
import { MdKeyboardArrowDown, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowUp } from 'react-icons/md';

function Component() {
  return (
    <Table>
      <Table.Head>
        <Table.HeadCell>Key</Table.HeadCell>
        <Table.HeadCell>Description</Table.HeadCell>
      </Table.Head>
      <Table.Body className="divide-y">
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>Shift</Kbd> <span>or</span> <Kbd>Tab</Kbd>
          </Table.Cell>
          <Table.Cell>Navigate to interactive elements</Table.Cell>
        </Table.Row>
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>Enter</Kbd> or <Kbd>Spacebar</Kbd>
          </Table.Cell>
          <Table.Cell>Ensure elements with ARIA role="button" can be activated with both key commands.</Table.Cell>
        </Table.Row>
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <span className="inline-flex gap-1">
              <Kbd icon={MdKeyboardArrowUp} />
              <Kbd icon={MdKeyboardArrowDown} />
            </span>
            <span> or </span>
            <span className="inline-flex gap-1">
              <Kbd icon={MdKeyboardArrowLeft} />
              <Kbd icon={MdKeyboardArrowRight} />
            </span>
          </Table.Cell>
          <Table.Cell>Choose and activate previous/next tab.</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

You can read the docs and see features in Storybook. You can also see the list of components.

In my opinion, this is good if you quickly want to set up a UI, but don't want to end up using pre-defined library components for a high-quality open source project.

With over 1.5k stars on GitHub and a user base of 37k+ developers, this project is widely recognized and trusted by the community, making it a solid option.

Star React Flowbite ⭐️

24. DND Kit - lightweight, performant, accessible, and extensible drag & drop.

This is a robust drag & drop toolkit for React, boasting features like customizable collision detection, multiple activators, and auto-scrolling.

Designed with React in mind, it offers hooks for easy integration without requiring major architectural changes. Supporting diverse use cases, from lists to grids and virtualized lists, it's both dynamic and lightweight, with no external dependencies.

Get started with the following npm command.

npm install @dnd-kit/core

This is how you can build a draggable & droppable component.

Example.jsx


import React, {useState} from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';

function Example() {
  const [parent, setParent] = useState(null);
  const draggable = (
    <Draggable id="draggable">
      Go ahead, drag me.
    </Draggable>
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {!parent ? draggable : null}
      <Droppable id="droppable">
        {parent === "droppable" ? draggable : 'Drop here'}
      </Droppable>
    </DndContext>
  );

  function handleDragEnd({over}) {
    setParent(over ? over.id : null);
  }
}

Droppable.jsx


import React from 'react';
import {useDroppable} from '@dnd-kit/core';

export function Droppable(props) {
  const {isOver, setNodeRef} = useDroppable({
    id: props.id,
  });
  const style = {
    opacity: isOver ? 1 : 0.5,
  };

  return (
    <div ref={setNodeRef} style={style}>
      {props.children}
    </div>
  );
}

Draggable.jsx


import React from 'react';
import {useDraggable} from '@dnd-kit/core';
import {CSS} from '@dnd-kit/utilities';

function Draggable(props) {
  const {attributes, listeners, setNodeRef, transform} = useDraggable({
    id: props.id,
  });
  const style = {
    // Outputs `translate3d(x, y, 0)`
    transform: CSS.Translate.toString(transform),
  };

  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {props.children}
    </button>
  );
}

I'm holding the draggable component on the droppable one.

You can read the docs and the options of sensors such as Mouse, and Pointer.

It has 10k+ Stars on GitHub and is used by 47k+ Developers on GitHub.

Star DND Kit ⭐️

25. Expo - Develop, review, & deploy native apps from a single React codebase for Android, iOS, & web.

Expo is an open source platform for making universal native apps that run on Android, iOS, and the web. It includes a universal runtime and libraries that let you build native apps by writing React and JavaScript. You can read about the core concepts involved with the Expo.

When Expo was first created, React Native had yet to be publicly released. This means there were no third-party packages.

To make React Native easier to use, they made a bunch of tools themselves to handle common tasks. Some of these tools have been changed and improved over time to fit different needs.

The Expo SDK is thoroughly tested, written in TypeScript, and made for Android, iOS, and the web. Every part of the Expo SDK works together smoothly, so you won't have any trouble upgrading. All Expo tools and services work great in any React Native app.

Get started using the following commands.

# create a project named first-app
npx create-expo-app first-app

# navigate to directory
cd first-app

# to start
npx expo start

Ultimately, you have to make several components to design any screen. Such as the image can be attached to the screen with the below code.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View, Image } from 'react-native';

const PlaceholderImage = require('./assets/images/background-image.png');

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image source={PlaceholderImage} style={styles.image} />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
    paddingTop: 58,
  },
  image: {
    width: 320,
    height: 440,
    borderRadius: 18,
  },
});

You can also use the SDK for Camera that renders a preview for the device's front or back camera & Notifications that provides an API to fetch push notification tokens and to present, schedule, receive and respond to notifications.

They also provide a step-by-step tutorial that you can follow to get started.

You can read the docs and see the live demo of Hello World on Snack.

It has 28k+ Stars on GitHub and is used by a massive amount of 850k+ developers.

Star Expo ⭐️

Here are some resources that can help you with React.

React Bits - React patterns, techniques, tips, and tricks.
30 Days of React - Step-by-step guide to learn React in 30 days.
React Interview Questions - Top 500 ReactJS Interview Questions & Answers (35k+ Stars).

If you're looking for React-like alternative libraries, you can check out Inferno & Preact.

Didn't I say, that I would cover it all :D

Seriously though, these are some fantastic projects for your React project. I hope you'll improve the ecosystem by contributing to these open source projects.
These projects are very good if you're trying to use your curiosity to build something cool.

As I've mentioned earlier, developer experience (DX) is crucial, and these projects have worked hard to keep it top-notch.

Comment down to let us know which project are you going to use in your react project.

Have a great day! Till next time.

Follow me on GitHub.

Anmol-Baranwal (Anmol Baranwal) · GitHub

Technical Writer (1M+ reads). Software Developer (200+ PRs). 💜 Loves Open Source - Anmol-Baranwal

github.com

Follow Winglang for more content like this.

Winglang Follow

5 Ways to Skin a Lambda Function: A DevTools Comparison Guide

Nathan Tarbert — Tue, 13 Feb 2024 19:13:13 +0000

TL;DR

As the saying goes, there are several ways to skin a cat...in the tech world, there are 5 ways to skin a Lambda Function 🤩

Let's Compare 5 DevTools

✅ Wing
✅ Pulumi
✅ AWS-CDK
✅ CDK for Terraform
✅ Terraform

Introduction

As developers try to bridge the gap between development and DevOps, I thought it would be helpful to compare Programming Languages and DevTools.

Let's start with the idea of a simple function that would upload a text file to a Bucket in our cloud app.

The next step is to demonstrate several ways this could be accomplished.

Note: In cloud development, managing permissions and bucket identities, packaging runtime code, and handling multiple files for infrastructure and runtime add layers of complexity to the development process.

Let's dive into some code!

1. Wing

After installing Wing, let's create a file: main.w

If you aren't familiar with the Wing Programming Language, please check out the open-source repo HERE


bring cloud;

let bucket = new cloud.Bucket();

new cloud.Function(inflight () => {
  bucket.put("hello.txt", "world!");
});

Let's do a breakdown of what's happening in the code above.

bring cloud is Wing's import syntax

Create a Cloud Bucket: let bucket = new cloud.Bucket(); initializes a new cloud bucket instance.

On the backend, the Wing platform provisions a new bucket in your cloud provider's environment. This bucket is used for storing and retrieving data.

Create a Cloud Function: The new cloud.Function(inflight () => { ... }); statement defines a new cloud function.

This function, when triggered, performs the actions defined within its body.

bucket.put("hello.txt", "world!"); uploads a file named hello.txt with the content world! to the cloud bucket created earlier.

Compile & Deploy to AWS

wing compile --platform tf-aws main.w
terraform apply

That's it, Wing takes care of the complexity of (permissions, getting the bucket identity in the runtime code, packaging the runtime code into a bucket, having to write multiple files - for infrastructure and runtime), etc.

Not to mention it generates IAC (TF or CF), plus Javascript that you can deploy with existing tools.

But while you develop, you can use the local simulator to get instant feedback and shorten the iteration cycles.

Wing even has a playground that you can try out in the browser!

2. Pulumi

Step 1: Initialize a New Pulumi Project

mkdir pulumi-s3-lambda-ts
cd pulumi-s3-lambda-ts
pulumi new aws-typescript

Step 2. Write the code to upload a text file to S3.

This will be your project structure.

pulumi-s3-lambda-ts/
├─ src/
│  ├─ index.ts              # Pulumi infrastructure code
│  └─ lambda/
│     └─ index.ts           # Lambda function code to upload a file to S3
├─ tsconfig.json            # TypeScript configuration
└─ package.json             # Node.js project file with dependencies

Let's add this code to index.ts


import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

// Create an AWS S3 bucket
const bucket = new aws.s3.Bucket("myBucket", {
    acl: "private",
});

// IAM role for the Lambda function
const lambdaRole = new aws.iam.Role("lambdaRole", {
    assumeRolePolicy: JSON.stringify({
        Version: "2023-10-17",
        Statement: [{
            Action: "sts:AssumeRole",
            Principal: {
                Service: "lambda.amazonaws.com",
            },
            Effect: "Allow",
            Sid: "",
        }],
    }),
});

// Attach the AWSLambdaBasicExecutionRole policy
new aws.iam.RolePolicyAttachment("lambdaExecutionRole", {
    role: lambdaRole,
    policyArn: aws.iam.ManagedPolicy.AWSLambdaBasicExecutionRole,
});

// Policy to allow Lambda function to access the S3 bucket
const lambdaS3Policy = new aws.iam.Policy("lambdaS3Policy", {
    policy: bucket.arn.apply(arn => JSON.stringify({
        Version: "2023-10-17",
        Statement: [{
            Action: ["s3:PutObject", "s3:GetObject"],
            Resource: `${arn}/*`,
            Effect: "Allow",
        }],
    })),
});

// Attach policy to Lambda role
new aws.iam.RolePolicyAttachment("lambdaS3PolicyAttachment", {
    role: lambdaRole,
    policyArn: lambdaS3Policy.arn,
});

// Lambda function
const lambda = new aws.lambda.Function("myLambda", {
    code: new pulumi.asset.AssetArchive({
        ".": new pulumi.asset.FileArchive("./src/lambda"),
    }),
    runtime: aws.lambda.Runtime.NodeJS12dX,
    role: lambdaRole.arn,
    handler: "index.handler",
    environment: {
        variables: {
            BUCKET_NAME: bucket.bucket,
        },
    },
});

export const bucketName = bucket.id;
export const lambdaArn = lambda.arn;

Next, create a lambda/index.ts directory for the Lambda function code:


import { S3 } from "aws-sdk";

const s3 = new S3();

export const handler = async (): Promise<void> => {
    const bucketName = process.env.BUCKET_NAME || "";
    const fileName = "example.txt";
    const content = "Hello, Pulumi!";

    const params = {
        Bucket: bucketName,
        Key: fileName,
        Body: content,
    };

    try {
        await s3.putObject(params).promise();
        console.log(`File uploaded successfully at https://${bucketName}.s3.amazonaws.com/${fileName}`);
    } catch (err) {
        console.log(err);
    }
};

Step 3: TypeScript Configuration (tsconfig.json)

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

After creating a Pulumi project, a yaml file will automatically be generated. pulumi.yaml

name: s3-lambda-pulumi
runtime: nodejs
description: A simple example that uploads a file to an S3 bucket using a Lambda function
template:
  config:
    aws:region:
      description: The AWS region to deploy into
      default: us-west-2

Deploy with Pulumi

Ensure your lambda directory with the index.js file is correctly set up. Then, run the following command to deploy your infrastructure: pulumi up

3. AWS-CDK

Step 1: Initialize a New CDK Project

mkdir cdk-s3-lambda
cd cdk-s3-lambda
cdk init app --language=typescript

Step 2: Add Dependencies

npm install @aws-cdk/aws-lambda @aws-cdk/aws-s3

Step 3: Define the AWS Resources in CDK

File: index.js


import * as cdk from '@aws-cdk/core';
import * as lambda from '@aws-cdk/aws-lambda';
import * as s3 from '@aws-cdk/aws-s3';

export class CdkS3LambdaStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // Create the S3 bucket
    const bucket = new s3.Bucket(this, 'MyBucket', {
      removalPolicy: cdk.RemovalPolicy.DESTROY, // NOT recommended for production code
    });

    // Define the Lambda function
    const lambdaFunction = new lambda.Function(this, 'MyLambda', {
      runtime: lambda.Runtime.NODEJS_14_X, // Define the runtime
      handler: 'index.handler', // Specifies the entry point
      code: lambda.Code.fromAsset('lambda'), // Directory containing your Lambda code
      environment: {
        BUCKET_NAME: bucket.bucketName,
      },
    });

    // Grant the Lambda function permissions to write to the S3 bucket
    bucket.grantWrite(lambdaFunction);
  }
}

Step 4: Lambda Function Code

Create the same file struct as above and in the pulumi directory: index.ts

import { S3 } from 'aws-sdk';
const s3 = new S3();

exports.handler = async (event: any) => {
  const bucketName = process.env.BUCKET_NAME;
  const fileName = 'uploaded_file.txt';
  const content = 'Hello, CDK! This file was uploaded by a Lambda function!';

  try {
    const result = await s3.putObject({
      Bucket: bucketName!,
      Key: fileName,
      Body: content,
    }).promise();

    console.log(`File uploaded successfully: ${result}`);
    return {
      statusCode: 200,
      body: `File uploaded successfully: ${fileName}`,
    };
  } catch (error) {
    console.log(error);
    return {
      statusCode: 500,
      body: `Failed to upload file: ${error}`,
    };
  }
};

Deploy the CDK Stack

First, compile your TypeScript code: npm run build, then

Deploy your CDK to AWS: cdk deploy

4. CDK for Terraform

Step 1: Initialize a New CDKTF Project

mkdir cdktf-s3-lambda-ts
cd cdktf-s3-lambda-ts

Then, initialize a new CDKTF project using TypeScript:

cdktf init --template="typescript" --local

Step 2: Install AWS Provider and Add Dependencies


npm install @cdktf/provider-aws

Step 3: Define the Infrastructure

Edit main.ts to define the S3 bucket and Lambda function:

import { Construct } from 'constructs';
import { App, TerraformStack } from 'cdktf';
import { AwsProvider, s3, lambdafunction, iam } from '@cdktf/provider-aws';

class MyStack extends TerraformStack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    new AwsProvider(this, 'aws', { region: 'us-west-2' });

    // S3 bucket
    const bucket = new s3.S3Bucket(this, 'lambdaBucket', {
      bucketPrefix: 'cdktf-lambda-'
    });

    // IAM role for Lambda
    const role = new iam.IamRole(this, 'lambdaRole', {
      name: 'lambda_execution_role',
      assumeRolePolicy: JSON.stringify({
        Version: '2023-10-17',
        Statement: [{
          Action: 'sts:AssumeRole',
          Principal: { Service: 'lambda.amazonaws.com' },
          Effect: 'Allow',
        }],
      }),
    });

    new iam.IamRolePolicyAttachment(this, 'lambdaPolicy', {
      role: role.name,
      policyArn: 'arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole',
    });

    const lambdaFunction = new lambdafunction.LambdaFunction(this, 'MyLambda', {
      functionName: 'myLambdaFunction',
      handler: 'index.handler',
      role: role.arn,
      runtime: 'nodejs14.x',
      s3Bucket: bucket.bucket, // Assuming the Lambda code is uploaded to this bucket
      s3Key: 'lambda.zip', // Assuming the Lambda code zip file is named lambda.zip
      environment: {
        variables: {
          BUCKET_NAME: bucket.bucket,
        },
      },
    });

    // Grant the Lambda function permissions to write to the S3 bucket
    new s3.S3BucketPolicy(this, 'BucketPolicy', {
      bucket: bucket.bucket,
      policy: bucket.bucket.apply(name => JSON.stringify({
        Version: '2023-10-17',
        Statement: [{
          Action: 's3:*',
          Resource: `arn:aws:s3:::${name}/*`,
          Effect: 'Allow',
          Principal: {
            AWS: role.arn,
          },
        }],
      })),
    });
  }
}

const app = new App();
new MyStack(app, 'cdktf-s3-lambda-ts');
app.synth();

Step 4: Lambda Function Code

The Lambda function code should be written in TypeScript and compiled into JavaScript, as AWS Lambda natively executes JavaScript. Here's an example index.ts for the Lambda function that you need to compile and zip:


import { S3 } from 'aws-sdk';

const s3 = new S3();

exports.handler = async () => {
  const bucketName = process.env.BUCKET_NAME || '';
  const content = 'Hello, CDKTF!';
  const params = {
    Bucket: bucketName,
    Key: `upload-${Date.now()}.txt`,
    Body: content,
  };

  try {
    await s3.putObject(params).promise();
    return { statusCode: 200, body: 'File uploaded successfully' };
  } catch (err) {
    console.error(err);
    return { statusCode: 500, body: 'Failed to upload file' };
  }
};

You need to compile this TypeScript code to JavaScript, zip it, and upload it to the S3 bucket manually or using a script.

Ensure the s3Key in the LambdaFunction resource points to the correct zip file in the bucket.

Compile & Deploy Your CDKTF Project

Compile your project using npm run build

Generate Terraform Configuration Files

Run the cdktf synth command. This command executes your CDKTF app, which generates Terraform configuration files (*.tf.json files) in the cdktf.out directory:

Deploy Your Infrastructure

cdktf deploy

5. Terraform

Step 1: Terraform Setup

Define your AWS Provider and S3 Bucket
Create a file named main.tf with the following:


provider "aws" {
  region = "us-west-2" # Choose your AWS region
}

resource "aws_s3_bucket" "lambda_bucket" {
  bucket_prefix = "lambda-upload-bucket-"
  acl           = "private"
}

resource "aws_iam_role" "lambda_execution_role" {
  name = "lambda_execution_role"

  assume_role_policy = jsonencode({
    Version = "2023-10-17"
    Statement = [
      {
        Action = "sts:AssumeRole"
        Effect = "Allow"
        Principal = {
          Service = "lambda.amazonaws.com"
        }
      },
    ]
  })
}

resource "aws_iam_policy" "lambda_s3_policy" {
  name        = "lambda_s3_policy"
  description = "IAM policy for Lambda to access S3"

  policy = jsonencode({
    Version = "2023-10-17"
    Statement = [
      {
        Action   = ["s3:PutObject", "s3:GetObject"],
        Effect   = "Allow",
        Resource = "${aws_s3_bucket.lambda_bucket.arn}/*"
      },
    ]
  })
}

resource "aws_iam_role_policy_attachment" "lambda_s3_access" {
  role       = aws_iam_role.lambda_execution_role.name
  policy_arn = aws_iam_policy.lambda_s3_policy.arn
}

resource "aws_lambda_function" "uploader_lambda" {
  function_name = "S3Uploader"

  s3_bucket = "YOUR_DEPLOYMENT_BUCKET_NAME" # Set your deployment bucket name here
  s3_key    = "lambda.zip" # Upload your ZIP file to S3 and set its key here

  handler = "index.handler"
  role    = aws_iam_role.lambda_execution_role.arn
  runtime = "nodejs14.x"

  environment {
    variables = {
      BUCKET_NAME = aws_s3_bucket.lambda_bucket.bucket
    }
  }
}

Step 2: Lambda Function Code (TypeScript)

Create a TypeScript file index.ts for the Lambda function:


import { S3 } from 'aws-sdk';

const s3 = new S3();

exports.handler = async (event: any) => {
  const bucketName = process.env.BUCKET_NAME;
  const fileName = `uploaded-${Date.now()}.txt`;
  const content = 'Hello, Terraform and AWS Lambda!';

  try {
    await s3.putObject({
      Bucket: bucketName!,
      Key: fileName,
      Body: content,
    }).promise();

    console.log('Upload successful');
    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Upload successful' }),
    };
  } catch (error) {
    console.error('Upload failed:', error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Upload failed' }),
    };
  }
};

Deploy

Finally after uploading your Lambda function code to the specified S3 bucket, run terraform apply.

I hope you enjoyed this comparison of five simple ways to write a function in our cloud app that uploads a text file to a Bucket.

As you can see, most of the code becomes very complex, except for one.

Rapping it up!

Click on the picture ⬆️

If you are intrigued about Wing and like how we are simplifying the process of cloud development, please give us a ⭐ star.

Please star ⭐ Wing

The Developer's Toolkit: Your Essential Open-Source DevTools

Nathan Tarbert — Wed, 07 Feb 2024 15:09:18 +0000

Every developer needs a toolkit to streamline their workflow, increase productivity, and tackle some of the most complex tasks efficiently.

Your use case could be development, testing, or project management.

Having the right tools in your back pocket can make or break your development process.

Let's take a look at some of my favorites, and I hope they become your favorites, too!

Let's get started!👇

1. Wing

🔥 A programming language for the cloud

🔥 A unified programming model combining infrastructure and runtime code into one language

Please star ⭐ Wing

2. Inbox Zero

👉 Clean Up Your Inbox In Minutes

👉 Newsletter cleaner, AI automation, cold email blocker, and analytics

Please star ⭐ Inbox Zero

3. Papermark

🚨 The Open-Source DocSend Alternative

🚨 Share pitch decks, sales proposals, and other docs securely with real-time analytics and white-labeling options

Please star ⭐ Papermark

4. Aptabase

📣 Analytics for Apps

📣 Works with the framework of your choice! (JS | NextJS etc.)

Please star ⭐ SoapUI

5. Documenso

🚀 The open source document signing tool

🚀 Integrates with all your favorite tools - Send, connect, receive, and embed everywhere

Please star ⭐ Documenso

6. Flipt

⚡ GitOps-enabled feature management platform for modern engineering teams.

⚡ Follow modern DevOps best practices such as trunk-based development, continuous delivery, and software kill switches all without needing to restart your applications.

Please star ⭐ Flipt

7. OpenStatus

Build trust:

✨ Showcase your reliability to your users, and reduce the number of customer service tickets.

Custom domain

✨ Bring your own domain, and give the status page a personal touch.

Please star ⭐ OpenStatus

Wing Custom Platforms: Transforming Infrastructure Policies into Code

Hasan — Thu, 01 Feb 2024 14:31:57 +0000

Wow it's 2024, almost a quarter of the way through the 21st century, if you are reading this you probably should pat yourself on the back, because you did it!

You have survived the crazy roller coaster ride that has lingered over the last several years, ranging from a pandemic to global insecurity with ongoing wars.

So finally 2024 is here, and we all get to ask ourselves, "Is this the year things finally start going back to normal?"... probably not!

Though, as we all sit on the edge of our seats waiting for the next global crisis (my bingo card has mole people rising to the surface) we can take solace in one silver lining. Wing Custom Platforms are all the rage, and easier than ever to build!

In this blog series, I'm going to be walking through how to build, publish, and use your own Wing Custom Platforms. Now before we get too deep, and since this is the first installment of what will probably be many procrastinated iterations, let's do a quick level set.

Let me introduce Wing

A programming language for the cloud.

Wing combines infrastructure and runtime code in one language, enabling developers to stay in their creative flow, and to deliver better software, faster and more securely.

Please star ⭐ Wing

What Are Wing Custom Platforms?

The purpose of the post is not to explain all the dry details of Wing Platforms, that's the job of the Wing docs (I'll provide reference links down below). Rather we want to get into the fun of building one, so I'll briefly explain.

Wing Custom Platforms offer us a way to hook into a Wing application's compilation process. This is done through various hooks that a custom platform can implement. As of today, some of these hooks include:

preSynth: called before the compiler begins to synthesize, and gives us access to the root app in the construct tree.
postSynth: called right after artifacts are synthesized, and will give us access to manipulate the resulting configuration. In the case of a Terraform provisioner, this is the Terraform JSON configuration.
validate: called right after the postSynth hook and provides the same input, however, the key difference is the passed config is immutable. Which is important for validation operations

Several other hooks exist though, we won't go into all those in this blog.

Let's Get Building!

One more bit of information we need before we start building our very own Custom Platform which is kind of important is, "What is our platform going to do?"

I'm glad you asked! We are going to build a Custom Platform that will enhance the developer experience when working with Terraform-based platforms, some of which come builtin with Wing installation such as tf-aws, tf-azure, and tf-gcp.

The specific enhancement we want to add is the functionality to configure how Terraform state files are managed through the use of Terraform backends. By default, all of the built-in Terraform-based platforms will use local state file configurations, which is nice for quick experimentation, but lacks some rigor for production-quality deployments.

The Goal

Build and publish a Wing Custom Platform that provides a way to configure your Terraform backend state management.

For brevity we will focus on 3 backend types, s3, azurerm, and gcs

Required Materials

Wing
NPM & Node
A bit of Typescript know-how
A wish and a prayer

Creating The Project

To begin let's just create a new npm project, I'm going to be a little bit more bare bones in this guide, so I'll just create a package.json and tsconfig.json

Below is my package.json file, the only real interesting part about it is the dev dependency on @winglang/sdk this is so we can use some of the exposed Platform types, which we will see an example of soon.

{

    "name": "@wingplatforms/tf-backends",
    "version": "0.0.1",
    "main": "index.js",
    "repository": {
        "type": "git",
        "url": "https://github.com/hasanaburayyan/wing-tf-backends"
    },
    "license": "ISC",
    "devDependencies": {
        "typescript": "5.3.3",
        "@winglang/sdk": "0.54.30"
    },
    "files": [
        "lib"
    ]
}

Here is the tsconfig.json Ive omitted a few other details for brevity since some other options are just personal preference. Whats worth noting here is how I have decided to structure the project. All my code will exist in a src folder and my expectations are that output of compilation will be in the lib folder. Now you might set your project up different and thats fine, but its worth explaining if you are just following along.

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "rootDir": "./src",
        "outDir": "./lib",
        "lib": [
            "es2020",
            "dom"
        ],
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./node_modules"
    ]
}

Then to prep our dependencies we can just run npm install

Lets Code!

Okay now that that initial setup is out of the way, time to start writing our Platform!!

First Ill create a file src/platform.ts this will contain the main code for our Platform, which is used by the Wing compiler. The bare minimum code required for a Platform would look like this

import { platform } from "@winglang/sdk";

export class Platform implements platform.IPlatform {
  read-only target = "tf-*";
}

Here we create and export our Platform class, which implements the IPlatform interface. All the platform hooks are optional so we don't have to define anything else for this to technically be valid.

Now the required bit is defining target this mechanism allows a platform to define the provisioning engine and cloud provider it is compatible with. At the time of this blog post, there is not actually an enforcement of this compatibility but... we imagine it works :)

Okay, so we have a barebones Platform but it's not actually useful yet, let's change that! First, we will plan on using environment variables to determine which type of backend our users want to use, as well as what is the key for the state file.

So we will provide a constructor in our Platform:

import { platform } from "@winglang/sdk";

export class Platform implements platform.IPlatform {
    readonly target = "tf-*";
    readonly backendType: string;
    readonly stateFileKey: string;

    constructor() {
        if (!process.env.TF_BACKEND_TYPE) {
            throw new Error(`TF_BACKEND_TYPE environment variable must be set.`)
        }
        if (!process.env.TF_STATE_FILE_KEY) {
            throw new Error("TF_STATE_FILE_KEY environment variable must be set.")
        }

        this.backendType = process.env.TF_BACKEND_TYPE
        this.stateFileKey = process.env.TF_STATE_FILE_KEY
    }
}

Cool, now we are starting to get moving. Our Platform will require the users to have two environment variables set when compiling their Wing code, TF_BACKEND_TYPE and TF_STATE_FILE_KEY for now we will just persist this data as instance variables.

One more housekeeping item we need to do is export our Platform code, to do this let's create an index.ts with a single line that looks like this:

export * from "./platform"

Testing Our Platform

Before we get much further I just want to show how to test your Platform locally to see it working. To test this code we need to first compile it using the command npx tsc and since we already defined everything in our tsconfig.json we will conveniently have a folder named lib that contains all the generated JavaScript code.

Let's create a super simple Wing application to use this Platform with.

// main.w
bring cloud;

new cloud.Bucket();

The above Wing code will just import the cloud library and use it to create a Bucket resource.

Next, we will run a Wing compile command using our Platform in combination with some other Terraform based Platform, in my case it will be tf-aws

wing compile main.w --platform tf-aws --platform ./lib

Note: We are providing two Platforms tf-aws and a relative path to our compiled Platform ./lib The ordering of these Platforms is also important tf-aws MUST come first since its a Platform that implements the newApp() API. We won't dive deeper into that in this post but the reference reading materials down below will provide links if you want to dive deeper.

Now running this code will result in the following error:

wing compile main.w -t tf-aws -t ./lib

An error occurred while loading the custom platform: Error: TF_BACKEND_TYPE environment variable must be set.

Now before you freak out, just know thats one of them good errors :) we can indeed see our Platform code was loaded and run because the Error was thrown requiring TF_BACKEND_TYPE as an environment variable. If we now rerun the compile command with the required variables we should get a successful compilation

TF_BACKEND_TYPE=s3 TF_STATE_FILE_KEY=mystate.tfstate wing compile main.w -t tf-aws -t ./lib

To be extra sure the compilation worked we can inspect the generated Terraform code in target/main.tfaws/main.tf.json

{
  "//": {
    "metadata": {
      "backend": "local",
      "stackName": "root",
      "version": "0.17.0"
    },
    "outputs": {
    }
  },
  "provider": {
    "aws": [
      {
      }
    ]
  },
  "resource": {
    "aws_s3_bucket": {
      "cloudBucket": {
        "//": {
          "metadata": {
            "path": "root/Default/Default/cloud.Bucket/Default",
            "uniqueId": "cloudBucket"
          }
        },
        "bucket_prefix": "cloud-bucket-c87175e7-",
        "force_destroy": false
      }
    }
  },
  "terraform": {
    "backend": {
      "local": {
        "path": "./terraform.tfstate"
      }
    },
    "required_providers": {
      "aws": {
        "source": "aws",
        "version": "5.31.0"
      }
    }
  }
}

We should see that a single Bucket is being created, however it is still using the local Terraform backend and that is because we still have some work to do!

Implementing The postSynth Hook

Since we want to edit the generated Terraform configuration file after the code has been synthesized, we will implement the postSynth hook. As I explained earlier this hook is called right after synthesis completes and passes the resulting configuration file.

What is more useful about this hook is it allows us to return a mutated version of the configuration file.

To implement this hook we will update our Platform code with this

export class Platform implements platform.IPlatform {
  // ... 
  postSynth(config: any): any {
    if (this.backendType === "s3") {
      if (!process.env.TF_S3_BACKEND_BUCKET) {
        throw new Error("TF_S3_BACKEND_BUCKET environment variable must be set.")
      }

      if (!process.env.TF_S3_BACKEND_BUCKET_REGION) {
        throw new Error("TF_S3_BACKEND_BUCKET_REGION environment variable must be set.")
      }

      config.terraform.backend = {
        s3: {
          bucket: process.env.TF_S3_BACKEND_BUCKET,
          region: process.env.TF_S3_BACKEND_BUCKET_REGION,
          key: this.stateFileKey,
        }
      }
    }
    return config;
  }
}

Now we can see there is some control flow logic happening here, if the user wants to use an s3 backend we will need some additional input such as the name and region of the bucket, which we will use TF_S3_BACKEND_BUCKET and TF_S3_BACKEND_BUCKET_REGION to configure.

Assuming all of the required environment variables exist, we can then manipulate the provided config object, where we set config.terraform.backend to use an s3 configuration block. Finally the config object is returned.

Now to see this all in action we will need to compile our code (npx tsc) and provide all four required s3 environment variables. To make the commands easier to read Ill do it in multiple lines:

# compile platform code
npx tsc

# set env vars
export TF_BACKEND_TYPE=s3
export TF_STATE_FILE_KEY=mystate.tfstate
export TF_S3_BACKEND_BUCKET=myfavorites3bucket
export TF_S3_BACKEND_BUCKET_REGION=us-east-1

# compile wing code!
wing compile main.w -t tf-aws -t ./lib

And viola! We should now be able to look at our Terraform config and see that a remote s3 backend is being used:

// Parts of the config have been omitted for brevity
{
  "terraform": {
    "required_providers": {
      "aws": {
        "version": "5.31.0",
        "source": "aws"
      }
    },
    "backend": {
      "s3": {
        "bucket": "myfavorites3bucket",
        "region": "us-east-1",
        "key": "mystate.tfstate"
      }
    }
  },
  "resource": {
    "aws_s3_bucket": {
      "cloudBucket": {
        "bucket_prefix": "cloud-bucket-c87175e7-",
        "force_destroy": false,
        "//": {
          "metadata": {
            "path": "root/Default/Default/cloud.Bucket/Default",
            "uniqueId": "cloudBucket"
          }
        }
      }
    }
  }
}

ITS ALIVE!!!

If you have been following along, pat yourself on the back again! Now on top of surviving the early 2020s you have also written your first Wing Custom Platform!

Now before we go into how to make it available for use to other Wingnuts, lets actually make our code a little cleaner, and a bit more usefully robust.

Supporting Multiple Backends

In order to live up to its name tf-backends it should probably support multiple backends! To accomplish this lets just use some good ol' coding chops to abstract a bit.

We want our Platform to support s3, azurerm, and gcs to accomplish this we just have to define different config.terraform.backend blocks based on the desired backend.

To make this work I'm going to create a few more files:

src/backends/backend.ts

// simple interface to define a backend behavior
export interface IBackend {
  generateConfigBlock(stateFileKey: string): void;
}

Now several backend classes that implement this interface

src/backends/s3.ts

import { IBackend } from "./backend";

export class S3 implements IBackend {
  readonly backendBucket: string;
  readonly backendBucketRegion: string;

  constructor() {
    if (!process.env.TF_S3_BACKEND_BUCKET) {
      throw new Error("TF_S3_BACKEND_BUCKET environment variable must be set.")
    }

    if (!process.env.TF_S3_BACKEND_BUCKET_REGION) {
      throw new Error("TF_S3_BACKEND_BUCKET_REGION environment variable must be set.")
    }

    this.backendBucket = process.env.TF_S3_BACKEND_BUCKET;
    this.backendBucketRegion = process.env.TF_S3_BACKEND_BUCKET_REGION;
  }

  generateConfigBlock(stateFileKey: string): any {
    return {
      s3: {
        bucket: this.backendBucket,
        region: this.backendBucketRegion,
        key: stateFileKey,
      }
    }
  }
}

src/backends/azurerm.ts

import { IBackend } from "./backend";

export class AzureRM implements IBackend {
  readonly backendStorageAccountName: string;
  readonly backendStorageAccountResourceGroupName: string;
  readonly backendContainerName: string;

  constructor() {
    if (!process.env.TF_AZURERM_BACKEND_STORAGE_ACCOUNT_NAME) {
      throw new Error("TF_AZURERM_BACKEND_STORAGE_ACCOUNT_NAME environment variable must be set.")
    }

    if (!process.env.TF_AZURERM_BACKEND_STORAGE_ACCOUNT_RESOURCE_GROUP_NAME) {
      throw new Error("TF_AZURERM_BACKEND_STORAGE_ACCOUNT_RESOURCE_GROUP_NAME environment variable must be set.")
    }

    if (!process.env.TF_AZURERM_BACKEND_CONTAINER_NAME) {
      throw new Error("TF_AZURERM_BACKEND_CONTAINER_NAME environment variable must be set.")
    }

    this.backendStorageAccountName = process.env.TF_AZURERM_BACKEND_STORAGE_ACCOUNT_NAME;
    this.backendStorageAccountResourceGroupName = process.env.TF_AZURERM_BACKEND_STORAGE_ACCOUNT_RESOURCE_GROUP_NAME;
    this.backendContainerName = process.env.TF_AZURERM_BACKEND_CONTAINER_NAME;
  }

  generateConfigBlock(stateFileKey: string): any {
    return {
      azurerm: {
        storage_account_name: this.backendStorageAccountName,
        resource_group_name: this.backendStorageAccountResourceGroupName,
        container_name: this.backendContainerName,
        key: stateFileKey,
      }
    }
  }
}

src/backends/gcs.ts

import { IBackend } from "./backend";

export class GCS implements IBackend {
  readonly backendBucket: string;

  constructor() {
    if (!process.env.TF_GCS_BACKEND_BUCKET) {
      throw new Error("TF_GCS_BACKEND_BUCKET environment variable must be set.")
    }

    if (!process.env.TF_GCS_BACKEND_PREFIX) {
      throw new Error("TF_GCS_BACKEND_PREFIX environment variable must be set.")
    }

    this.backendBucket = process.env.TF_GCS_BACKEND_BUCKET;
  }

  generateConfigBlock(stateFileKey: string): any {
    return {
      gcs: {
        bucket: this.backendBucket,
        key: stateFileKey,
      }
    }
  }
}

Now that we have our backend classes defined, we can update our Platform code to use them. My final Platform code looks like this:

import { platform } from "@winglang/sdk";
import { S3 } from "./backends/s3";
import { IBackend } from "./backends/backend";
import { AzureRM } from "./backends/azurerm";
import { GCS } from "./backends/gcs";
import { Local } from "./backends/local";

// TODO: support more backends: https://developer.hashicorp.com/terraform/language/settings/backends/local
const SUPPORTED_TERRAFORM_BACKENDS = [
  "s3",
  "azurerm",
  "gcs"
]

export class Platform implements platform.IPlatform {
  readonly target = "tf-*";
  readonly backendType: string;
  readonly stateFileKey: string;

  constructor() {
    if (!process.env.TF_BACKEND_TYPE) {
      throw new Error(`TF_BACKEND_TYPE environment variable must be set. Available options: (${SUPPORTED_TERRAFORM_BACKENDS.join(", ")})`)
    }
    if (!process.env.TF_STATE_FILE_KEY) {
      throw new Error("TF_STATE_FILE_KEY environment variable must be set.")
    }
    this.backendType = process.env.TF_BACKEND_TYPE 
    this.stateFileKey = process.env.TF_STATE_FILE_KEY
  }

  postSynth(config: any): any {
    config.terraform.backend = this.getBackend().generateConfigBlock(this.stateFileKey);
    return config;
  }

  /**
   * Determine which backend class to initialize based on the backend type
   * 
   * @returns the backend instance based on the backend type
   */
  getBackend(): IBackend {
    switch (this.backendType) {
      case "s3": return new S3();
      case "azurerm": return new AzureRM();
      case "gcs": return new GCS();
      default: throw new Error(`Unsupported backend type: ${this.backendType}, available options: (${SUPPORTED_TERRAFORM_BACKENDS.join(", ")})`);
    }
  }
}

BOOM!! Our Platform now supports all 3 different backends we wanted to support!

Feel free to build and test each one.

Publishing Our Platform For Use

Now I'm not going to explain all the intricate details about how npm packages work, since I would do a poor job of that as indicated by the fact my below examples will use a version 0.0.3 (third times the charm!)

However if you have followed along thus far you will be able to run the following commands
Note: in order to publish this library you will need to have defined a package name that you are authorized to publish to. If you use mine (@wingplatforms/tf-backends) you're gonna have a bed time

# compile platform code again
npx tsc

# package your code
npm pack

# publish your package
npm publish

If done right you should see something along the lines of

npm notice === Tarball Details === 
npm notice name:          @wingplatforms/tf-backends              
npm notice version:       0.0.3                                   
npm notice filename:      wingplatforms-tf-backends-0.0.3.tgz     
npm notice package size:  36.8 kB                                 
npm notice unpacked size: 119.5 kB                                
npm notice shasum:        0186c558fa7c1ff587f2caddd686574638c9cc4c
npm notice integrity:     sha512-mWIeg8yRE7CG/[...]cT8Kh8q/QwlGg==
npm notice total files:   17                                      
npm notice 
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access

Using The Published Platform

With the Platform created lets try it out.
Note: I suggest using a clean directory for playing with it

Using the same simple Wing application as before

// main.w
bring cloud;

new cloud.Bucket()

We need to add one more thing to use a Custom Platform, a package.json file which only needs to define the published Platform as a dependency:

{
  "dependencies": {
    "@wingplatforms/tf-backends": "0.0.3",
  }
}

With both those files create lets install our custom Platform using npm install

Finally we lets set up all the environment variables for GCS and run our Wing compile command. Note: since we are using a installed npm library we will provide the package name and not ./lib anymore!

export TF_BACKEND_TYPE=gcs
export TF_STATE_FILE_KEY=mystate.tfstate
export TF_GCS_BACKEND_BUCKET=mygcsbucket

wing compile main.w -t tf-aws -t @wingplatforms/tf-backends

Now we should be able to see that the generated Terraform config is using the correct remote backend!

{
  "terraform": {
    "required_providers": {
      "aws": {
        "version": "5.31.0",
        "source": "aws"
      }
    },
    "backend": {
      "gcs": {
        "bucket": "mygcsbucket",
        "key": "mystate.tfstate"
      }
    }
  },
  "resource": {
    "aws_s3_bucket": {
      "cloudBucket": {
        "bucket_prefix": "cloud-bucket-c87175e7-",
        "force_destroy": false,
        "//": {
          "metadata": {
            "path": "root/Default/Default/cloud.Bucket/Default",
            "uniqueId": "cloudBucket"
          }
        }
      }
    }
  }
}

Whats Next?

Now that we have built and published our first Wing Custom Platform, the sky is the limit! Get out there and start building the Custom Platforms to your hearts content <3 and keep a look out for the next addition to this series on Platform building!

In the meantime make sure you to join the Wing Slack community: https://t.winglang.io/slack and share what you are working on, or any issues you run into.

Want to read more about Wing Platforms?

Check out the Wing Platform Docs
Feel free to checkout the full source code at: https://github.com/hasanaburayyan/wing-tf-backends

Please star ⭐ Wing

Cloud, why so difficult? 🤷‍♀️

Elad Ben-Israel — Wed, 24 Jan 2024 17:07:13 +0000

A manifesto for cloud-oriented programming.

Don't get me wrong, I love the cloud! It has empowered me to build amazing things, and completely changed the way I use software to innovate and solve problems.

It's the "new computer", the ultimate computer, the "computerless computer". It can elastically scale, it's always up, it exists everywhere, it can do anything. It's boundless. It's definitely here to stay.

But holy crap, there is no way this is how we are going to be building applications for the cloud in the next decade. As the cloud evolved from "I don't want servers under my desk" to "my app needs 30 different managed services to perform its tasks", we kind of lost track of what a great developer experience looks like.

Building applications for the cloud sometimes feels like spilling my kids' bag of unused Lego blocks all over the living room floor and trying to build a castle. After going through torn up play cards, scary Barbie-doll heads, and leaking dead batteries, you read the instructions the millionth time, only to realize you ended up building basically the same thing you've built last time.

Sorting Lego blocks is fun! It passes the time with the kiddos. It even feeds my OCD… But hell, this is not how I want to build professional software!

Let me try to describe what I and my developer friends are struggling with.

I want to focus on creating value for my users

When I build professional software, I want most of my time to be spent within the functional domain of my application, instead of non-functional mechanics of the platform I use.

It doesn't make sense that every time I want to execute code inside an AWS Lambda function, I have to understand that it needs to be bundled with tree-shaken dependencies, uploaded as a zip file to S3 and deployed through Terraform. Or that in order to be able to publish a message to SNS, my IAM policy must have a statement that allows the sns:Publish action on the topic's ARN. And does every developer need to understand what ARNs are at all?

All that stuff doesn't have anything to do with the value I am trying to create for my users. It's pure mechanics. Can we get rid of it?

I want to be independent

One of the most frustrating and flow killing situations for me as a developer is when I have to stop and wait for someone or something in order to continue.

It's like gliding happily in the air, enjoying the view, beautiful music in the background, and suddenly, BAM! A concrete wall.

This concrete wall takes many shapes and sizes when you build applications for the cloud. It's the DevOps person with an endless ticket queue; it's the IAM policy that needs to be updated; it's the deployment failure that only the external part-time consultant knows how to debug; It's the endless backlog of missing knobs and APIs in the internal platform that we hoped will change everything.

These barriers are frustrating because they force me to switch context, to apply "temporary" security policies and to invent ugly hacks that I don't want to talk about. It's a broken world.

I want to be independent. I want to be able to get things done, to stay in the flow. I want to improve the world one commit at a time, and move on to the next thing after I am finished. I want that dopamine rush of completing a task, not the shameful feeling of yet another unfinished thread.

I want instant feedback

I said I want independence, but don't mistake that for a belief that I write perfect code. Which is why I want to write code with a pencil, not with a pen.

Some developers can spend a full day coding without even invoking their compiler, and at the end of the day, they compile and deploy, and it just works.

I admire them, but I am not that type of developer. No sir. For me it's about iterations, iterations, iterations. I start small, sketch with a light pencil, take a look, erase a bunch of stuff, draw a thicker line, take a step back, squint, draw more and erase more, and take another look, rinse and repeat.

This is why, for me, the single most important thing is iteration speed. The sooner I can run my application and test it, the faster I can go back and iterate. This is where my flow is.

When I started programming, I used Borland C++. It used to take about 100ms to compile and run a program on an IBM PC AT machine (TURBO ON). An average iteration cycle in the cloud takes minutes. Minutes! Sometimes dozens of minutes!

Here's how an iteration looks like in the cloud today: I make a change to my code; then I need to compile it; deploy it to my test account; find my way around the management console to actually trigger it; wait for it to run and go search for the
logs on another service. Then I realize there is an error response that tells me that I'm stupid, because how come I didn't know that I have to pass in Accept-Content: application/json, because otherwise I get some weird result called "XML" that I have no idea what to do with (just kidding, XML is great, no really). Now all over again...

So "write unit tests", you say, in a patronizing attempt to justify the current reality. "Great developers write unit tests". OK! So now I need to take my code, which makes about 20 external API calls, and somehow mock out the API responses by copying and pasting them from outdated documentation, only to figure out that my requests are rejected because I am missing some implicit action in my IAM security statement. We've all been there.

To be honest, give me the developer experience of the 90s. I want to make a change, and I want to be able to test this change either interactively or through a unit test within milliseconds, and I want to do this while sitting in an airplane with no WiFi, okay? (we didn't have WiFi in the 90s).

So this is just a rant?

Hell no! I am a programmer. I sometimes feel like I've been writing software since birth. I've been doing it in socially perilous times, when being a computer geek was not cool.

What I have always loved about being a developer is that if I was not happy with my tools, I could make my own. Building tools is in our DNA, after all - humans have been building tools for over a million years.

And I am not happy with my tools.

In April 2022, I joined forces with Shai Ber, a good friend and a former Microsoft colleague, and we founded [Wing] with the mission to unlock the cloud for developers. We've assembled an incredible crew of beautiful geeks who share our passion for developer experience and open-source and started our journey to empower developers (i.e. ourselves) to solve these fundamental problems.

Compilers to the rescue

So how are we going to solve all of these problems at once?
We are building a programming language for the cloud.

"A programming language!?," you ask. "Doesn't the world have enough programming languages?," "Isn't it really hard to write a compiler?," "What are the chances that developers will want to learn a whole new language?," "Why can't you hack into an existing language toolchain, squint your eyes tight enough and call it a day?"

I am not one to build programming languages on a whim. In fact, I've spent the last five years building the AWS CDK, which is a multi-language library that addresses some of the challenges I am talking about by allowing developers to define cloud infrastructure using their favorite programming language.

To "meet developers where they are" is a beautiful tenet of AWS, and of the CDK, and inspired us to create awesome technology such as JSII and constructs.

But sometimes, "where they are" is not a good enough model for creating the desired experience.

Defining infrastructure with code does enable us to create a higher-level of abstraction, but as long as my application code needs to interact with this infrastructure, the abstraction becomes too leaky. I'm yanked back down to having to understand more than I need to, and I have to be an expert in things like IAM, VPC, ALB, EBS and basically more TLAs than I would ever want to keep in my head.

The languages we use today are all designed around the idea that the computer is a single machine. They've reached the point in which they are able to offer us solid abstractions over these machines. They abstract away the CPU, memory, file system, process management and networking. As a developer, I don't have to care how a file is laid out on disk, or even how much memory I need for my hash map. I simply write readFile() or new Dictionary() and go about my day. Yes, it's not a bad idea for me to have some sense of what's happening under the hood, but I am not forced to.

Most of these languages also offer me type-safety. When I call a function with the wrong number of arguments, I get yelled at by my compiler. I don't have to wait until my application is running only to realize I forget an argument, or passed in the wrong type.

In the cloud, I'm on my own. Every time my code needs to interact with a cloud resource or a service - and that's happening more and more as the industry evolves - I have to leave the comfort and safety of my programming language. I must jump outside the boundaries of the machine and into the wild wild west of the internet, and my compiler is none the wiser.

And suddenly, it's almost painfully obvious where all the pain came from. Cloud applications today are simply a patchwork of disconnected pieces. I have a compiler for my infrastructure, another for my functions, another for my containers, another for my CI/CD pipelines. Each one takes its job super seriously, and keeps me safe and happy inside each of these machines, but my application is not running on a single machine anymore, my application is running on the cloud.

The cloud is the computer.

Wing, a cloud-oriented programming language

When new programming paradigms emerge, it takes languages time to catch up. I used to love building object-oriented code in C, but it was a leaky abstraction. I had to understand how objects are laid out in memory, how V-tables work, and remember to pass the object as the first argument for each function. When programming languages started to support object-oriented concepts as first-class citizens, this paradigm was democratized, and today most developers don't even know what V-tables are, and the world keeps spinning.

Wing, or winglang if you want to be cute about it, has all the good stuff you would expect from a modern, object oriented, strongly-typed and general-purpose language, but it also includes a few additional primitives designed to support the distributed and service-based nature of the cloud as first-class citizens.

Check it out

We have been working on Wing for almost a year now, and I am excited to invite you to check it out and let me know what you think. While still in Alpha and not yet ready for production use, it's already possible to build some real applications with it.

Please star ⭐ Winglang

😎 9 Trending Open Source Projects to Watch for in 2024

Nathan Tarbert — Tue, 23 Jan 2024 14:19:54 +0000

As a developer, who's passionate about open source, I'm constantly watching up-and-coming projects, libraries, and services.

You know the ones, that seem to have that special sauce.

I've put together a small list of what I've seen trending or expect them to in this new year.

Let's take a look at some of the most surprising and impressive projects I've come across lately.

1. Wing

Wing has developed a cloud-oriented programming language called Winglang, designed specifically to address the needs and challenges faced by cloud developers.

Combining infrastructure and runtime code in one language, with a built-in local simulator and observability & debugging console.

Wing reduces cognitive load and context switching, enabling developers to stay in their creative flow.

How Wing boosts your development:

Faster iteration cycles
Localized testing via the Wing Simulator
Deploy to the cloud by writing less code

Please star ⭐ Winglang

2. Maybe

Maybe has recently open-sourced their personal finance + wealth management app

Some features include:

Investment benchmarking
Investment portfolio allocation
Debt insights

Please star ⭐ Maybe

3. Wstunnel

Wstunnel uses the WebSocket protocol which is compatible with http to bypass firewalls and proxies.

This allows you to tunnel whatever traffic you want and access whatever resources/sites you need.

Please star ⭐ wstunnel

4. Spotube

An open-source, cross-platform Spotify client compatible across multiple platforms utilizing Spotify's data API and YouTube (or Piped.video or JioSaavn) as an audio source,
eliminating the need for Spotify Premium.

Btw it's not another Electron app😉

Please star ⭐ Spotube

5. Jujutsu

Jujutsu is a version control system for software projects, written in Rust.

You use it to:

get/make a copy of your code
track changes to the code
publish those changes for others to see and use.

Please star ⭐ Jujutsu

6. Wasp

Wasp (Web Application Specification) is a Rails-like framework for React, Node.js, and Prisma.

Build your app in a day and deploy it with a single CLI command!

Quick start
No Boilerplate
No lock in

Please star ⭐ Wasp

7. Refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Instead of being limited to a set of pre-styled components, Refine provides collections of:

Helper hooks
Components
Providers

Please star ⭐ Refine

8. DbGate

DbGate is a cross-platform database manager, designed to be simple to use and effective when working with more databases simultaneously.

Supported databases:

MySQL
PostgreSQL
SQL Server
Oracle (experimental)
MongoDB
Redis
SQLite
Amazon Redshift
CockroachDB
MariaDB

Please star ⭐ DBGate

9. Ivy

Ivy is an open-source machine learning framework:

Autotune your model
Convert code into any framework
Write framework-agnostic code

Please star ⭐ Ivy

⚡⚡ Level Up Your Cloud Experience with These 7 Open Source Projects 🌩️

Nathan Tarbert — Wed, 06 Dec 2023 14:08:54 +0000

The seven open-source projects I will mention are not only essential tools for cloud-native innovation, but they also offer a strategic advantage in today's fast-paced digital world.

In this article, I have put together key points that set these open-source projects to the level of AWESOME! 🚀

1. Winglang

Wing has introduced a programming language called Winglang, a cloud-oriented programming language that allows developers to build distributed systems, leveraging cloud services as first-class citizens.

The language introduces two execution phases, preflight and inflight, which are connected in a way that delegates the creation of IAM policies and network topologies to the compiler.

This connection helps to explain the value of the inflight and preflight concepts, as it allows developers to focus on business logic instead of cloud mechanics, thereby accelerating iteration cycles and improving the creative flow.

The magic is in the preflight and inflight execution phases:

Preflight: Code that runs once, at compile time, and generates the infrastructure configuration of your cloud application. For example, setting up databases, queues, storage buckets, API endpoints, etc.
Inflight: Code that runs at runtime and implements your application's behavior. For example, handling API requests, processing queue messages, etc. Inflight code can be executed on various computing platforms in the cloud, such as function services (such as AWS Lambda or Azure Functions), containers (such as ECS or Kubernetes), VMs, or even physical servers. 👇

Please star ⭐ Winglang

2. Fission

Fission is a framework for serverless functions on Kubernetes.

Write short-lived functions in any language, and map them to HTTP requests (or other event triggers).
Deploy functions instantly with one command. There are no containers to build, and no Docker registries to manage.

Please star ⭐ Fission

3. OpenFaaS

Run your code anywhere with the same unified experience and deploy OpenFaaS anywhere you have Kubernetes.

Deploy a new function to production within a few minutes, knowing it will scale to meet demand.
Invoke functions through events from Apache Kafka, AWS SQS, Postgresql, Cron, and MQTT.

Please star ⭐ OpenFaaS

4. Space Cloud

Space Cloud is an open-source, kubernetes based platform that lets you build, scale, and secure cloud-native apps at scale.

It provides instant GraphQL and REST APIs for your database and microservices that can be consumed directly from your front end in a secure manner.
Deploys and scales your docker images on Kubernetes.

Please star ⭐ Space Cloud

5. Pulumi

Manage infrastructure, secrets, and configurations intuitively on any cloud.

Author infrastructure code using programming languages you know and love. Write statements to define infrastructure using your IDE with autocomplete, type checking, and documentation.
Test your code with unit tests and deliver it through CI/CD pipelines to validate and deploy to any cloud.

Please star ⭐ Pulumi

6. Gitpod

Be inspired,
~~check dependencies, checkout branch, viewreadme.txt, install tools, run build, run test,~~
start building.

Context-switch between environments, no waiting, no conflicts.
Share preview environments per branch for faster feedback from developers to designers to QA.

Please star ⭐ Gitpod

7. Knative

Knative Serving builds on Kubernetes to support deploying and serving of applications and functions as serverless containers.

Rapid deployment of serverless containers
Automatic scaling up and down to zero
Routing and network programming
Point-in-time snapshots of deployed code and configurations

Please star ⭐ Knative

Thank you for checking out these seven POWERFUL open-source projects that you should consider when building in the cloud.🥇

One of the best ways to support open-source software is with a star 🌟

DEV Community: Winglang

Building a Cloud-Native Spreadsheet Copilot with Winglang and LangChain

Application Workflow with LangChain + Winglang

LangChain Integration Walkthrough

Spreadsheet Copilot Demo

Conclusion

Build a QA Bot for your documentation with LangChain 😻

TL;DR

What is Wing?

Building the frontend with Next.js

How to set up Wing on your computer

How to connect Wing to a Next.js app

Processing user's requests with LangChain and Wing

Wrapping It Up

Building your own ChatGPT Graphical Client with NextJS and Wing 🤯

TL;DR

Introduction

Let's get started!

Create Your Projects

Create your Next.js and Wing apps.

Run your application locally in the Wing simulator

Setting Up Your Backend

Get Your OpenAI API Key

Initializing OpenAI

Testing and Storing The Cloud Secret

Storing The AI’s Responses in the Cloud.

Defining Our Database

Creating API Routes and Logic

Exposing Your API URL to The Frontend

Implementing the Frontend Logic

Running Your Project Locally

Deploying Your Application to AWS

Wrapping It Up

🌝 15 JavaScript frameworks for your next project ⚔

Library vs Framework

1. Wing - A programming language for the cloud.

2. Nest - efficient and scalable server-side applications.

3. Gatsby - best React-based framework with performance, scalability, and security built-in.

4. Nextjs - The React framework for the web.

12 things you didn't know you could do with Nextjs

Anmol Baranwal ・ Feb 20 '24

5. Preact - Fast 3kB React alternative with the same modern API.

6. tRPC - End-to-end typesafe APIs made easy.

A Brief History of API: RPC, REST, GraphQL, tRPC

JS for ZenStack ・ Jan 11 '23

7. Nuxtjs - Intuitive Vue Framework.

8. Ember.js - A JavaScript framework for creating ambitious web applications.

9. Backbone.js - Give your JS App some Backbone with Models, Views, Collections, and Events.

10. Svelte - Cybernetically enhanced web apps.

11. Remix - Build Better Websites.

12. AdonisJS - TypeScript-first web framework for building web apps and API servers.

13. Astro - The web framework for content-driven websites.

14. Fresh - The next-gen web framework.

15. Vue.js - a progressive JavaScript framework for building UI on the web.

25 Vue Tips You Need to Know

Michael Thiessen ・ Jul 21 '21

Winglang Follow

Local simulation of serverless function concurrency

So what is Wing again?

In today's issue

Debugging with breakpoints

Local simulation of serverless function concurrency

A new project template for React with Vite

Adding UI to Wing classes through bring ui

Exposing cloud endpoints for webhook development

Explicit lifting of preflight objects

Changes to default object identifiers

Implicitly loaded platform extensions

Standardize cron expressions

Goodies from the Wingly Update

Wing in the Wild

Community Events

Summary

Build a Full-Stack app using these React libraries and cloud backend.

Wing - A programming language for the cloud.

1. Mantine Hooks - react hooks for state and UI management.

2. React Grid Layout - draggable and resizable grid layout with responsive breakpoints.

3. React Spectrum - A collection of libraries and tools for great UX.

4. Keep React - UI component library for Tailwind CSS & React.js.

5. React Content Loader - SVG-powered component to easily create skeleton loadings.

Adding UI to Wing classes through `bring ui`