Skip to content

Commit

Permalink
REFACTOR premium page (#6573)
Browse files Browse the repository at this point in the history 
* REFACTOR premium page

* REFACTOR pricing page

* ADD stuff to page

* FIX lint

* FIX lint

* FIX lint

* ADD comment

* CHANGE FAQ

* FIX typo

* REFACTOR readme

* FIX bg color

* FIX link

* FIX img

* FIX target

* ADD stuff

* FIX typos

* REFACTOR landingpage

* FIX lint

* FIX icon
  • Loading branch information
@pubkey
pubkey authored Dec 12, 2024
1 parent 3b2798c commit 6c20327
Show file tree
Hide file tree
Showing 42 changed files with 558 additions and 676 deletions.
341 changes: 73 additions & 268 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@


<!--
| Announcement |
| :--: |
| Please take part in the [RxDB user survey 2023](https://rxdb.info/survey.html). This will help me to better plan the steps for the next major release. (takes about 2 minutes)
| Announcement |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| Please take part in the [RxDB user survey 2023](https://rxdb.info/survey.html). This will help me to better plan the steps for the next major release. (takes about 2 minutes) |
-->

<br />
Expand Down Expand Up @@ -68,6 +68,19 @@

Use the [quickstart](https://rxdb.info/quickstart.html), read the [documentation](https://rxdb.info/install.html) or explore the [example projects](https://github.com/pubkey/rxdb/tree/master/examples).


<h2>
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/people.svg">&nbsp;&nbsp;Used by <b style="color: #e6008d;">many</b>
</h2>

RxDB is a proven technology used by [thousands of developers](https://github.com/pubkey/rxdb/network/dependents) worldwide. With its flexibility, RxDB is used in a diverse range of apps and services.

<a href="https://rxdb.info/#reviews" target="_blank">
<img src="./docs-src/static/files/used-by-many.png" />
</a>
<br />
(<a href="https://forms.gle/7taae27VqLXqd4sF6">add yours</a>)

<h2>
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/multiplayer.svg">&nbsp;&nbsp;Multiplayer realtime applications
<img height="36" src="./docs-src/static/files/icons/with-gradient/text/made-easy.svg">
Expand Down Expand Up @@ -118,6 +131,61 @@ No matter what kind of runtime you have, as long as it runs JavaScript, it can r
</h4>


<h2>
All the features that you need
</h2>

Since its beginning in 2018, RxDB has gained a huge set of features and plugins which makes it a flexible full solution regardless of which type of application you are building. Every feature that you need now or might need in the future is already there.


<table>
<tr>
<td>
<a href="https://rxdb.info/logger.html">Logging</a><br>
<a href="https://rxdb.info/rx-attachment.html">Attachments</a><br>
<a href="https://rxdb.info/orm.html">ORM</a><br>
<a href="https://rxdb.info/transactions-conflicts-revisions.html">Conflict Handling</a><br>
<a href="https://rxdb.info/middleware.html">Middleware</a><br>
<a href="https://rxdb.info/reactivity.html">Signals</a>
</td>
<td>
<a href="https://rxdb.info/rx-state.html">State</a><br>
<a href="https://rxdb.info/backup.html">Backup</a><br>
<a href="https://rxdb.info/replication.html">Replication</a><br>
<a href="https://rxdb.info/rx-server.html">Server</a><br>
<a href="https://rxdb.info/rx-storage.html">Storages</a><br>
<a href="https://rxdb.info/rx-local-document.html">Local Documents</a>
</td>
<td>
<a href="https://rxdb.info/schema-validation.html">Schema Validation</a><br>
<a href="https://rxdb.info/key-compression.html">Compression</a><br>
<a href="https://rxdb.info/migration-schema.html">Migration</a><br>
<a href="https://rxdb.info/encryption.html">Encryption</a><br>
<a href="https://rxdb.info/crdt.html">CRDT</a><br>
<a href="https://rxdb.info/population.html">Population</a>
</td>
</tr>
</table>

<!-- - [Logging](https://rxdb.info/logger.html)
- [Attachments](https://rxdb.info/rx-attachment.html)
- [ORM](https://rxdb.info/orm.html)
- [Conflict Handling](https://rxdb.info/transactions-conflicts-revisions.html)
- [Middleware](https://rxdb.info/middleware.html)
- [Signals](https://rxdb.info/reactivity.html)
- [State](https://rxdb.info/rx-state.html)
- [Backup](https://rxdb.info/backup.html)
- [Replication](https://rxdb.info/replication.html)
- [Server](https://rxdb.info/rx-server.html)
- [Storages](https://rxdb.info/rx-storage.html)
- [Local Documents](https://rxdb.info/rx-local-document.html)
- [Schema Validation](https://rxdb.info/schema-validation.html)
- [Compression](https://rxdb.info/key-compression.html)
- [Migration](https://rxdb.info/migration-schema.html)
- [Encryption](https://rxdb.info/encryption.html)
- [CRDT](https://rxdb.info/crdt.html)
- [Population](https://rxdb.info/population.html) -->


<h2>
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/rocket.svg">&nbsp;&nbsp;Quick start
Expand Down Expand Up @@ -190,271 +258,6 @@ await db.heroes.find({
```



Continue with the [quickstart here](https://rxdb.info/quickstart.html).



<h2>
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/checklist.svg">&nbsp;&nbsp;More Features (click to toggle)
</h2>



<details>
<summary>
<b>Subscribe to events, query results, documents and event single fields of a document</b>
<p>

RxDB implements [rxjs](https://github.com/ReactiveX/rxjs) to make your data reactive.
This makes it easy to always show the real-time database-state in the dom without manually re-submitting your queries.
You can also add [custom reactiveness libraries](https://rxdb.info/reactivity.html) like signals or other state management.</p>

</summary>

```javascript
db.heroes
.find()
.sort('name')
.$ // <- returns observable of query
.subscribe( docs => {
myDomElement.innerHTML = docs
.map(doc => '<li>' + doc.name + '</li>')
.join();
});
```

![reactive.gif](docs-src/static/files/reactive.gif)

</details>

<details>
<summary>
<b>MultiWindow/Tab</b>
<p>

RxDB supports multi tab/window usage out of the box. When data is changed at one browser tab/window or Node.js process, the change will automatically be broadcasted to all other tabs so that they can update the UI properly.

</p>
</summary>

![multiwindow.gif](docs-src/static/files/multiwindow.gif)

</details>

<details>
<summary>
<b>EventReduce</b>
<p>
One big benefit of having a realtime database is that big performance optimizations can be done when the database knows a query is observed and the updated results are needed continuously. RxDB internally uses the <a href="https://github.com/pubkey/event-reduce">Event-Reduce algorithm</a>. This makes sure that when you update/insert/remove documents,
the query does not have to re-run over the whole database but the new results will be calculated from the events. This creates a huge performance-gain
with zero cost.
</p>
</summary>

### Use-Case-Example

Imagine you have a very big collection with many user-documents. At your page you want to display a toplist with users which have the most `points` and are currently logged in.
You create a query and subscribe to it.

```js
const query = usersCollection.find().where('loggedIn').eq(true).sort('points');
query.$.subscribe(users => {
document.querySelector('body').innerHTML = users
.reduce((prev, cur) => prev + cur.username+ '<br/>', '');
});
```

As you may detect, the query can take very long time to run, because you have thousands of users in the collection.
When a user now logs off, the whole query will re-run over the database which takes again very long.

```js
await anyUser.incrementalPatch({loggedIn: false});
```

But not with the EventReduce.
Now, when one user logs off, it will calculate the new results from the current results plus the RxChangeEvent. This often can be done in-memory without making IO-requests to the storage-engine. EventReduce not only works on subscribed queries, but also when you do multiple `.exec()`'s on the same query.

</details>

<details>
<summary>
<b>Schema</b>
<p>

Schemas are defined via [jsonschema](http://json-schema.org/) and are used to describe your data.</p>

</summary>

```javascript
const mySchema = {
title: "hero schema",
version: 0, // <- incremental version-number
description: "describes a simple hero",
primaryKey: 'name', // <- 'name' is the primary key for the collection, it must be unique, required and of the type string
type: "object",
properties: {
name: {
type: "string",
maxLength: 30
},
secret: {
type: "string",
},
skills: {
type: "array",
maxItems: 5,
uniqueItems: true,
item: {
type: "object",
properties: {
name: {
type: "string"
},
damage: {
type: "number"
}
}
}
}
},
required: ["color"],
encrypted: ["secret"] // <- this means that the value of this field is stored encrypted
};
```

</details>

<details>
<summary>
<b>Mango / Chained queries</b>
<p>
RxDB can be queried by standard NoSQL mango queries like you maybe know from other NoSQL Databases like <b>mongoDB</b>.

Also you can use the [query-builder plugin](https://rxdb.info/rx-query.html#query-builder) to create chained mango-queries.
</p>
</summary>

```javascript

// normal query
myCollection.find({
selector: {
name: {
$ne: 'Alice'
},
age: {
$gt: 67
}
},
sort: [{ age: 'desc' }],
limit: 10
})

// chained query
myCollection
.find()
.where('name').ne('Alice')
.where('age').gt(18).lt(67)
.limit(10)
.sort('-age')
.exec().then( docs => {
console.dir(docs);
});
```

</details>

<details>
<summary>
<b>Encryption</b>
<p>

By setting a schema-field to `encrypted`, the value of this field will be stored in encryption-mode and can't be read without the password. Of course you can also encrypt nested objects. Example:</p>

</summary>

```json
{
"title": "my schema",
"properties": {
"secret": {
"type": "string"
}
},
"encrypted": [
"secret"
]
}
```

</details>



<details>
<summary>
<b>Import / Export</b>
<p>

RxDB lets you import and export the whole database or single collections into json-objects. This is helpful to trace bugs in your application or to move to a given state in your tests.</p>

</summary>

```js
// export a single collection
const jsonCol = await myCollection.dump();

// export the whole database
const jsonDB = await myDatabase.dump();

// import the dump to the collection
await emptyCollection.importDump(json);


// import the dump to the database
await emptyDatabase.importDump(json);
```

</details>

<details>
<summary>
<b>Key-Compression</b>
<p>

Depending on which adapter and in which environment you use RxDB, client-side storage is [limited](https://pouchdb.com/2014/10/26/10-things-i-learned-from-reading-and-writing-the-pouchdb-source.html) in some way or the other. To save disc-space, RxDB uses a schema based [keycompression](https://github.com/pubkey/jsonschema-key-compression) to minimize the size of saved documents. This saves about 40% of used storage.</p>

</summary>

Example:

```js
// when you save an object with big keys
await myCollection.insert({
firstName: 'foo'
lastName: 'bar'
stupidLongKey: 5
});

// key compression will internally transform it to
{
'|a': 'foo'
'|b': 'bar'
'|c': 5
}

// so instead of 46 chars, the compressed-version has only 28
// the compression works internally, so you can of course still access values via the original key.names and run normal queries.
console.log(myDoc.firstName);
// 'foo'
```

</details>

And for any other use case, there are [many more plugins and addons](https://rxdb.info/quickstart.html).


<h2>
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/rocket.svg">&nbsp;&nbsp;Get started
</h2>
Expand All @@ -466,10 +269,12 @@ Get started now by [reading the docs](https://rxdb.info/quickstart.html) or expl
<img height="16" width="16" src="./docs-src/static/files/icons/with-gradient/contribute.svg">&nbsp;&nbsp;Support and Contribute
</h2>

- **Leave a Star ☝️**
- [Check out how you can contribute to this project](https://rxdb.info/contribution.html).
- [Read this when you have found a bug](./orga/bug-checklist.md)
- [Buy access to the premium plugins](https://rxdb.info/premium)
- [Join us at discord to get help](https://rxdb.info/chat)
- [Follow us at LinkedIn](https://www.linkedin.com/company/rxdb/)
- [Give Feedback (anonymous)](https://forms.gle/vGaZB7zrub1hgqDk8)

<!--
Expand Down
4 changes: 2 additions & 2 deletions docs-src/docs/alternatives.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Alternatives for realtime offline-first JavaScript applications and local databases
title: Alternatives for realtime local-first JavaScript applications and local databases
slug: alternatives.html
description: Explore real-time, offline-first JS alternatives to RxDB. Compare Firebase, Meteor, AWS, CouchDB, and more for robust, seamless web/mobile app development.
description: Explore real-time, local-first JS alternatives to RxDB. Compare Firebase, Meteor, AWS, CouchDB, and more for robust, seamless web/mobile app development.
---


Expand Down
2 changes: 1 addition & 1 deletion docs-src/docs/articles/in-memory-nosql-database.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const db = await createRxDatabase({
```


Also the [memory synced RxStorage](../rx-storage-memory-synced.md) exists as a wrapper around any other RxStorage. The wrapper creates an in-memory storage that is used for query and write operations. This memory instance is replicated with the underlying storage for persistence. The main reason to use this is to improve initial page load and query/write times. This is mostly useful in browser based applications.
Also the [memory mapped RxStorage](../rx-storage-memory-mapped.md) exists as a wrapper around any other RxStorage. The wrapper creates an in-memory storage that is used for query and write operations. This memory instance is replicated with the underlying storage for persistence. The main reason to use this is to improve initial page load and query/write times. This is mostly useful in browser based applications.


## Use Cases for RxDB
Expand Down
Loading

0 comments on commit 6c20327

Please sign in to comment.