jazz Landing page copy

whats jazz trying to sell (pick 1, the rest is just a bonus)

replace traditional tech stacks
- this is a big bold claim. why should i steer away from the old reliable proven-and-tested way?
local-first
a solution for building collaborative apps
better UX or better DX?

if thats hard to answer.. think of what does jazz do that makes you think to use it instead of x

and what is x?

questions

how can i see the data for my app?
where is my data being stored? aside from the local state
does mesh exist or is it coming soon? (im quite sure it exists at this point but i have no idea how to begin so it kinda looks like just an idea)
are CoValues just a collective term for CoMap CoList etc
what does "generalized" mean

ideas

show react code where a user changes data in a form (with useState, onChange etc) vs the jazz way
and other traditional way vs jazz way

related products

TLDR: i dont really know where the data is going

Sep 27 '24 17:09 trishalim

Hey @trishalim thanks for collecting your thoughts on this. Let's discuss it here in public, might be interesting for folks to follow along (you can also reply with GitHub comments from within Linear if that's more comfortable)

This should probably be broken into several issues, but let's discuss all of them here for now.

First I really appreciate your encouragement to focus on one main message, and all of your suggestions are good.

I would say the main story is actually "replace traditional tech stacks, for vastly better DX"

better UX, good collaboration/multiplayer and local-first are bonuses is my opinion
an important way to make that "replace everything" hard-sell softer is to focus on greenfield apps for now. I think a good slogan to use somewhere is "build your next app with Jazz"
the x that Jazz replaces is typically Databases + APIs + Blob Storage + some client-side state handling. Jazz replacing that much is what makes it so powerful but also what makes it an extraordinary claim that requires extraordinary evidence
- it also replaces many uses of message queues, but since people encounter these less frequently in normal stacks maybe we can make the diagram & the story simpler by removing them from the "before" stack?

