Forem: Moritz Roessler

Who wants to be part of an Open Source JavaScript Forum?

Moritz Roessler — Fri, 02 Feb 2024 01:31:26 +0000

Ever wanted to be part of something new? We just stumbled upon the domain https://javascript.forum and thought it's a perfect fit to host our new example app powered by React Server.

If you want to see a helpful community centered around JavaScript happen, make sure to join the forum and engage with the users :)

Together we can build an awesome community with resources for beginners and a place for discussions for senior devs.

Enjoy :)

React Server now has a Community 🥰

Moritz Roessler — Thu, 01 Feb 2024 20:58:15 +0000

If you haven't heard about React Server yet, now is your chance to check it out and engage in it's newly founded community which can be found at https://state-less.cloud/community 🥳

To recap, React Server is a new framework which brings known principles from the frontend world to the backend side.
To mention a few, this means you can now use TSX functional components to write backend services reactively 😱

This means, states, hooks, effects and components are now in the palms of your hands when you write your backend business logic.

Get used to readable and easily refactorable code. Write robust services using principles proven to be applicable to very large production codebases.

The idea is to compose a collection of states into an easily consumable chunk of data paired with their operations on it and send that down to the client which renders them in user facing interface.

That's right, you can pass functions created inside your serverside component from the server to the client and invoke them just like any other function. This makes interaction with the serverside state of a component in React as easy as calling a function provided by a hook. If an operation changes the serverside state of a component it's automatically reflected in your client without further ado. It's an effortless server <-> client 2 way data binding.

Imagine this piece of serverside code which represents a button that can be clicked to increase a counter.

import { Scopes, useState, clientKey } from '@state-less/react-server';
import { ServerSideProps } from './ServerSideProps';

export const HelloWorldExample2 = (props, { key, context })  => {
  // The useState hook looks familiar?
  const [count, setState] = useState(0, {
    key: "count",
    scope: Scopes.Global,
  });

  // A simple function that can be executed from the client side.
  const increase = () => {
    setState(count + 1);
  };

  return (
    // Simply pass down props to the client side.
    <ServerSideProps
      key={clientKey(`${key}-props`, context)}
      count={count}
      increase={increase}
    />
  );
};

This is all the code it needs to run a counter service on a react server instance.

As you can see a single functional component is able to perfectly represent a backend service as component, including all it's needed states and the operations which are defined to mutate that state.

All the data transportation logic and realtime state updates are hidden inside the framework, so you don't need to worry about fetching data at all. Just use a useComponent hook inside your frontend component and it provides you all of the props the serverside component rendered for you.

Try the button at our homepage at https://state-less.cloud and explore the rest of the docs.

And if still need to be convice, read more about the whys here here.

Happy Coding 🤓🥰

Would anyone be interested in a simple Lists App?

Moritz Roessler — Sun, 23 Jul 2023 17:15:52 +0000

Hey guys, I'm looking to build a few applications around my full-stack Framework "React Server".

It's a new Framework which allows you to rapidly prototype reactive full-stack applications by using TSX and hooks on the backend fostering a component driven approach (just like React on the Frontend).

It's easy to use for anyone familiar with React. If you're interested about writing your own web applications which require server side state or logic, check it out at https://state-less.cloud, it's fun!

While thinking about ways to provide more content around React Server, a simple idea I had was a web-app for organizing lists and tasks.

It's simple enough to serve as tutorial and entrypoint for beginners, yet sophisticated enough to demonstrate the capabilities of React Server.

I have been using it to organize my own tasks into lists for a while now and a friend suggested gamifying the concept so you get rewarded when completing tasks. I think this is a good idea and I'm looking for other ideas because I think this could be a useful application for a lot of people.

It's still in a early stage, but feel free to check out the prototype at https://state-less.cloud/lists?fs

Introducing React Server: A New Way to Write Server-Side Code as TSX Components

Moritz Roessler — Fri, 14 Apr 2023 15:20:23 +0000

I'm excited to share a new open-source project I've been working on called React Server. It's a framework that allows you to write your server-side code/backend as TSX components and consume them on the frontend using GraphQL.

The main goal of React Server is to provide a unified interface in the form of React components, making it easier to create a component-driven, modular architecture on the backend. This bridges the gap between server and client, making reactive and real-time server authoritative applications much more straightforward to build.

Some key features of React Server include:

Writing server-side code as TSX components
Consuming backend components on the frontend via GraphQL
React as unified interface for a component-driven architecture
Simplified reactive and real-time server authoritative app development

The project is still in its early stages (pre-alpha), and we're actively seeking feedback, ideas, and contributors. We'd love for you to check it out and let us know what you think. Any input, questions, or suggestions are more than welcome!

You can find the GitHub repository here: React Server GitHub Repo

And the documentation can be found here: React Server Docs

Thanks for taking the time to check out React Server, and I'm looking forward to hearing your thoughts and ideas. Happy coding!