Client-Side UI

What is Kretes

Creating a New Application

Installing

How Kretes Works

Directory Structure

A spec describing what we are going to build in this tutorial


Setup

Specification

Starting the Application

Installing Kretes

React.js

Basic Server-Side Only Application

Writing a Middleware

Kretes in 5 minutes

Using TypeScript

Vue.js 3

ToDo App with Preact

Uploading a File

Your First View

Starting the application

Kretes in a nutshell

Environment variables

Defining the shape of date using TypeScript interfaces


Prototyping with HTML

Preact

Implementing Authentication

First View

Validation

Database

Collections in React.js

Solid.js

WebRPC is a REST/GraphQL alternative for the front-end/back-end communication

Using WebRPC

Routing

Background Processing

Displaying data using collections in React.js


Form Handling in React.js

REST

Using React.js to handle form validations & submissions


RESTful APIs

GraphQL

Creating REST APIs using Kretes controllers & handlers


Fetching Data from a RESTful API with React.js

Auth

Using React Query to integrate with a remote REST API endpoint


Sending Data to a RESTful API with React.js

Fetching from API in React.js using React Query

Server-Side Templating

Nix Integration

Using React Query to mutate state on the server


Optimistic Updates in UI

Sending to API in React.js

Implementing optimistic updates for React.js UIs


Database Setup

Querying Database

Deployment

Inserting into Database

Persisting tasks on the server via REST API


Docker Image

Building a Docker image for a Kretes app


Using Tailwind CSS

Let's use Tailwind CSS to design and build the UI prototype.


Summary

A short Kretes overview: its philosophy and what new it brings to the table

Application Lifecycle <strong class="font-bold">Commands</strong>

Preconfigured Full-Stack <strong class="font-bold">Debugging</strong>

Instant TypeScript <strong class="font-bold">Reloading</strong>

<strong class="font-bold">Dedicated UIs</strong> for Common Tasks

Programming Environment <br /> for <span class="text-blue-500">TypeScript</span>

<span class="text-brand font-bold">SQL</span> is Good Enough</h4>

<span class="text-brand font-bold">TypeScript</span> Everywhere</h4>

<span class="text-brand font-bold">Prototype-based</span> Programming</h4>

<span class="text-brand font-bold">WebAssembly</span> is the Future</h4>

<span class="text-brand font-bold">GraphQL</span> makes APIs great again</h4>

Kretes is built on top of [Snowpack](https://www.snowpack.dev/), a modern build tool for **faster** web development.  In development, client-side assets are **compiled on-demand** when requested. **Hot Reload** is instant and independent of the project size (so called O(1) bundling).


Develop Faster

Kretes uses the [Nix package manager](https://nixos.org/) for dependency management. Your project setup can be easily transferred between different machines, whether **sharing it with coworkers**, or when switching **from development to production environment**.


Share Project Setup

Kretes uses only **one programming language**: TypeScript, for the entire application (front-end to back-end). By using TypeScript across the board, there is just **one ecosystem**, **one tooling** and **one way of hiring** for software teams to learn and integrate.


TypeScript Everywhere

Kretes comes with a (eventually large) library of useful modules which are **developed in a coherent way**. It is an **integrated solution** that optimizes for programmers productivity by **reducing choices** and incorporating community conventions.


All-In-One Solution

Discord

Forum

Twitter

Roadmap

Node.js

PostgreSQL

PostGraphile

Snowpack

esbuild

Tailwind CSS

pnpm

Vue.js

Svelte

...and more

Kretes helps us kick start projects quickly and brings us tools we really like.  We build a lot of prototypes on daily basis and we see great value in integrated,  battery-included solutions.


Dariusz Walczak

I really do enjoy coding. But as CPO of a growing scale-up, well, I am not really  supposed to spend that much time hacking. And not being a JavaScript fan, spending  any amount of time in boilerplate and webpack rituals on a small JS project is  frustrating. Which is why I enjoy Kretes. No nonsense. It hits a nice sweet-spot  for doing a quick TypeScript POC, and it makes it easy to go back to a project a  couple of weeks later. Even when I didn't actually write down WTH I was actually  trying to achieve. And it still feels solid. There's a nice Rails vibe to it I  haven't yet met in the JS world.


Ori Pekelman

I love how Kretes allows to quickly prototype full-stack web apps in TypeScript.  At Xfaang we constantly build and play with different app ideas for our clients  - rapid software development is an important factor. Kretes makes the development  not only easier, but also more enjoyable. It’s a great tool for software  companies to gain a competitive edge.


Piotr Zientara

Kretes brings back the joy of programming by setting up reasonable defaults and  aims to keep you productive. It also makes your app easier to test by taking a  more functional approach. You'll like it!


Emil Ajdyna

As an AI company, we build a lot of prototype apps on top of our algorithmic engines  applied to this or that use case. While not being our core business, building sleak  apps quickly is actually a critical component of what we do. Kretes helps a lot  achieving all that, without nonsense, and it allows the team to be efficient and worriless  on the app side, while focusing on our core, AI problem solving.


Julien Muresianu

JavaScript landscape is fragmented. As a software house we are constantly looking for ways  to reduce the time spent on figuring out how to connect and combine different tools and  frameworks - and Kretes does this very well.


Michał Olczak

Kretes feels extremely fast in the development cycle. It is easy and simple to bootstrap  a new project. It provides a nice structure with convenient defaults. I find it especially  useful for junior developers, they can be much more productive from the get-go, than  wasting time to setup the project on their own. Kretes looks promising.


Benoit Molenda

Software Consultant

At Miquido, we do not limit ourselves to specific solutions. While monitoring the latest  technologies and solutions, we could not be indifferent to Kretes. This framework allows  for a very fast implementation of MVP, which contributes to the improvement of the quality  of delivered applications.


Guide

Tutorial

Integrations

Examples

Cookbook

FAQ

Intro

Quick Start

In Depth

Client-Side UI