WEBVTT

1
00:00:00.027 --> 00:00:02.547
Let me show you around
the Elements program itself in case

2
00:00:02.587 --> 00:00:06.467
you want to dive into any of the
commands and use them yourself.

3
00:00:06.507 --> 00:00:08.987
You can always just use the AI chat agent

4
00:00:09.027 --> 00:00:11.067
and it will do all of these
things on your behalf,

5
00:00:11.107 --> 00:00:14.727
but I think it's good to know that
the underlying programs exist,

6
00:00:14.767 --> 00:00:17.367
so if you ever need to go down and work
with them directly, you can do that.

7
00:00:17.407 --> 00:00:20.747
In the terminal, if you already have
the server running, press the Q key.

8
00:00:20.787 --> 00:00:24.577
That will exit out and you should
still be in your project directory.

9
00:00:25.107 --> 00:00:29.627
Elements is just a program,
so if I type elements and the help flag,

10
00:00:29.667 --> 00:00:33.397
you'll see the various programs that
you can run as part of Elements.

11
00:00:34.167 --> 00:00:37.387
The first command listed is man,
and that stands for manual.

12
00:00:37.427 --> 00:00:40.867
If you want to read about how to do
a particular task in the manual,

13
00:00:40.907 --> 00:00:44.087
you can say elements man and
then search for different tasks.

14
00:00:44.127 --> 00:00:46.947
There's create for creating new projects,

15
00:00:46.987 --> 00:00:49.087
start for starting up the server
like we've been doing,

16
00:00:49.127 --> 00:00:52.417
a build command, test command,
install, uninstall, db.

17
00:00:52.547 --> 00:00:55.207
There's a ton of commands here to look at.
But let me just show you around

18
00:00:55.247 --> 00:00:58.177
a couple of the most popular
things you're going to do.

19
00:00:58.347 --> 00:01:02.467
I've shown you how to create an application
using Visual Studio Code's Command

20
00:01:02.507 --> 00:01:06.487
Palette, but you can also create a new
application by using elements create

21
00:01:06.527 --> 00:01:08.597
and then just the name of the project.

22
00:01:08.867 --> 00:01:12.527
You might be used to this kind of way
of doing things if you're working in Rails,

23
00:01:12.567 --> 00:01:15.747
for example. The next
command is elements build.

24
00:01:15.787 --> 00:01:19.487
When I type this, it's going to immediately
connect to the project server.

25
00:01:19.527 --> 00:01:21.117
Notice how fast that happened.

26
00:01:21.227 --> 00:01:25.007
And that's because it didn't actually perform
the build when I typed elements build.

27
00:01:25.047 --> 00:01:26.567
The build has already happened.

28
00:01:26.607 --> 00:01:31.307
The project server keeps the build up
to date in real time as files change.

29
00:01:31.347 --> 00:01:34.927
And so when I type elements build,
it's just asking the server what

30
00:01:34.967 --> 00:01:39.207
the state of the build is. And I get
back a green OK, and that happens,

31
00:01:39.247 --> 00:01:41.467
and I might be getting
the order of magnitude wrong,

32
00:01:41.507 --> 00:01:43.577
but I think that's about 19 microseconds.

33
00:01:43.967 --> 00:01:46.567
If the build state changes
and I get an error,

34
00:01:46.607 --> 00:01:49.927
you'll see this UI update
immediately with those errors.

35
00:01:49.967 --> 00:01:54.617
And so it's a real-time build state
user interface. Now I'll press Q.

36
00:01:56.007 --> 00:02:00.147
And one more note on elements build
is that if you have multiple agents

37
00:02:00.187 --> 00:02:04.287
working on your project, they can all
use elements build at the same time.

38
00:02:04.327 --> 00:02:07.367
So you can have concurrent clients
connecting to the project server, which

39
00:02:07.407 --> 00:02:11.417
makes Elements a fantastic environment
for working with lots of agents at once.

