diff --git a/README.md b/README.md index be5379fd..db3dcdf2 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@
-

Serverless real-time data sharing infrastructure for frontend developers

- Build multiplayer games, chat apps or anything in between without worrying about the server side, backend logic or even the network! Works with React out of the box! +

Serverless Multiplayer Infrastructure for JavaScript Game Developers

+ Build multiplayer games without worrying about server-side logic, backend infrastructure, or networking. Movex takes care of it all—works with React out of the box!

@@ -29,32 +29,37 @@ ## 🧐 Why Movex -__Movex let's you cut the development effort in half and ship faster by abstracting the backend logic and server-side away! 🎉__ - -With it's unique approach and set of features Movex gives you the freedom to focus only on the front-end while still maintaining all of the control over the App Logic, UI/UX and Authority over Data. - -In addition it comes pre-packed with: -- the ability to keep parts of the shared state private to specific users. [See Secret State](https://www.movex.dev/docs/features/secret_state) -- ensures the minimun amount of data is sent over the wire with each update. [See Deterministic Action Propagation](https://www.movex.dev/docs/features/functional) -- keeps bad actors away by keeping the Data Reconciliation Logic out of the client reach. [See Authoritative Server](https://www.movex.dev/docs/features/server_authoritative) - - -## 🚀 Examples +__Movex cuts your development effort in half and helps you ship faster by abstracting away backend logic and server-side complexity! 🎉__ + +With its unique approach and robust set of features, Movex gives you the freedom to focus solely on the front-end while still maintaining full control over the Game Logic, UI/UX, and Data Authority. + +## ⭐️ Features: +- __Serverless:__ + Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities. [Learn more](https://www.movex.dev/docs/features/serverless). +- __Authoritative Server:__ + By keeping the data reconciliation logic on the server side, Movex keeps bad actors away, ensuring the integrity of your application. [Learn more](https://www.movex.dev/docs/features/server_authoritative). +- __Real-time synchronization:__ + By utilizing the Observable Pattern to monitor state changes in registered resources Movex promptly notifes the UI layer. [See more](https://www.movex.dev/docs/features/realtime) +- __Private State:__ + Movex allows parts of the shared state to remain private to specific users, ensuring that sensitive information is kept secure. [See more](https://www.movex.dev/docs/features/private_state) +- __Efficient Data Flow:__ + Movex ensures that only the minimum required data is transmitted with each update, optimizing performance. (See: [Deterministic Action Propagation](https://www.movex.dev/docs/features/functional#determinstic-action-propagation)) + + +## 💜 Who uses Movex? + + + + Chessroulette | Conect. Play. Stream + + -- **Chat App** - https://github.com/GabrielCTroia/movex-next-chat +## 🚀 Examples & Demos - **Multiplayer Rock Paper Scissors Game** - https://codesandbox.io/s/rps-demo-x877yl - -## ⭐️ Features -- 🤯 __No Backend logic to manage__ - Movex takes care of it for you! [See how](https://www.movex.dev/docs/features/frontend_only). -- 👑 __Authoritative Server__ -- 🤩 __Real-time synchronization__ -- 🤐 __Secret State__ -- 😎 __Follows the Flux API__ -- 😍 __Works with Vanilla JS or any Framework__ +- **Chat App** - https://github.com/GabrielCTroia/movex-next-chat ## 🧙🏽‍♂️ How Movex works - -At the client level, Movex adheres to the [Flux Pattern](https://medium.com/weekly-webtips/flux-pattern-architecture-in-react-35d0b55313f6) to react to UI changes. Additionally, it employs the ["Deterministic Action Propagation Method"](https://www.movex.dev/docs/features/functional#determinstic-action-propagation) to synchronize any state changes with the Global (Master) State which lives on the server. Consequently, this process instantly updates all other peers on the network, ensuring real-time data synchronization. [Learn More](https://www.movex.dev/docs/how). +Movex follows the [Flux Pattern](https://medium.com/weekly-webtips/flux-pattern-architecture-in-react-35d0b55313f6) locally to respond to UI changes. It then employs the [Deterministic Propagation Method](https://www.movex.dev/docs/features/functional#determinstic-action-propagation) to synchronize state changes with the Global State(aka Master State) and all peers in the network. [Learn More](https://www.movex.dev/docs/how).
@@ -65,7 +70,31 @@ At the client level, Movex adheres to the [Flux Pattern](https://medium.com/week ## 👩‍💻 Getting Started -Visit the [Docs](https://www.movex.dev/docs/overview/get_started) to get started with Movex. +#### 1. Install It + +```bash +yarn add movex; yarn add --dev movex-service +``` + +#### 2. Create the Movex Config File + +```ts +export default { + resources: {}, +}; +``` + +#### 3. Start Movex in Dev Mode + +```bash +npx movex dev +``` + +#### 4. Next Steps +To continue with the next steps see [Get Started Docs](https://www.movex.dev/docs/overview/get_started). + +## Documentation +Visit the [Docs](https://www.movex.dev/docs/overview/introduction) to get started with Movex. ## 🙏 Contributing diff --git a/apps/movex-docs/modules/home/HeroSubText.tsx b/apps/movex-docs/modules/home/HeroSubText.tsx index 832a9547..350b22e4 100644 --- a/apps/movex-docs/modules/home/HeroSubText.tsx +++ b/apps/movex-docs/modules/home/HeroSubText.tsx @@ -7,8 +7,9 @@ type Props = { export const HeroSubText: React.FC = (props) => { return (

- Accelerate your development process and deliver faster by abstracting - the backend complexities with Movex! 🚀 + {/* Accelerate your development process and deliver faster by abstracting + the backend complexities with Movex! 🚀 */} + Accelerate your game development and deliver faster by abstracting the backend complexities with Movex—made for JavaScript Game Developers.

); }; diff --git a/apps/movex-docs/modules/home/HeroText.tsx b/apps/movex-docs/modules/home/HeroText.tsx index 30ca4d7e..afef1766 100644 --- a/apps/movex-docs/modules/home/HeroText.tsx +++ b/apps/movex-docs/modules/home/HeroText.tsx @@ -7,11 +7,18 @@ type Props = { export const HeroText: React.FC = (props) => { return (

- Effortless realtime{' '}
+ Serverless{' '} +
+ + Multiplayer Infrastructure + {' '} +
+ for JavaScript Games + {/* Effortless realtime{' '}
data sharing {' '} - infrastructure + infrastructure */} {/* Build{' '} Multiplayer Apps diff --git a/apps/movex-docs/modules/home/homeVars.ts b/apps/movex-docs/modules/home/homeVars.ts index 04a7d031..30307278 100644 --- a/apps/movex-docs/modules/home/homeVars.ts +++ b/apps/movex-docs/modules/home/homeVars.ts @@ -12,7 +12,7 @@ export const features = [ { name: 'Serverless', description: - '“Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities.', + 'Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities.', icon: BoltIcon, link: { label: 'Learn More', @@ -45,7 +45,7 @@ export const features = [ { name: 'Authoritative Server', description: - "To safeguard app logic from potential bad actors, it is processed on the server while remaining abstracted from the developer.", + 'To safeguard app logic from potential bad actors, it is processed on the server while remaining abstracted from the developer.', icon: FlagIcon, link: { label: 'Learn More', @@ -53,16 +53,27 @@ export const features = [ }, color: 'orange-500', }, + // { + // name: 'Typesafe Functional Programming', + // description: + // "Movex is entirely built in TypeScript. If you’re familiar with Redux or the React.useReducer() hook, you’ll feel right at home. If not, getting started with Movex is quick and easy!", + // icon: ShieldCheckIcon, + // link: { + // label: 'Learn More', + // url: '/docs/features/functional', + // }, + // color: 'red-500', + // }, { - name: 'Typesafe Functional Programming', + name: 'Efficient Data Flow', description: - "Movex is entirely built in TypeScript. If you’re familiar with Redux or the React.useReducer() hook, you’ll feel right at home. If not, getting started with Movex is quick and easy!", + 'Movex ensures that only the minimum required data is transmitted with each update, optimizing performance.', icon: ShieldCheckIcon, link: { label: 'Learn More', - url: '/docs/features/functional', + url: 'https://www.movex.dev/docs/features/functional#determinstic-action-propagation', }, - color: 'red-500', + color: 'orange-500', }, { name: 'Open Source', @@ -80,7 +91,7 @@ export const features = [ export const faqs = [ { q: 'What does "No Server Code" or "No Server Hassle" really mean?', - a: "This means you, the developer, don’t need to write, build, distribute, or maintain any server code. Your focus is solely on client-side/local code, as if you were developing for a single player or user, while Movex seamlessly manages the server component for you.", + a: 'This means you, the developer, don’t need to write, build, distribute, or maintain any server code. Your focus is solely on client-side/local code, as if you were developing for a single player or user, while Movex seamlessly manages the server component for you.', link: { label: 'See more here', url: '/docs/features/server_authoritative', @@ -88,7 +99,7 @@ export const faqs = [ }, { q: 'How can there be "Server Authoritative" without a server?', - a: "Spot on, detective! There is indeed a server running, but it’s fully abstracted by Movex and movex-service, so you can focus on development without any hassle.", + a: 'Spot on, detective! There is indeed a server running, but it’s fully abstracted by Movex and movex-service, so you can focus on development without any hassle.', link: { label: 'See more here', url: '/docs/features/server_authoritative', @@ -100,7 +111,7 @@ export const faqs = [ // }, { q: 'What can I build with Movex?', - a: "Movex employs Deterministic Action Propagation to seamlessly transmit Actions (small bits of data) between clients and servers. This approach is particularly effective for games or applications with infrequent state changes, such as turn-based games (e.g., Age of Empires). However, it may not suffice for fast-paced shooter games or applications requiring extensive user input transmitted over the network. Future enhancements are in the works to address these needs as well!", + a: 'Movex employs Deterministic Action Propagation to seamlessly transmit Actions (small bits of data) between clients and servers. This approach is particularly effective for games or applications with infrequent state changes, such as turn-based games (e.g., Age of Empires). However, it may not suffice for fast-paced shooter games or applications requiring extensive user input transmitted over the network. Future enhancements are in the works to address these needs as well!', link: { label: 'Read more about Deterministic Propagation', url: '/docs/features/server_authoritative#determinstic-action-propagation-method', diff --git a/apps/movex-docs/pages/docs/overview/get_started.mdx b/apps/movex-docs/pages/docs/overview/get_started.mdx index e2af8f2b..e12674ca 100644 --- a/apps/movex-docs/pages/docs/overview/get_started.mdx +++ b/apps/movex-docs/pages/docs/overview/get_started.mdx @@ -20,7 +20,7 @@ yarn start yarn add movex movex-react; yarn add --dev movex-service ``` -### 3. Create the Movex Config File +### 2. Create the Movex Config File ```ts copy filename="src/movex.config.ts" export default { @@ -28,13 +28,13 @@ export default { }; ``` -### 2. Start Movex in Dev Mode +### 3. Start Movex in Dev Mode ```bash copy npx movex dev ``` -### 3. Wrap the App in the MovexProvider +### 4. Wrap the App in the MovexProvider ```ts copy filename="src/App.tsx" {4-5, 9-15, 32} import React from 'react'; @@ -73,7 +73,7 @@ export default function App() { } ``` -### 4. Add a Movex Resource +### 5. Add a Movex Resource In this short tutorial we're going to build a Counter App that will sync in real-time with another client out of the box. @@ -139,7 +139,7 @@ export default { }; ``` -### 5. Let's add the Counter Component +### 6. Let's add the Counter Component For this tutorial, we'll keep the UI very basic since it's not the main point. @@ -176,7 +176,7 @@ On line 11 we're binding to the counter resource by rid. This means that now we In the following lines we're rendering a very simple UI, which displays the Counter State at _line 20_ and adding two Buttons which will be responsible for triggering the "Increment" and "Decrement" actions. -### 5. And hook it up with our App +### 7. And hook it up with our App ```ts copy showLineNumbers filename="src/App.tsx" {5-7, 10-13, 22-29, 32-39} import React, { useMemo } from 'react'; @@ -249,7 +249,7 @@ import Image from 'next/image'; height={500} /> -### 5. Let's add the Actions +### 8. Let's add the Actions At this point we can see the state of the Counter Resource but cannot do much with it. @@ -311,7 +311,7 @@ And you should be able to see this: height={500} /> -### 6. Now bring in multi-players +### 9. Now bring in multi-players Open the URL in another browser tab or 2, or even 9 and start clicking the buttons. The changes will be synced in realtime, without any server-side coding. @@ -327,6 +327,6 @@ Open the URL in another browser tab or 2, or even 9 and start clicking the butto The world is your oyster now – go make multiplayer gameees! :D -### 7. Homework +### 10. Homework If you want an extra step, implement the "incrementBy" Action and functionality. diff --git a/apps/movex-docs/pages/index.mdx b/apps/movex-docs/pages/index.mdx index 9e585337..baa97834 100644 --- a/apps/movex-docs/pages/index.mdx +++ b/apps/movex-docs/pages/index.mdx @@ -9,8 +9,8 @@ import { features, faqs, community } from '../modules/home/homeVars';
- - + +
diff --git a/package.json b/package.json index 224f6a14..9b8d08ad 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "build": "nx build movex-demo", "test": "nx run-many --all --target=test --skip-nx-cache", "dev-movex-docs": "npx nx serve movex-docs", - "lint-all-libs": "npx nx run-many --parallel --target=lint --projects=movex-core-util,movex,movex-server,movex-service,movex-react,movex-vue --quiet", + "lint-all-libs": "npx nx run-many --parallel --target=lint --projects=movex-core-util,movex,movex-server,movex-service,movex-react,movex-react-local-master,movex-vue,movex-store,movex-master,movex-specs-util --quiet", "push-all-libs--locally": "cd dist/libs/movex && yalc push && cd -; cd dist/libs/movex-server && yalc push && cd -; cd dist/libs/movex-core-util && yalc push && cd -; cd dist/libs/movex-react && yalc push && cd -; cd dist/libs/movex-service && yalc push && cd -; cd dist/libs/movex-store && yalc push && cd -; cd dist/libs/movex-master && yalc push && cd -;", "push-lib-locally--movex": "cd dist/libs/movex && yalc push && cd -", "push-lib-locally--movex-react": "cd dist/libs/movex-react && yalc push && cd -",