SkyMass: A New Way to Build Web Apps

Are you looking for a new way to build web apps?
A more efficient way to quickly create a useful web app for your internal APIs?

In the past few months, I had the pleasure of working with SkyMass on several projects, which did quite well. Instead of reinventing the wheel each time by starting a ReactJS app and starting (almost from) zero, I could quickly declare with SkyMass the main components and have something up in the air in hours/days and not weeks/months.

What?

SkyMass, or “UI as a Service,” is a revolutionary new platform that allows developers to quickly and easily create web apps with less code.

For a good reason, we saw cloud services rising in adoption in the past decade. There are many benefits to focusing on your competitive advantage and not reinventing the wheel repeatedly.

Why would you want to build your own storage (e.g., AWS S3) or Compute servers that run containers (e.g., AWS Lambda or GCP Cloud Run)?

In the same logic, why would you want to build your UI from scratch?

This is where SkyMass is coming to help.

You get the UI/UX out of the box with all the best practices of:

• Performance – SkyMass is serving your UI, so you don’t need to worry about scaling, load balancers, and caching at the edge.

• Layout – Grid, Mobile version, complex components like Tables, Maps.

• Security – Authentication, Encryption, Updates.

• Constant updates – Each new version of the libraries you use in your project will be constantly updated. It’s improving not only the performance of the interface but also the security.

• Hosting – Yep, you don’t need to worry about setting up and protecting a server. The beauty of SkyMass is that you only need to invest in your APIs, and you do it anyway, right?

So you can focus on your service rather than investing hours in maintaining the growing requirements of your frontend application.

Tell Me More

SkyMass is a serverless platform that allows developers to create web apps with minimal setup and configuration. It will support various programming languages, including JavaScript, Python, and Java.

At this stage, it’s supporting JavaScript/TypeScript.

One of the main benefits of SkyMass is the ability it gives developers to quickly and easily create web apps with less code than a traditional ReactJS/VUE/Angular app.

For example, a ReactJS app requires the developer to write code to create the components, set up the routing, and configure the state. With SkyMass, the developer can create the same web app with a few lines of code. The code is written in a declarative style, which makes it easier to read and understand.

When we talk about less code, it’s usually 10x less. We know you are reading code much more than you are writing it – so the advantage here is going to compound the life cycle of your application.

SkyMass also has a range of features that make it easier to develop web apps. It has built-in support for authentication, data storage, and API integration, making it easy to deploy and manage web apps.

Show me the code

Let’s see how we can build an app with ~50 lines of code that give us the full functionality of the ‘hello world’ of the JS world: ‘ToDo App.’

Install

mkdir skymass & cd skymass
npm init -y
npm install @skymass/skymass

The Classic Hello World

import { SkyMass } from "@skymass/skymass";

const sm = new SkyMass({ key: process.env["SKYMASS_KEY"] });

sm.page("/hello_world", (ui) => {
  const name = ui.string("name", {
    label: "Please type your name",
  });
  ui.show('Hello, ${name.val || "World"}!');
});

Yes! You can see we have two-way binding out of the box.

You can run it yourself and start hacking on it with the following:

SKYMASS_KEY=<your_skymass_key> npx nodemon hello.mjs
A bit more – The ToDo App
import { SkyMass } from "@skymass/skymass";

const sm = new SkyMass({ key: process.env["SKYMASS_KEY"] });
let id = 1;
const TODOS = [
  { id: id++, todo: "Buy milk", priority: "low", done: false },
  { id: id++, todo: "Set up webserver", priority: "med", done: false },
  { id: id++, todo: "Build SkyMass app", priority: "high", done: true },
];

function addTodo({ todo, priority }) {
  TODOS.push({ id: id++, todo, priority, done: false });
}

function updateTodo(id, done) {
  const index = TODOS.findIndex((todo) => todo.id === id);
  if (index !== -1) TODOS[index] = { ...TODOS[index], done };
}

function deleteTodo(id) {
  const index = TODOS.findIndex((todo) => todo.id === id);
  if (index !== -1) TODOS.splice(index, 1);
}

sm.page("/todo", async (ui) => {
  ui.md' ✅ Todo List';

  // 👉 Use a form to group todo, priority and the add button
  const newTodo = ui.form("new_todo", {
    fields: {
      todo: ui.string("todo", {
        placeholder: "New todo",
        required: true,
      }),

      priority: ui.radioGroup("priority", {
        options: ["low", "medium", "high"],
        label: "Priority",
        defaultVal: "medium",
      }),
    },
    action: ui.button("add", { label: "Add" }),
  });

  // 👉 A much nicer way to handle clicks/events
  if (newTodo.didSubmit) {
    addTodo(newTodo.val); // e.g. { todo: "...", priority: "medium"}
  }

  const todoList = ui.table("todo_list", TODOS);
  const [selectedTodo] = todoList.selection;

  // Handle the 'done' action
  const doneBtn = ui.button("done", { label: "Mark as Done" });
  if (selectedTodo && doneBtn.didClick) {
    updateTodo(selectedTodo.id, false);
  }
  // Handle the delete action
  const delBtn = ui.button("del", { label: "Delete" });
  if (selectedTodo && delBtn.didClick) {
    deleteTodo(selectedTodo.id);
  }
});

It’s only ~50 lines of code and we have a web application that contains the data layer, CRUD operations, and even log-in (with SkyMass, you get it for ‘free’ – no need to code it).

The application is leveraging the ui.form component. You can see how clear it’s to use a form and get the user’s events from it.

If you are excited, try to replace the data model we put (at line 6) with your own database.
One of the superpowers of SkyMass is the ability to work with any data source out there. If you wish to see a complete example of leveraging Postgres – Here you have one.

Bottomline

In conclusion, SkyMass is a revolutionary new platform allowing developers to create less code web apps. It’s a great way to get started with web development, and it’s perfect for designing web apps that need complex data integrations. Thus, you want tables (with sorting, filtering, search out of the box), charts, and some forms.

Basically, we are talking here on 90% of the business applications you wish to see, no?

Why not give it a try in your next web app project?

You can start with this simple example to create a CRUD web application.

Be strong 👊🏽