40
00:02:11.487 --> 00:02:15.087
But it's also useful just for running
different types of commands on the project.

41
00:02:15.127 --> 00:02:18.537
For example, if I want to install a package,
I can type elements install.

42
00:02:18.627 --> 00:02:21.927
And I don't know, I'm not being very creative,
let's just install the mime package.

43
00:02:21.967 --> 00:02:24.907
And when you do that, it will
install the package very quickly.

44
00:02:24.947 --> 00:02:26.427
Let's do it one more time. There we go.

45
00:02:26.467 --> 00:02:28.967
Now that it's in warm cache,
we want to have some good numbers.

46
00:02:29.007 --> 00:02:32.807
So you can install a package and then
the build will be updated automatically

47
00:02:32.847 --> 00:02:36.717
since we now have a new package and
it affects the state of the build.

48
00:02:37.407 --> 00:02:40.717
The next command you'll likely
want to use is elements db.

49
00:02:40.867 --> 00:02:43.507
Elements db is going
to drop you into a database

50
00:02:43.547 --> 00:02:45.577
shell for your application's database.

51
00:02:45.647 --> 00:02:47.127
And if I do backslash d,

52
00:02:47.167 --> 00:02:51.667
you can see some of the tables that were
created for this particular application.

53
00:02:51.707 --> 00:02:52.907
Now, this is just the boilerplate app,

54
00:02:52.947 --> 00:02:55.447
so I don't have any actual
application tables here.

55
00:02:55.487 --> 00:02:56.567
These are all Elements tables.

56
00:02:56.607 --> 00:02:59.927
But if you had created an application,
you will see your own tables in here.

57
00:02:59.967 --> 00:03:03.387
And you can run database
queries directly against them.

58
00:03:03.427 --> 00:03:04.727
And that's actually one
of the greatest benefits

59
00:03:04.767 --> 00:03:08.177
of Elements is that all of your
database is in one place.

60
00:03:08.267 --> 00:03:11.667
You can combine lots of different
applications that previously would have been

61
00:03:11.707 --> 00:03:15.247
across maybe different subscriptions
and put them into one database where

62
00:03:15.287 --> 00:03:20.447
your agents or yourself can go in and do
things for your business or run business

63
00:03:20.487 --> 00:03:24.477
queries and figure out what's going on.
So backslash q out of that.

64
00:03:25.147 --> 00:03:28.957
The next command that you'll likely
want to know about is elements test.

65
00:03:29.047 --> 00:03:32.827
Now, in any application, the agent
is going to write lots of tests,

66
00:03:32.867 --> 00:03:36.277
and tests are useful if they're
fast enough to be useful.

67
00:03:36.347 --> 00:03:39.307
And in an agentic way of building,
you need your tests to be really,

68
00:03:39.347 --> 00:03:42.027
really quick so that when
an agent builds a new feature,

69
00:03:42.067 --> 00:03:45.527
it can just run elements test,
or as part of the elements build,

70
00:03:45.567 --> 00:03:46.727
you'll get test results as well.

71
00:03:46.767 --> 00:03:48.347
And know in microseconds whether

72
00:03:48.387 --> 00:03:50.807
or not it broke something
that was written months ago.

73
00:03:50.847 --> 00:03:54.187
And that can often happen if your application
gets bigger and bigger and bigger,

74
00:03:54.227 --> 00:03:55.467
you write a new feature

75
00:03:55.507 --> 00:03:58.027
and suddenly something that's
been working for months breaks.

76
00:03:58.067 --> 00:03:59.377
We call that a regression.

77
00:03:59.487 --> 00:04:01.667
Tests help prevent regressions.

78
00:04:01.707 --> 00:04:04.367
And tests in Elements are extremely fast.

79
00:04:04.407 --> 00:04:08.287
We have multiple processes running
your tests concurrently so that even

