00:00:00
but just check out how fast this
00:00:04
is I can't even type this fast enough
00:00:07
look at how incredibly fast it is to
00:00:10
load all of this
00:00:13
data zero sync is the local first
00:00:16
platform of my dreams and I truly
00:00:19
believe this thing is going to change
00:00:21
the game forever in how we build web
00:00:24
apps because the demo I'm about to show
00:00:26
you is incredibly good and I've been
00:00:30
using this tool for the past few months
00:00:33
I I I was one of the first people to get
00:00:35
access to zero uh before it was in Alpha
00:00:39
and I got a demo of this zero bugs repo
00:00:44
way back then and my jaw was on the
00:00:46
floor the whole time this thing
00:00:49
absolutely rips and let me tell you just
00:00:53
a little bit about this it's from the
00:00:54
creators of replicas so uh they have a
00:00:57
lot of experience building sync systems
00:00:59
and local first platforms repash was a
00:01:02
really great platform you've seen me
00:01:03
talk about it on this channel where you
00:01:06
did the mutations client side and it
00:01:09
sent a message to your server you then
00:01:11
personally had to parse those patch
00:01:14
messages and then manipulate the
00:01:17
database on your own server code and
00:01:20
that was great but it was a lot of work
00:01:22
it was a lot of work to both deal with
00:01:25
the patch messages as well as create the
00:01:27
patch messages from when you're pulling
00:01:29
information you had to set up server set
00:01:31
server sent events you had to do a whole
00:01:33
lot just to get the kind of Baseline
00:01:36
functionality that you'd want from one
00:01:38
of these platforms and while I did
00:01:40
really love using replic cach it always
00:01:42
felt like I was doing too much now zero
00:01:46
really solves every single one of those
00:01:49
problems in the best way possible now
00:01:51
let me tell you about some of the
00:01:53
problems that zero sols that other local
00:01:55
first platforms have one you can bring
00:01:58
your own database this U some of the
00:01:59
these platforms they want to be your
00:02:01
database they want to be your store
00:02:03
there's a a platform I really liked
00:02:04
called instant DB that's trying to be
00:02:06
like a a Firebase competitor that one
00:02:09
you have to store all of your data
00:02:11
inside of their database well this you
00:02:13
can bring your own postgress database
00:02:16
and not every feature of postgress is
00:02:18
supported but a good amount of them are
00:02:20
and we'll talk about that in just a
00:02:22
second either way you bring your own DB
00:02:24
which means you can bring your own data
00:02:26
two you can host it yourself there's a
00:02:29
zero server you can host yourself you're
00:02:31
not paying someone to host this server
00:02:34
for you it's not on a third-party server
00:02:36
you can host it anywhere you'd like
00:02:39
yourself which I know is exciting for a
00:02:42
lot of people given that a lot of these
00:02:43
platforms don't give you that option uh
00:02:46
three it's open source you can see the
00:02:48
source it's great uh got to love an open
00:02:50
source platform for many reasons uh but
00:02:52
me personally I just like having that
00:02:54
assurance that it will exist even if the
00:02:56
company that is running the servers is
00:02:58
no longer existing or something like
00:03:00
that again you can host it on your own
00:03:02
infrastructure uh four it is fast as
00:03:05
hell um it's fast it's incredibly fast
00:03:07
to use you'll see in just a second just
00:03:09
how very fast it is with no effort from
00:03:12
the user's part many of these other
00:03:14
things can be very fast but they require
00:03:16
a lot of mental overhead to get there
00:03:18
and five really is that it is easy
00:03:22
you're not having to worry about the
00:03:23
sync system you're not having to worry
00:03:25
about the Cloud Server whatever you're
00:03:27
doing server you're seriously you're
00:03:29
writing mutations you're writing F
00:03:31
statements directly in your client side
00:03:33
code and everything is happening behind
00:03:35
the scenes now you still get access to
00:03:37
be able to fine-tune uh permissions and
00:03:40
things like that but you're not having
00:03:42
to worry about actually writing code
00:03:44
that saves to the database itself it's
00:03:46
really Exquisite and I'll show you all
00:03:48
of that and more so let's take a look at
00:03:50
this demo before I show you any a bit
00:03:52
how it works but this is the zero bugs
00:03:55
demo I'll make a uh this available this
00:03:57
is a public site this the zero team has
00:04:00
been working on this demo for a while to
00:04:01
just show you how fast this is so first
00:04:03
and foremost you click into an issue and
00:04:05
you can see how fast it is they also
00:04:07
added keyboard shortcuts in here so if I
00:04:09
hit the J key it goes to the next issue
00:04:12
they did this so that you can see just
00:04:15
truly how fast loading data is in this
00:04:18
platform again this data is persisting
00:04:19
to a database right so we're loading at
00:04:23
at some point we're loading from a
00:04:24
database that's loading into your local
00:04:27
data the site loading from that local
00:04:28
data you mutate that local data and
00:04:30
behind the scenes it sends patch
00:04:32
messages but just check out how fast
00:04:35
this
00:04:37
is I can't even type this fast enough
00:04:40
look at how incredibly fast it is to
00:04:43
load all of this data and you might be
00:04:46
thinking all right maybe it's pre-loaded
00:04:47
all of these well I refresh look I hit
00:04:49
it with a refresh ah look at that I
00:04:53
cannot stress enough how amazing this is
00:04:58
and and you will find this to be even
00:05:00
that much cooler when you see the type
00:05:02
of code you use to create things like
00:05:04
this and likewise yeah you need to be
00:05:06
logged in to create an issue but you
00:05:08
know what every single thing on this
00:05:10
site feels as fast as humanly possible
00:05:13
it is just shocking um the whole thing
00:05:17
is shocking honestly um and I felt this
00:05:21
way when I got the demo and I was really
00:05:25
like wow this is a good this is a good
00:05:28
demo right and so I wanted to take some
00:05:31
time and I've been working with this uh
00:05:32
I've been working on like the spel
00:05:34
bindings for it I've been just using
00:05:36
this platform to build several things
00:05:37
for a little bit here and I got to say
00:05:40
in practice it is as good as it is to
00:05:44
use as it is to develop on here this is
00:05:46
just so so how is this this fast well
00:05:50
it's this fast because if we head into
00:05:51
our Dev tools inside of application it's
00:05:54
storing your information in a local
00:05:56
database and anytime you change anything
00:05:59
or you load anything or you you anytime
00:06:02
you do anything the first thing it does
00:06:04
is pull it from the local database and
00:06:06
then behind the scenes it handles that
00:06:08
sync it handles that push and
00:06:10
persistence to your database so now that
00:06:13
you've gotten the zbug demo right it's
00:06:15
their kind of red carpet demo the thing
00:06:17
they want you to see uh let's take a
00:06:19
look at a quick demo that I threw
00:06:20
together so to show you this in action I
00:06:22
want to show you this really quick
00:06:23
here's first and foremost I'm updating
00:06:25
the database on every keystroke so if I
00:06:28
just hit like that and I refresh you can
00:06:30
see it's not only persisting to the
00:06:32
local database but it's already updated
00:06:33
the database remotely as well it's that
00:06:37
fast and I can save this with every
00:06:39
single keystroke you can see I hit it
00:06:40
with the refresh and you still get near
00:06:42
instantaneous loads this is incredible
00:06:45
this is in development this is not even
00:06:47
a production build you can see I'm
00:06:48
running it on my local host and
00:06:50
furthermore let me show you a little bit
00:06:52
of what you can do with this thing I
00:06:54
created this quick little survey app
00:06:55
which uh Believe It or Not survey apps
00:06:57
are a little bit complex and and mine is
00:06:59
still just verely getting there but
00:07:01
let's go ahead and I'm going to edit one
00:07:02
of these surveys and I'll expand this to
00:07:05
show you in here that this right here is
00:07:08
an anonymous window so it's not logged
00:07:10
in it's not even in the it's not in the
00:07:13
same browser profile this is an
00:07:14
incognito window and since a lot of this
00:07:17
stuff is happening through websockets
00:07:19
you get real time for free so I can say
00:07:24
what
00:07:26
really is My AG again and you can see as
00:07:30
I'm typing here it's updating here the
00:07:32
most incredible thing about all of this
00:07:34
again is at any given point I refresh it
00:07:36
it's persisting it's persisting to the
00:07:38
remote and the local database I can even
00:07:40
change maybe the type of question that
00:07:43
is in the survey uh this undefined is a
00:07:45
a my bug on my part here but uh really
00:07:49
pretty really pretty neat what is going
00:07:53
on man I just love this let me show you
00:07:56
the code that it takes to make this okay
00:07:58
now my code is going to be the spelt
00:08:00
version of this I'm using my own spelt
00:08:02
Bindings that I have available on GitHub
00:08:04
but for the most part let me tell you
00:08:06
what you do you create a zero instance
00:08:09
so I'm creating a z now I'm putting this
00:08:12
into a local store but uh don't worry
00:08:15
about that I'm creating a z instance
00:08:17
with the following things I'm grabbing
00:08:18
the user ID from a JWT I give it the
00:08:21
path to the public server I give it a
00:08:24
schema of which I've created from zero
00:08:26
and I'm giving it a JWT for my op okay
00:08:30
so that's creating Z as an instance now
00:08:33
anytime I want to do anything with this
00:08:35
I use Z and I'm bringing Z in from my
00:08:39
from my cache context so this is just Z
00:08:42
right here and I'm able to say z. query
00:08:46
and then the data type and then I can
00:08:48
use their own language zql I grab one of
00:08:51
them you can even do relations here so
00:08:53
for each survey I want to grab all of
00:08:55
the questions and inside of the
00:08:57
questions I want to grab the answers too
00:08:59
and then I want to grab the responses
00:09:01
this is the entirety of the code it
00:09:04
takes to get that Dynamic responsive
00:09:07
data loading that's it I just wrap it in
00:09:09
this new query uh to create a class now
00:09:12
in the react version and the solid
00:09:15
version there are hooks there's uh
00:09:17
platforms for them to use Query and you
00:09:20
basically do the same thing where you're
00:09:21
passing in z. query. whatever and the
00:09:24
same thing goes for mutations as well so
00:09:27
anytime you can see I'm going to answer
00:09:29
here I'm using cache. z. mutate then the
00:09:33
collection. update and then I'm just
00:09:35
passing in my information in here or an
00:09:38
insert for creating information as well
00:09:41
let's take a look at the schema really
00:09:43
quick because it's really not that
00:09:45
complex I got to restart typescript
00:09:46
that's why I'm getting this an underline
00:09:48
here but you're just running this create
00:09:50
table schema I'm creating a profile that
00:09:52
has the following columns I'm creating a
00:09:55
user schema that has the following
00:09:56
columns and then I give it a
00:09:58
relationship where I set up my
00:10:00
relationships now I also have a drizzle
00:10:02
schema for migrations and those types of
00:10:04
things but if you're good with postgress
00:10:06
or you can write my sequel by hand or
00:10:08
you write your your migrations by hand
00:10:09
you could do that uh that's that's no
00:10:11
problem I use drizzle because I'm not
00:10:13
good at that stuff uh so I end up having
00:10:15
kind of two schemas I know there are
00:10:17
some folks working on drizzle two schema
00:10:20
translation and stuff which I personally
00:10:21
would love to have so um maybe at some
00:10:23
point that will exist either way you
00:10:25
create this schema from here you drop in
00:10:30
in create a schema and that gives you
00:10:31
your schema here of which you pass into
00:10:33
things and everything becomes fully
00:10:34
typed you can see I can export any of my
00:10:36
types from here but anytime I do queries
00:10:39
as well uh that information becomes
00:10:41
fully typed and in fact I can show you
00:10:43
that here we have a simple query surveys
00:10:46
where we're we're quering to find a
00:10:48
survey where it matches the page progams
00:10:50
and we're grabbing one of them you can
00:10:51
see that it has all of the information
00:10:54
here exactly and that's incredible man
00:10:57
all this stuff is is nicely typed so I
00:10:58
can even see I have a a type issue here
00:11:01
um but it's awesome okay let's get back
00:11:05
to the schema here I'm going to show you
00:11:06
permissions really quick I haven't fully
00:11:08
set up permissions in fact I just have
00:11:09
undefined for everything just to open
00:11:11
them up but the way you handle
00:11:13
permissions is uh typically through a
00:11:15
JWT where you're giving zero the uh the
00:11:18
code to decode your JWT and that kind of
00:11:22
spits out your off as off data right
00:11:24
here and then you can say uh you can
00:11:27
write your own functions like I'm going
00:11:28
to allow this if logged in and then you
00:11:32
get to utilize this CMP to say all right
00:11:35
this is utiliz this is allowed wherever
00:11:38
the user ID in the data incoming is
00:11:40
equal to that same user ID that is
00:11:44
stored within the JWT so you have full
00:11:47
access to not only set up your
00:11:49
permissions for reading but also writing
00:11:51
updating Etc um that's all within here
00:11:54
I'm going to be working on much more
00:11:55
in-depth examples in fact uh you
00:11:57
remember I did a local first tutorial
00:11:59
using replicas I'm going to redo that
00:12:01
using zero and you're going to just be
00:12:03
shocked at how much easier it is so
00:12:04
before we get out of here I wanted to
00:12:06
show you just a little bit of the zero
00:12:07
docks in fact uh they have a whole lot
00:12:09
of stuff in there's some really good
00:12:11
quick starts if you're a react user if
00:12:13
you're a solid user you're going to be
00:12:15
eating very well because there are great
00:12:17
Integrations there's great
00:12:18
documentations there's full stack uh
00:12:21
versions where you have o and everything
00:12:22
like that like for instance for my spelt
00:12:25
version of this app I had to build in my
00:12:27
own o system so I had to write my my own
00:12:30
off system I'll make this public too
00:12:32
this is in my drop in repo so I wrote my
00:12:34
own off system works nice either way uh
00:12:38
either way you can use all kinds of O
00:12:40
system whether that's open o or anything
00:12:42
like that um as far as things go here
00:12:45
you can connect to postgress super
00:12:47
easily you set it via an EnV variable
00:12:49
there's not much there supported
00:12:51
postgress features is the only thing
00:12:52
that's really um something you want to
00:12:54
spend some time with
00:12:56
here because you can see that does
00:12:59
accept all of these things where you can
00:13:01
use an enum and in your schema you use
00:13:04
this um likewise Json jsonb dates time
00:13:08
stamps all that stuff so a lot of the
00:13:10
the basic features most features in
00:13:11
postgress are are utilized there is some
00:13:14
stuff in here so you might want to take
00:13:16
a look at it if you're a heavy postris
00:13:18
user for me I'm like always working with
00:13:20
the basics that goes deep inside of the
00:13:22
schema stuff that we talked about the
00:13:24
zql as they call it is the Z zero query
00:13:28
language which I've personally found as
00:13:30
far as om query languages to go to be
00:13:33
extremely straightforward um order by
00:13:36
where so if find issue where and then
00:13:39
grab one of them otherwise it will grab
00:13:41
an array uh relationships are incredibly
00:13:45
easy writing data is via inserts or
00:13:47
updates like I showed before oth again
00:13:50
is what I mentioned permissions is how I
00:13:53
mention but it goes much deeper than I
00:13:54
showed or am doing you can even preload
00:13:57
data with the preload method on here it
00:14:01
also supports schema versions as well so
00:14:03
you can version your schema which is
00:14:06
really super nice for people who want to
00:14:08
make sure they're managing everything
00:14:09
correctly uh deployment again uh there's
00:14:12
a Docker image you can use to deploy
00:14:14
zero cash uh for the zero server and for
00:14:17
the most part again you're going to be
00:14:19
just deploying that server you're going
00:14:20
to use it as a URL connect it to your
00:14:22
app and there is your server um there's
00:14:24
some interesting stuff in here but it's
00:14:26
fairly trivial to get going so this
00:14:28
stuff is all amazing you want to check
00:14:30
out the road map this is an alpha still
00:14:33
this is an alpha so there's going to be
00:14:36
bugs there will be issues um like I said
00:14:38
I've been using this since the apis have
00:14:40
been changed so I'm very used to things
00:14:42
changing within zero uh but in it's
00:14:45
current iteration I'm extremely stoked
00:14:47
for it looks like they're trying to get
00:14:48
to Beta in Q2 of
00:14:50
2025 um so this is a library that is
00:14:53
definitely in flux still but if you are
00:14:56
as excited about this demo the Z debugs
00:14:59
demo just how fast this stuff is as I am
00:15:02
check out zero sync this is the platform
00:15:05
of my dreams and I do feel like this is
00:15:07
going to be the first platform that
00:15:09
really takes local first into a position
00:15:12
where a lot of people are going to be
00:15:14
using it because it is really really
00:15:18
super impressive and I think people are
00:15:20
going to start talking about this so if
00:15:22
you'd like to see more local first
00:15:24
content on this channel let me know my
00:15:26
name is Scott as always again I love
00:15:28
this stuff and I will be doing full-on
00:15:31
tutorials whether it is react spelt uh
00:15:34
any of that stuff let me know what you
00:15:36
want to see from this do you have any
00:15:38
questions or comments about zero do you
00:15:40
have any concerns about it is there
00:15:42
anything that you are skeptical about in
00:15:44
this platform have you tried zbug if not
00:15:47
I'll link this demo below and you can
00:15:49
give it a try check this stuff out
00:15:52
though and if you want to follow along
00:15:53
with my survey app or anything like that
00:15:56
I'm building it in my drop in repo I'll
00:15:58
also make that available in the
00:16:00
description below what I'm doing
00:16:01
actually is a starter kit for zero um
00:16:04
and I want it to be very meteor in felt
00:16:06
like so out of the box you get templates
00:16:09
for logging in you get user accounts you
00:16:11
get local first you get um you get the
00:16:13
websocket you get real time and you get
00:16:16
some base Styles in a grid system so hey