Regarding your questions (they're important!):

how can i see the data for my app?

We're working on something called the Jazz inspector. Currently you have to set it up manually but then it gives you a graphical representation of all state stored for a specific user. Integrating this more tightly as a debug tool with any app that uses Jazz would go a long way in making it clearer "what Jazz does / where your data is"

where is my data being stored? aside from the local state

On a sync & persistence server, either Jazz Mesh or one you run yourself with npx jazz-run sync. The peer address you specify when setting up a Jazz context points to the server you want to use.

does mesh exist or is it coming soon?

It exists, is the default sync & persistence server and powers all of the example and real apps we have. I think what would really help make it more real is implementing the developer sign-up flow for a proper API key and having at least a minimal dashboard. We can do actual metering & billing later, but it would be good to have this flow for purely psychological reasons ("it's real & ready")

are CoValues just a collective term for CoMap CoList etc

Yes, can we make this clearer?

what does "generalized" mean

In traditional backends, your API contains a lot of app-specific business logic that is part of what makes your app your app. In Jazz, important topics like auth, permissions and state sharing are solved in a generalised (app-independent) way, which means all jazz apps can share the same syncing & persistence server and they can have all business logic in the client (or in lightweight server-side workers, to talk to external APIs)

Can you think of a better way of saying this succinctly?

ideas

These are both great and would be two perfect illustrations to back up the two messages

Jazz is like magical useState
Jazz replaces entire backends

Sep 30 '24 09:09 aeplay

@aeplay

"replace traditional tech stacks, for vastly better DX"

Great to have clarity on this. If that's what we want to focus on, then that means "instant sync" no longer fits as a headline, right? "build your next app with Jazz" would be closer to it. It sounds like Jazz gets you faster from your idea to a functional app.

the x that Jazz replaces is typically Databases + APIs + Blob Storage + some client-side state handling

It would be great to have a section to explain each of those + about the sync

developer sign-up flow for a proper API key and having at least a minimal dashboard for purely psychological reasons

This is a great idea

Build your next app with instant sync

Jazz is the open-source framework for building full-stack apps with real-time data sync across users and devices. We take care of your database, APIs, message queues, UI states, file uploads, and more, so that you can focus on shipping.

This one is more aligned to "replace traditional tech stacks, for vastly better DX"

Full-stack development made easy

Jazz is the open-source framework for building full-stack apps, without 90% of the complexity. Real-time sync, auth, permissions, instant UI updates, and more. It all works from day one.

I don't know if it's accurate to say full-stack though

App development made easy

Jazz is the open-source framework for building apps without 90% of the backend and infrastructure complexity. Real-time sync, storage, auth, permissions, instant UI updates, file uploads, and more. It all works from day one.

Or this

Sep 30 '24 15:09 trishalim

Yeah especially the last one is really getting there for me, will think some more about it.

Thanks for your exploration

Sep 30 '24 16:09 aeplay

To reiterate what was said in the call: https://www.instantdb.com/ is a "common" alternative, with good DX and storytelling, but lacking in features (such as permissions)

Oct 07 '24 12:10 trishalim

Gathering feedback from hacker news

These are the doubts:

"I'm more than a little worried about the following all being Coming Soon (cursors and carets, 2 way sync, video presence and calls). All of these are the key reasons I would be evaluating this framework to handle my data. All of these are not fully implemented yet."
"People will be quick to create apps with this. But what happens if I want to implement something that is not supported by the framework yet?"
"It's neat that it's quick to start, but I think that's mostly because the framework has only been evaluated by making tiny toy examples."
"Its one thing to use this service on the basis of encryption claims - its another thing to have to clean up the mess from a forgotten API key being leaked somewhere... is there, therefore, a third party involved in an audit of Jazz?"
"Plus the sync only works between clients AFAICT — literally all the listed backends are also “coming soon”. Which is troubling. When will backends be supported?"
"I worry they’re going to be too rigid for some applications."
"Nice, but react."

Comparisons

Firebase
InstantDB

Other feedback

"Where are the information about the company? I cannot find an About Us, where they are based, etc?"
Broken email newsletter
"your website hijacked the back button, I had to spam click back like 30 times to get back to this hacker news comment thread"

Oct 08 '24 09:10 trishalim

Relevant:

Namya @ Supafast on Twitter / X

Oct 08 '24 12:10 trishalim

Using other products to explain Jazz could also be helpful (seeing how Firebase and InstantDB keeps coming up). Examples:

Instant is a modern Firebase. We make you productive by giving your frontend a real-time database.
Supabase is an open source Firebase alternative.
iPhone described as "a widescreen iPod with touch controls"

Or comparison pages like Ghost vs Substack

Oct 08 '24 12:10 trishalim

Based on the structure I came up with, here's a few ways we can proceed (in no particular order):

Rewrite Jazz Mesh section to mention blob storage. In the features section, replace "data & blob storage" with "File uploads".
In the docs, add a section that talks about the data structures, First-class files & binary data, Secure permissions, authorship & teams, auto-sub. This allows us to be more flexible in removing/simplifying these in the homepage. Right now, if we do that, we lose information.
Move auth into features section. Create a section dedicated to "coming soon" features (cursors, sync to db, video). 3 looks great in a grid.
Move auth into features section so that we have a 3-col grid instead of 4-col.
In hero, summarize the most important features in a grid (3-4 items)
"How does jazz work" section - this one is the most challenging

Oct 10 '24 17:10 trishalim

https://www.convex.dev/

Oct 10 '24 19:10 trishalim

Example of a feature section with loads of info

Supafast Sample Work

Here they divide the feature section into categories, and have "additional features" at the end

https://www.figma.com/proto/MR9TL5Jk74aS1dPTIVfRL7/Supafast-Sample-Work?page-id=0%3A1&type=design&node-id=43300-11495&viewport=16585%2C3430%2C0.89&t=KMbDkYpGMZ9sb8CT-1&scaling=min-zoom

Oct 10 '24 19:10 trishalim

Experimenting with the hero

Oct 10 '24 20:10 trishalim

Love it @trishalim. In general I'm not a huge fan of center-aligned layouts, please may you try what it looks like left-aligned? We'll want to put mini-code examples on the right side anyways

Oct 11 '24 08:10 aeplay

@aeplay What code example were you thinking?

Oct 11 '24 09:10 trishalim

@trishalim Something like

Device A (some abstract frame representing a device)

const chat = useCoState(Chat, props.chatID);

return (
  <ChatInput
    onSubmit={text => {
      const msg = Message.create({ text }, { owner: chat._owner })
      chat.push(msg);
    }}
  />
)

Device B

const chat = useCoState(Chat, props.chatID);

return (
  <ChatBody>
    {chat?.map(msg => msg && <ChatBubble msg={msg} key={msg.id} />)}
  </ChatBody>
)

Showing mutation and subscription and implied sync.

Thoughts?

Oct 11 '24 09:10 aeplay

@aeplay it's not very clear what's going on there

how about we show some code

const chat = useCoState(Chat, props.chatID);
const text = "Hi! Welcome to the chat room."

chat.push(Message.create(
  { text }, 
  { owner: chat._owner)
));

and then a mobile device with the chat app open that shows that message

I still don't like it.

Oct 11 '24 11:10 trishalim

I still don't like it.

😂

what do you think would be better?

Oct 11 '24 11:10 aeplay

@aeplay thinking but haven't come up with anything yet

Oct 11 '24 11:10 trishalim

@aeplay what we're trying to communicate are

good DX, easy/simple code
sync

the example would be a real chat app. no login screen

hero

Oct 11 '24 11:10 trishalim

This is better, I like what you've left out and that you added the schema but I almost want a step 3 that shows how the UI is subscribed to changes. I know it's a lot, but I think it might be doable.

I'm also thinking... devs should be able to "imagine" the UI and by having lots of code we're speaking to them more directly - i.e. we might not even need a visual of the UI

Oct 11 '24 12:10 aeplay

@aeplay so 3 code snippets and no UI. will try

Oct 11 '24 12:10 trishalim

hero (2)

Oct 11 '24 12:10 trishalim

Nice! A couple more comments:

it would be good to have useCoState in step 3
the explanation for step 3 should be something about how the UI updates on both local mutations and remote changes from other users
not sure about the handwritten font

Oct 11 '24 12:10 aeplay

For the explanation, how about "Instant UI updates synced across users and devices, no queries needed."

I used the handwritten font to separate explanation, kinda like a whiteboard (it goes with the handwritten arrow as well). It's the first handwritten font I found. We can find a better one. Or we can find another way to differentiate the explanations (through color maybe).

Oct 11 '24 12:10 trishalim

"Instant sync & UI updates across users and devices"

Thoughts about https://fonts.google.com/specimen/Kalam?preview.text=Instant%20sync%20%26%20UI%20updates%20across%20users%20and%20devices&classification=Handwriting&sort=relevance
?

Oct 11 '24 12:10 aeplay

Kalam