80
00:04:08.327 --> 00:04:11.777
if a test needs to be run again,
it typically only takes a few milliseconds.

81
00:04:12.147 --> 00:04:16.007
Only tests that are affected
by a change will be rerun.

82
00:04:16.047 --> 00:04:19.007
Otherwise, the previous state
of the test is presented to you.

83
00:04:19.047 --> 00:04:23.427
And they're hot reloaded just like
any other part of the application.

84
00:04:23.467 --> 00:04:25.867
So tests are extremely fast in Elements.

85
00:04:25.907 --> 00:04:27.937
It's probably the fastest
test runner ever built.

86
00:04:28.007 --> 00:04:30.207
And it works really,
really well with agents.

87
00:04:30.247 --> 00:04:34.117
It's one of the reasons that Elements
applications will stay robust over time.

88
00:04:34.367 --> 00:04:38.547
Okay, now your agent will typically
use these commands like this, where

89
00:04:38.587 --> 00:04:41.307
it will say elements build and
then it will pass the JSON flag

90
00:04:41.347 --> 00:04:45.277
so that it gets structured data back and
it doesn't have to parse a user interface.

91
00:04:45.367 --> 00:04:46.827
You can do the same, for example,

92
00:04:46.867 --> 00:04:50.827
with elements test or with any of these
commands that provide back data.

93
00:04:50.867 --> 00:04:53.187
You can get a structured
version of that with JSON.

94
00:04:53.227 --> 00:04:56.197
And that's how agents will work
with the Elements project server.

95
00:04:56.327 --> 00:04:59.347
Now the Elements project server
is running in the background,

96
00:04:59.387 --> 00:05:01.667
and that's why I can type
elements start and it connects,

97
00:05:01.707 --> 00:05:04.597
makes sure the build is okay
and starts very, very quickly.

98
00:05:04.747 --> 00:05:08.087
And the project server will stay
running even after you've exited

99
00:05:08.127 --> 00:05:12.147
out of all the clients, like your
program or Visual Studio Code.

100
00:05:12.187 --> 00:05:14.127
The other thing to note
is that Visual Studio Code

101
00:05:14.167 --> 00:05:17.187
itself is plugging into
the same project server.

102
00:05:17.227 --> 00:05:19.327
So you'll save a lot of memory and CPU

103
00:05:19.367 --> 00:05:22.627
because the same Elements project
server is serving all of the clients.

104
00:05:22.667 --> 00:05:24.047
Now, if there are no connected clients,

105
00:05:24.087 --> 00:05:27.227
it will automatically shut down
the project server after a period of time.

106
00:05:27.267 --> 00:05:31.127
If you want to kill it yourself, you can
always do that by typing elements kill,

107
00:05:31.167 --> 00:05:32.727
and that will just kill
the project server.

108
00:05:32.767 --> 00:05:35.487
Next time another client tries
to connect or you start up your app,

109
00:05:35.527 --> 00:05:38.847
it will just boot up the project
server automatically for you.

110
00:05:38.887 --> 00:05:40.607
All right, all these terminal
commands are kind of advanced.

111
00:05:40.647 --> 00:05:43.927
If you're coming from a vibe coding
platform and you're not used to coding

112
00:05:43.967 --> 00:05:47.707
or not used to the terminal, do not worry
at all. The agent that you're working

113
00:05:47.747 --> 00:05:51.847
with in the chat window will be able
to do all of these things on your behalf.

114
00:05:51.887 --> 00:05:53.627
But if you're a little bit more advanced,

115
00:05:53.667 --> 00:05:55.727
or you want to do some things
without having to chat,

116
00:05:55.767 --> 00:05:58.007
you can go down and drop
into the elements program

117
00:05:58.047 --> 00:06:01.157
and pretty much do anything you
want to do with the application.

118
00:06:01.587 --> 00:06:04.457
Elements works really,
really well for agents.

119
00:06:04.667 --> 00:06:06.757
But I think it also works well for humans.