Tejas Kumar: Enabling data at massive scale with Next.js

Aug 15, 2023

Tejas Kumar: Enabling data at massive scale with Next.js

Learn how Xata’s team uses Next.js to enable their web application at scale with Tejas Kumar, Director at Xata.

Scale your business: https://vercel.com/home

Content

10.126 -> Next.js Conf, what's up?

12.167 -> Great to be here with you all talking about the web,

15.506 -> the future, Next.Js, Vercel.

18.197 -> Woo.

19.197 -> I'm here for it is such an honor and privilege to be a part

22.717 -> of this and talk to you.

23.717 -> So I'm here today to talk to you about some fun stuff,

28.497 -> but before we get ahead of ourselves,

30.196 -> lemme do a quick introduction.

31.637 -> My name is Tejas,

33.427 -> that's pronounced like advantageous,

35.157 -> for those of you who may struggle to say it,

37.178 -> it is definitely not Tejas, or you know, anyway,

40.657 -> but whether or not I'm advantageous,

42.487 -> we'll find out at the end of the the talk.

45.077 -> And I'm the director of developer relations at a company

47.857 -> called Zeta.

49.957 -> Zeta is a serverless database focused on developer

53.687 -> experience.

54.687 -> Like we're trying to give like, you know,

56.177 -> high premium Vercel, quality DX to databases,

60.277 -> data infrastructure, search engine, the data,

62.037 -> the whole data layer, right?

64.897 -> But you know, that's not what the talk is about.

66.527 -> The talk today is about enabling data at massive scale with

71.967 -> Next.js enabling data at massive scale with Next.js.

76.497 -> And you know,

77.497 -> that may sound very buzz wordy and what have you,

80.307 -> if you're judging me, don't, Anyway, no, but it's,

83.966 -> so what does this mean?

85.847 -> And let's get into that to start the talk with what do we

88.277 -> even mean by like massive scalable or, or massive scale?

94.037 -> You see, this is, this is something we need to identify to,

98.576 -> to begin the presentation.

100.326 -> So here, here's what I posit,

102.097 -> here's what I propose.

104.397 -> When you start a product or when you work in a team,

107.027 -> usually you find yourself,

109.057 -> for the intents and purposes of this talk.

111.527 -> At one of three possible areas of scale

115.207 -> with your product or your company or what have you.

118.686 -> You may have seed scale that is you're just kind of initial,

122.426 -> you're getting started.

123.426 -> You maybe don't have users,

124.686 -> you're in beta, you're just, you know, trying things out.

127.737 -> You may be in startup scale, this is where you have users,

131.597 -> maybe a few hundred or a thousand and people are using your

134.117 -> thing.

135.127 -> You've got some tech infrastructure going,

137.787 -> it's working.

139.136 -> And you're not nervous about getting paged

141.237 -> at like 3:00 AM right?

143.457 -> Or you may be at substantial scale.

146.667 -> So you may be at enterprise to your, you know,

151.697 -> lots of users.

152.697 -> You might be one of the,

153.697 -> the fangs of the world, right?

156.047 -> Facebook, Amazon, Apple, Netflix, Google, Microsoft,

159.127 -> Spotify, whatever.

160.157 -> You might be either at seed or at startup or at substantial.

164.767 -> And so when we say massive scale in this presentation,

168.567 -> we mean like, you know, you're good past Spotify size,

172.477 -> right?

173.477 -> How do we get there?

174.477 -> How do we enable apps there?

175.687 -> How does React to Next.js and Vercel and Zeta,

178.897 -> how do we play in that arena?

181.447 -> Because candidly speaking,

183.437 -> I am immensely grateful for the value that Vercel and

188.166 -> Next.js provide for getting started.

189.917 -> Like, it's,

190.917 -> it's phenomenal.

191.917 -> I mean, even before Vercel, right?

193.127 -> If you remember Zeit, when you type in one command,

196.107 -> now enter, boom, your stuff's live.

199.007 -> What?

200.007 -> How?

201.007 -> with Next.js NPM install,

203.386 -> React React dom next create pages/index.tsx boom,

207.537 -> you have a web page.

209.577 -> What?

210.577 -> So the getting started experience is phenomenal.

212.897 -> And then what Next.js and Vercel will do is follow you from

217.417 -> seed scale to startup scale.

220.317 -> There's a ton of startups built on Vercel and Next.js

223.806 -> working to this day, Zeta is actually one of them.

228.336 -> So that's phenomenal.

230.067 -> And then, you know what Vercel and

231.506 -> Next.js will do is,

234.317 -> also follow you through to substantial scale if you

237.367 -> want.

238.367 -> As far as I remember,

239.367 -> Kendrick Lamar's website is is on Vercel.

240.997 -> I know Apple has some stuff on I think Next.js.

244.367 -> So like it'll follow you through to substantial scale.

247.696 -> So now how do we do that?

248.707 -> How do we enable that for data,

251.866 -> right?

252.866 -> And so that's kind of the gist of the talk.

255.866 -> Massive scale Jams, Stack,

257.607 -> zero friction developer experience.

260.457 -> Let's go.

261.486 -> One of the claims I wanna make is

263.937 -> that Jam Stack apps usually have similar functionality.

268.367 -> Jam Stack apps usually have similar functionality.

272.917 -> Now consider with me three apps.

275.257 -> You may consider them Jam

276.397 -> Stack apps because they're quite literally built with

278.757 -> JavaScript, APIs and markup.

280.887 -> Or you may not.

281.887 -> Either way,

282.887 -> they're applications that use or are built on the web,

285.167 -> consider with me Wordle, consider with me Tinder,

290.856 -> consider with me Uber.

292.407 -> Okay?

293.407 -> So you've got a game,

294.727 -> a dating app and a ride sharing like taxi app, okay?

300.197 -> Built with similar technology.

302.227 -> Like if you zoom out,

304.227 -> there's a lot that's the same,

306.417 -> especially there's multiple cross-cutting concerns.

309.837 -> And so what we want at Zeta,

311.547 -> what I want personally is to have a lot of these

313.397 -> cross-cutting concerns handled.

315.817 -> Why?

317.147 -> Because across these different companies you have a bunch of

320.187 -> teams reinventing wheels.

324.317 -> Often that is of course,

325.567 -> until there's a standard way to deploy or a standard React

328.797 -> framework, we keep reinventing the wheel.

333.177 -> So what I wanna do on this talk is identify what are these

337.037 -> crosscutting concerns before we can then talk about

340.167 -> how you know they're solved.

343.077 -> So let's do that.

345.147 -> What are the concerns?

346.147 -> So Next.js and Vercel,

347.557 -> I don't know if I'm allowed to keep the logos rotated like

350.127 -> this, but there's a point to it, I promise.

354.117 -> Next.js and Vercel solve some of these problems.

356.727 -> So cross-cutting concern in these apps in many apps,

360.456 -> number one is, is routing, right?

363.317 -> You have the concern of routing,

365.627 -> which Next.js by having opinions will solve pages/filename

371.796 -> is your route.

374.887 -> Public/staticasset is the path to your static asset

378.236 -> on an http environment.

380.296 -> So, by having opinions, Next.js

383.537 -> gives you the solution to routing in a standardized way.

387.377 -> And tons of companies benefit number two,

391.097 -> Vercel as a platform solves the cross-cutting concern

395.016 -> that is deployment.

396.327 -> Like you just run a command Vercel, boom,

399.117 -> it's live, connect a git repository, boom, it's live.

403.017 -> So the concerns of routing that pretty much every app has or

408.067 -> deployment that

409.067 -> how do you have an app if you don't deploy it?

411.856 -> Those through these tools are solved well.

415.627 -> I think there's an outlier, right?

418.446 -> And this outlier is the data.

421.666 -> Is the data.

422.666 -> And so where is,

424.287 -> where is my solution to not have to reinvent?

428.477 -> And I don't mean database, right?

430.147 -> I mean,

431.147 -> where is my solution to not have to reinvent the wheel for

434.606 -> data infrastructure as a whole?

437.457 -> And I'm talking, you know,

439.567 -> database, Redis, search engine, OLA, analytics.

444.317 -> Where is that?

445.317 -> That is, that is missing.

448.047 -> But before we dive in,

449.266 -> let's talk about these first two concerns of routing and

452.796 -> deployment.

453.796 -> And then we'll move to the data piece.

456.037 -> What I wanna do is talk specifically about routing.

458.547 -> Routing.

459.547 -> You know, React is a beautiful tool, right?

461.567 -> React is a,

462.847 -> is a library with like protection against scope creep,

468.106 -> right?

469.106 -> React will not ship its own router.

471.727 -> React will not ship its own data layer.

474.197 -> React is like, no,

475.386 -> no, no.

476.386 -> Listen, we make building UIs good peer hit.

479.127 -> If you want to fetch data, SWR, React query, what have you,

484.577 -> the ecosystem will help you.

486.226 -> But React has a very nice limited scope,

488.166 -> which is actually beautiful cuz it can do its job well

490.877 -> without doing too much.

493.257 -> Thankfully this gives way to frameworks like,

496.347 -> like Next.js remix or even libraries like React router

499.736 -> for example.

500.916 -> What I wanna do to understand the complexity of routing,

504.057 -> look,

505.377 -> it's a talk about developer education.

507.647 -> Okay?

508.647 -> So let's just educate our,

509.647 -> so let's see if we wanted to build our own router,

512.587 -> let's just see what that would take.

513.966 -> And then just marvel at,

516.037 -> at how Next.js and these solutions save us.

518.367 -> So what we're gonna do is

519.367 -> we're gonna switch to the laptop here.

521.617 -> You'll see my presentation, whatever.

523.567 -> It's fine, yes, this is my slide.

526.097 -> But let's move to the editor.

528.127 -> And what I wanna do is let's create like a,

531.057 -> if I can call it this, a poor man's router.

533.207 -> Okay?

534.207 -> So what I'll do is npm init.

535.216 -> This is literally like, look, there's nothing here.

537.767 -> It's an empty project.

539.067 -> So we'll npm init and we we'll npm install,

542.537 -> I don't know know like let's React React dumb parcel

549.327 -> type script.

550.327 -> Like I'm just installing everything.

551.497 -> Dev dependencies, dependencies, whatever.

552.977 -> I don't care.

554.086 -> Types React types, React dom.

557.047 -> This should be good.

560.627 -> Running npm install in a conference talk,

565.647 -> on questionable wifi.

567.047 -> Is he doing that?

569.267 -> Yes he is.

570.937 -> Anyway, I think, I think it'll be fine.

572.587 -> Let's come back here and look.

573.776 -> It should be done any minute now.

576.026 -> Is it done?

577.026 -> Let's take a look-see.

578.026 -> Nope, it's not but hey, it's,

581.917 -> it's coming.

584.137 -> In fact, if I could time travel and speed up this video,

587.987 -> I would, but it's fine.

589.507 -> This is gonna take like just a couple seconds more

592.897 -> and we are good.

593.897 -> Awesome.

594.897 -> So we have some stuff, let's go to work.

596.026 -> So now let's take a look.

598.377 -> We have package and packaged lock.

600.087 -> Let's get started.

601.087 -> We'll create a two files index...

602.357 -> Let's bump that font size index.html serve as our root.

607.846 -> We can even just get started with some code in here.

610.967 -> This one, let's give it a title.

613.967 -> My poor poro man's router and we'll add a script tag

618.917 -> index.tsx type is module and

627.447 -> we'll add a div id route to tell React where to hydrate.

631.887 -> Okay, perfect.

633.107 -> Now of course we need an index.tsx.

634.776 -> So what I'll do is index.tsx and let's get to work.

639.497 -> So let's just do everything in one file because we're

642.037 -> building a poor man thing anyway,

643.557 -> we'll do is import create root from React dom/client.

649.037 -> We'll say root is create exact wow, copilot.

655.367 -> Awesome.

656.367 -> All right.

657.367 -> And now we'll route dot Render app, which,

661.377 -> what is that?

662.377 -> So let's create that.

665.387 -> Let's just for the sake of making sure everything's working,

668.456 -> just do a hello Next.js.

671.677 -> Conf.

672.677 -> All right, so we let's,

676.257 -> it's giving us red underlines cuz we don't have React.

678.377 -> This is fine.

679.836 -> Okay, save this looks good, Index looks good.

684.537 -> Let's try and run this with npx parcel index.html.

688.577 -> Okay, 400 milliseconds.

691.427 -> What do we have?

695.227 -> Great, it works.

697.697 -> But we're building a poor man's router here.

700.137 -> So what does it take to have a router?

704.547 -> We would need a way of knowing like the path we're at.

708.767 -> And then if the path matches show stuff,

711.677 -> this is a poor man's.

713.026 -> We just wanna understand the complexity of reinventing

715.697 -> the wheel here.

716.697 -> There's a point, I promise.

717.697 -> So we come back to the laptop, Hello Next.js conf,

721.727 -> let's create some routes.

724.526 -> So what we wanna do is add some links to start with.

729.797 -> So we'll do a href / about, sure / Twitter,

733.947 -> maybe do this.

736.276 -> And then we will add,

739.966 -> we need a route component.

740.966 -> All right, let's do that.

741.966 -> So const route, it's a component.

745.637 -> In fact it's a function component.

747.627 -> Ooh,

748.627 -> what was that come back function component that has props

754.096 -> with children and it really just needs a path,

757.627 -> with a string prop.

758.846 -> We're using TypeScript here.

760.297 -> I hope you don't mind, if you do mind, I can't help you.

764.156 -> So what, what do we wanna do here?

766.237 -> If path equals equals equals current path,

773.387 -> then return children, right?

775.447 -> And children will come from props, otherwise return, null.

781.996 -> So if the path matches whatever the current path is,

784.586 -> we show it.

785.657 -> The problem is, ooh,

788.787 -> this looks that this looks pretty bad, huh?

791.656 -> Let's maybe fix that by using Semantec HTML to the rescue.

796.026 -> Just do some allies, some ULs, Oh that's not an element.

802.877 -> ULs here.

803.887 -> Boom.

804.887 -> Boom.

805.887 -> Much better.

806.887 -> Okay, so this is,

807.887 -> we don't know what current path is.

809.577 -> And also it's declared but never read, which is,

813.216 -> which is fine cuz this is a bit nonsensical.

816.067 -> So we need a way to get the current path.

819.037 -> The current path is considered context.

823.387 -> So we'd have to use some type of context object.

825.596 -> So let's create that.

827.567 -> Let's do const router context equals create context.

834.266 -> And we'll say, you know,

835.517 -> this literally has the current path,

836.576 -> which is the empty string by default.

839.497 -> Cool.

840.966 -> So now you can say current path is use context,

848.477 -> router context, boom.

849.667 -> All right, so far so good.

853.997 -> I like it.

856.637 -> Except the router context.

858.396 -> Our app here is not given the context,

861.266 -> it's not wrapped in the provider.

863.287 -> So let's create a provider, router provider.

868.867 -> And what it is,

869.867 -> is a router context.provider that wraps children.

875.646 -> This is a function component that has props with children.

880.956 -> Nothing else, okay?

883.357 -> And so we get children here, awesome.

887.446 -> But now you can see it wants a current path.

889.917 -> So current path, we can also give it a prop,

891.776 -> maybe current or initial path string.

895.037 -> And then we'll get the initial path in props.

899.627 -> And value is current path is,

905.336 -> it's not initial, nevermind.

906.396 -> We'll make this from the props.

909.417 -> Okay.

910.417 -> And then we'll just destructure.

912.467 -> Perfect.

913.467 -> All right, this looks good.

914.507 -> So now we have a provider to provide context.

916.627 -> Let's wrap our app with it.

919.667 -> Just like that you notice there's a prop missing.

924.526 -> So we're client side rendering.

926.157 -> So we can easily say that we get the current path from

929.707 -> window.location.pathname.

931.846 -> Okay good.

936.127 -> So everything's wired up.

937.317 -> We're just not using the routes and it doesn't know what

939.947 -> path is, which is a prop.

941.206 -> I should maybe get it from here.

944.276 -> Okay.

945.276 -> So let's use this route component now.

946.966 -> What we want is let's go to section and we'll do

952.757 -> route path.

955.127 -> If I'm on about, then show these things.

958.607 -> Lorom, maybe I can do something like this.

961.787 -> And for another route, if I'm on Twitter, I can show like,

967.407 -> you know, follow me.

971.216 -> (laughs)

972.216 -> Okay, so does it work so far?

974.817 -> Yes.

975.817 -> We're not on a path.

976.817 -> So we see nothing.

978.146 -> But if we go to about, okay, and then Twitter.

981.057 -> Okay, so we built a router in one file.

986.076 -> That kind of works.

987.317 -> Does it work on here?

988.947 -> Does it work on full page loads?

990.706 -> Let's, so it does,

993.197 -> The problem though is in my markup,

995.567 -> there's absolutely nothing.

996.906 -> And that is because this is rendered fully

1000.206 -> on the client side.

1002.146 -> Now if we wanted to Render it on the Server side,

1005.167 -> we can add, we can add some stuff.

1008.766 -> So we can, instead of giving the current path here,

1013.017 -> we can actually create another file, call it server.tsx.

1016.576 -> Lets just npm install express here as well.

1027.256 -> And now, yeah, you're on next dev.

1029.757 -> (laughs)

1030.757 -> I'm so used to Next.js npx parcel index ratio.

1034.587 -> So now what I'll do is I'll import express from express

1039.146 -> start my express app like this and I'll app.get path,

1045.297 -> right?

1047.257 -> And I have request response.

1049.287 -> And what I'll do is path is rec.params.

1055.057 -> Sure, I can actually just de structure, let's do this.

1060.496 -> Oops.

1061.496 -> And now what I can do is Render to pipeable.

1065.227 -> Let's just use use type script from React dom Server

1072.437 -> Render to pipeable what?

1075.807 -> Render to pipeable stream like this.

1079.027 -> We'll Render our app.

1081.167 -> Exactly the same app as here to pipeable stream.

1084.967 -> And then we'll just pipe it to res,

1087.197 -> So this is how we'd server render.

1088.577 -> Of course we'd export these things.

1090.267 -> So I'd export a router provider

1093.157 -> I'D export app.

1094.437 -> It's convenient that everything's in one file.

1096.537 -> Don't do this in production.

1099.596 -> Router provider app, right?

1101.907 -> Is that missing some type of prop, I need React.

1106.157 -> This is just a,

1107.897 -> you don't actually need React if you have

1109.226 -> Next.js configured properly.

1110.807 -> But anyway, so this is fine, this works.

1112.597 -> And instead of Windows, since I don't have it,

1114.187 -> I can do like req.path and boom,

1117.897 -> I have Server rendering, right?

1119.447 -> So yes, this is good,

1122.866 -> but will this see me at seed scale?

1126.797 -> Will this work at seed scale?

1129.517 -> Sure, this is kind of seed scale kind of works.

1133.977 -> Will this work at startup scale?

1135.887 -> Look, I have,

1136.927 -> I have client rendering, I have Server rendering.

1139.318 -> It will work to some degree at startup scale.

1141.097 -> But what if I start accumulating users?

1143.877 -> What if I start getting a bunch of users?

1149.257 -> I'm scared of PagerDuty with this.

1152.437 -> No doubt it'll work.

1155.177 -> But should I?

1156.177 -> I, I'm not so sure.

1157.317 -> Okay, will it work at substantial scale?

1159.597 -> Absolutely not.

1160.597 -> Shut the front door, send it out,

1161.597 -> it's not gonna work.

1162.597 -> This, this is, this will break.

1163.597 -> Especially as you onboard a bunch of engineers, you grow.

1164.967 -> You're like, why?

1165.967 -> Why aren't you using Next.js?

1167.606 -> No.

1168.726 -> So this kind of approach appreciable at seed scale,

1172.007 -> kind of okay at startup scale, not good at massive scale.

1175.466 -> What's the alternative?

1177.257 -> Coming back to the topic of routing.

1179.077 -> The alternative is of course to rely on,

1182.267 -> to stand on the shoulders of giants, to lean on tools.

1186.177 -> Next.js, open source tools, remix, React router.

1189.927 -> That's why they exist.

1191.687 -> And with Next.js and Vercel,

1193.677 -> it's a solved problem at all three levels of scale.

1197.996 -> Vercel specifically Next.js even has this layouts RFC that's

1201.137 -> gonna take it to the next level.

1202.907 -> There's a lot happening at that level of scale.

1205.207 -> I hope this has given you really,

1206.607 -> the reason I even did this little exercise is to give you a

1208.597 -> little window into the complexity and the edge cases that

1212.427 -> exist that if some other team has their full-time job

1216.197 -> dealing with, then we don't have to.

1218.866 -> Okay, moving on.

1219.907 -> Let's talk about deployment.

1221.947 -> I mean, as the second pillar,

1223.957 -> like if we kind of go back to the,

1224.957 -> the butterfly analogy here, right?

1228.087 -> Deployment, I feel like, look, it's,

1229.917 -> it's a conference organized by Vercel.

1233.137 -> Like why do I,

1234.277 -> I feel like I don't even need to talk about this,

1235.937 -> but for posterity I will.

1237.356 -> This crosscutting concern across Uber,

1240.357 -> and Tinder, and Wordle handled at Vercel,

1245.097 -> does it work at seed scale?

1247.387 -> Yes.

1248.787 -> Yes it does.

1249.976 -> You can run a command Vercel seed scale, you're good.

1252.957 -> Does it work at startup scale?

1255.236 -> Zeta is evidence that it does.

1256.829 -> Does it work at substantial scale?

1258.087 -> Yes.

1259.087 -> In fact, how it works,

1260.087 -> if we look a little bit under the hood,

1261.226 -> part of it is this awesome offering with Vercel's edge,

1264.757 -> right?

1265.757 -> Vercel has a content delivery network where your code can be

1269.587 -> served from geographically a lot closer to users,

1272.757 -> therefore they get their stuff faster.

1274.596 -> The geographical distance light needs to travel,

1278.817 -> the internet travels across a speed of light.

1280.517 -> If you didn't know that now you know,

1282.517 -> but speed of light is a real limit.

1284.397 -> So the shorter the speed of light distance is,

1286.677 -> the faster people are gonna get their stuff,

1287.857 -> the happier they're gonna be.

1289.197 -> I feel like with Next.js and Vercel deployment is a

1293.127 -> solved problem.

1294.127 -> Connect to git repository, forget about it.

1296.797 -> You can tweet that, that then leaves, right?

1300.697 -> The third pillar, we talked about data.

1305.267 -> Data and this is important,

1307.397 -> you know why it's important?

1308.397 -> Cuz we just implemented in the front end a router,

1311.607 -> we deployed it.

1312.687 -> So we have all this front end power, right?

1315.366 -> But what happens when the Backend is needed?

1319.327 -> Which of course you need a Backend for apps like Wordle

1323.087 -> stores the answers of all the words in your browser.

1326.726 -> Some would say they're using the browser as a Backend store.

1328.837 -> I don't know if I agree with that.

1329.937 -> But typically if you're building something like Wordle,

1332.197 -> you wanna keep the word secure in some foreign system,

1334.307 -> you'd need a Backend.

1335.746 -> Uber needs a Backend,

1336.867 -> Tinder needs a Backend.

1339.167 -> What is being done for data?

1341.167 -> What is being done to facilitate true Full Stack deployment?

1345.616 -> You see,

1347.337 -> because Vercel and next years are awesome where the front

1350.517 -> end is concerned.

1352.287 -> But what do we need to go full Full Stack.

1355.097 -> And you know what I mean by full Full Stack here, I,

1356.997 -> I mean there's a ton of developers these days that are

1361.246 -> really great on the front end and kind of lacking on the

1363.137 -> Backend or great on the Backend and lacking on the,

1364.996 -> So Full Stack is a loaded term because here this is a slide

1367.027 -> from Swyx at React Miami and this is his take

1371.157 -> on a Full Stack developer.

1372.277 -> Here, let me zoom in.

1373.277 -> That that here,

1375.147 -> (laughs)

1376.846 -> that's like, yeah,

1378.557 -> so that's kind of what we see with a Full Stack developer.

1381.767 -> So if we come back to this,

1383.167 -> this butterfly routing deployment and data,

1388.616 -> this is where Zeta fits in.

1391.027 -> A lot of people call Zeta like the Next.js of databases or

1395.187 -> the Vercel of database.

1396.397 -> That's kind of what we wanna be the,

1397.457 -> the Backend that feels as nice and premium to use is Next.js

1402.147 -> and Versal.

1403.147 -> In fact, I'd like to show you that right now.

1407.117 -> But again, the goal is not adoption.

1409.397 -> I don't really care if you use it.

1411.037 -> I'm not trying to sell you anything.

1412.047 -> I wanna show you what it is and then talk through how we

1415.947 -> build it using Next.js to kind of give you an appreciation

1419.827 -> and an idea for the problem we're solving and

1422.236 -> how we solve it for education.

1423.907 -> So you can grow in your career and do all the things.

1426.486 -> Okay,

1427.486 -> so let's get into this demo.

1429.927 -> If we come to the laptop,

1431.847 -> again, this is what Zeta looks like.

1433.937 -> It says launch your first workspace.

1436.047 -> A workspace is kind of like a team or an organization in

1439.697 -> GitHub.

1440.737 -> So if we add a workspace, I don't know,

1442.996 -> what should I call my team?

1444.137 -> I'll call it Tim Neutken's fan club.

1447.997 -> (laughs)

1449.047 -> And so now I have this,

1450.996 -> and so in Zeta I wanna create a database.

1453.537 -> So add a database,

1454.817 -> I would call it stuff.

1456.856 -> So I'm creating this database and just like instantly

1460.537 -> the database exists, that's really all I need.

1463.917 -> I wanna add a table to it.

1466.007 -> Zeta is schema full.

1467.387 -> So I'll create a data,

1468.389 -> a table here and I'll call it a demo database.

1472.147 -> So Zeta will help me kind of understand what's needed

1475.317 -> or how it works.

1476.317 -> So not created for me a demo database.

1478.907 -> I have two tables, posts and users.

1481.037 -> I can explore the schema here and kind of look at

1483.837 -> how they connect to each other.

1485.037 -> I can see that author and posts is connected to users.

1488.187 -> Great.

1489.187 -> And I can look, this actually looks pretty nice.

1491.727 -> This is a database, believe it or not.

1494.626 -> And so what I can do is I can maybe say, you know what,

1496.587 -> I don't want any of these columns except I just want the

1499.387 -> title.

1500.626 -> This looks good to me.

1501.626 -> So now I wanna query this thing and use it in my Next.js

1504.307 -> trademark app.

1506.246 -> So I will go over here to get code snippet

1510.726 -> and I'm just gonna give myself some credentials.

1515.267 -> So I'll say yes and I'll copy the snippet and literally from

1518.827 -> my own browser, I can go here,

1521.017 -> I can paste and I get back the data exactly as I see it here

1525.726 -> I get an ID and the titles, genderqueer IB male,

1528.907 -> genderqueer IB.

1529.907 -> I get back exactly what I'd expect.

1534.167 -> This is pretty nice because the time from provision to query

1539.077 -> is pretty virtually nothing.

1542.287 -> And now I can take this back end, this database,

1544.807 -> use it in my Next.js app and I'm ready to go.

1549.376 -> But why even stop there?

1551.947 -> Like look, I can,

1553.496 -> I even get a playground where I can play with

1557.817 -> type script.

1558.947 -> Literally I can like run this,

1562.567 -> it uses real live production data but you know, whatever.

1565.807 -> And I get back the data.

1566.877 -> In fact it's type safe.

1568.767 -> So if I have a like a user's table,

1571.476 -> it knows so I can't like mess up this

1575.707 -> or it's gonna yell at me.

1576.726 -> What?

1577.726 -> You don't have that table for example,

1580.327 -> it goes even more than this.

1582.217 -> Like I could use the CLI to zeta in it and it will ask me

1588.307 -> like what database do you want stuff I can generate

1592.327 -> type script code.

1593.726 -> So I can query it in a type safe way and it will pull down a

1597.927 -> JavaScript client or TypeScript client in this case for me

1600.207 -> to use.

1601.207 -> So that thing that I did in the playground,

1602.937 -> just copy paste snippets into my editor and it'll work.

1607.907 -> We do support the notion of branches of your database,

1610.096 -> just like git, you can open pull requests and everything.

1614.157 -> And lastly what I wanna show you is I can literally like

1616.366 -> from the CLI edit my schema and I can like add another table

1621.817 -> from here.

1622.817 -> So I can just add a table Next.js, hello.

1627.327 -> And in my table I can add a column.

1629.557 -> The column name is tejas, it's a string.

1632.976 -> I don't know why enter.

1636.677 -> And when all of this is done, I will run this migration.

1640.587 -> Yes, it's creating a table and it exists, right?

1645.777 -> That's the developer experience we're going for.

1647.297 -> And what I can even do is run a command zeta random data.

1652.077 -> And so I can do random data table is next,

1654.937 -> what is it called?

1657.427 -> Next.js.

1658.427 -> And it will just like insert boom, I have data.

1663.157 -> I can once again query this with temporary credentials

1667.647 -> either in my console and curl whatever,

1670.846 -> and I get back stuff.

1671.846 -> So that's kind of what we're doing and that's the developer

1674.496 -> experience we're trying to create to mimic and really

1677.606 -> complete the ecosystem of powerful jam stack tooling.

1682.287 -> But I,

1683.317 -> that's maybe an impressive demo and you wanna check it out,

1685.637 -> cool.

1686.637 -> But this is about your education and about how we're doing

1688.147 -> this to help you understand

1690.577 -> what a lot of these companies do.

1692.127 -> And I'd like to show you that here

1693.687 -> in our time together.

1694.687 -> So if we come back here, Excalidraw,

1697.747 -> wonderful tool.

1698.747 -> So considering again Uber,

1701.507 -> Tinder and Wordle, maybe not Wordle,

1704.697 -> but any company with a database, right?

1706.807 -> The wheel is reinvented a lot kind of like routing and React

1710.216 -> before Next.js kind of like deployment before you know

1713.486 -> Vercel or Zeit, the wheel keeps being reinvented.

1717.257 -> What wheel?

1718.257 -> This wheel.

1719.257 -> So you start with a database, why is this line so dark?

1726.397 -> It's really like not, let's, let's try this again.

1729.007 -> So you start with a UI,

1730.957 -> actually some type of UI deploy with Vercel talks to an API,

1736.216 -> maybe a Next.js API route, right underneath is a database.

1743.077 -> And so this sometimes will do the job,

1746.397 -> but oftentimes what you will need is you'll probably need to

1748.736 -> distribute your API to load balance.

1751.337 -> And as data demands add up,

1754.327 -> you'll wanna scale your database maybe at first vertically,

1758.486 -> but at some point that will run out of steam.

1760.717 -> And then you'll need to deploy horizontally.

1762.537 -> This is already getting really complex cuz you need to deal

1764.697 -> with primary replica consistency and so on.

1768.657 -> But then as you grow,

1769.726 -> you're gonna collect a lot of data volume and when you have

1772.297 -> a lot of data volume, you need a way to find it.

1775.437 -> Can you imagine Instagram without a search engine?

1777.527 -> So you're gonna need a search engine.

1780.267 -> This makes up data infrastructure.

1782.037 -> So we'll add here,

1783.967 -> search.

1785.137 -> Now you have the complexity of like how does the database

1787.677 -> replicate into the search engine?

1789.447 -> How does my app talk to the search engine?

1793.517 -> Is should we distribute the search engine?

1796.217 -> And you'll think, okay, that's great, that works,

1798.996 -> but it's still slow.

1799.996 -> This will not make it to substantial scale happily.

1802.507 -> Why?

1803.507 -> Cuz databases often read from and write to disk

1807.697 -> what is faster than disk.

1808.876 -> Exactly.

1809.876 -> So you'll need another piece of data infrastructure,

1812.427 -> you'll need some type of in memory store,

1817.267 -> maybe a Redis or something like this.

1820.017 -> And then you know,

1821.017 -> you'll have your API to talk to that first.

1822.847 -> And if it's a cache miss, then go to the database.

1825.317 -> It's a whole story.

1827.447 -> But then you want visibility into what's happening here

1830.007 -> as well.

1831.226 -> So you'd need some type of like online analytics processor.

1835.466 -> It's probably distributed as well.

1838.487 -> And all of these things need to feed into it.

1840.577 -> Oh my word.

1843.437 -> And of course you'd need some type of, whew,

1846.177 -> you need some type of dash boarding tool,

1850.236 -> maybe a Grafana or something.

1852.257 -> And so look, look, check,

1854.116 -> check, check this out, this is your, whoa,

1856.626 -> that's a very confused line.

1858.257 -> Anyway,

1859.257 -> so this wheel keeps being reinvented like literally.

1866.637 -> And, we like the example of Next.js.

1869.846 -> It's like, hey, we have opinions about routing.

1872.427 -> Use it.

1873.736 -> Your life gets easier.

1874.736 -> You can actually build Tinder faster

1876.067 -> without implementing routing.

1877.567 -> You can build uber faster without implementing routing.

1880.496 -> Not that they use Next.js by the way,

1882.077 -> I just keep coming back to these companies with Vercel,

1885.177 -> right?

1886.177 -> Hey, you don't need to roll your own deployment,

1887.567 -> we'll do it for you.

1889.417 -> And with Zeta data infrastructure, we got you.

1892.268 -> If you wanna build a dating app,

1893.268 -> if you wanna build a ride share app, we got you.

1896.387 -> So that's kind of the, the gist.

1897.927 -> And this is, this is here, look again,

1899.537 -> this is the underlying way of how it's built.

1902.647 -> One implementation detail is we use Kafka to replicate the

1905.836 -> DB inter search as a queue.

1908.137 -> So actually this is more,

1909.237 -> if we can squeeze Kafka in there,

1911.876 -> this is more indicative of of our infra under the hood

1916.726 -> that we kind of rent out to people.

1919.586 -> But the guarantee is you don't need to pay a team of DBAs,

1923.087 -> you just kind of use a free product or pay as you go

1926.408 -> or whatever.

1927.408 -> So it saves complexity in exchange for convenience.

1930.797 -> Let's wrap up this presentation.

1931.797 -> I'm a little bit over time,

1933.236 -> I apologize.

1934.466 -> Let's go to the presentation.

1936.667 -> So we just finished up the demo, Let's wrap things up.

1942.757 -> So we looked at how it's built and what we're learning from

1946.177 -> Next.js.

1947.177 -> Let's talk takeaways

1948.277 -> take away number one, wheels don't need reinvention, right?

1953.787 -> I feel like we should be good to stand on the shoulders of

1958.807 -> giants and actually build a product we wanna build

1960.657 -> instead of keep having redundant groundhog Day discussions.

1965.767 -> Next.js helps this.

1967.567 -> Vercel helps this.

1968.876 -> With Zeta we're aiming to help this.

1971.087 -> Number two product focuses the goal.

1972.807 -> If you spend your time focusing on what database to choose,

1975.567 -> what deployment platform to use, what React router to use,

1979.637 -> you kind of lose sight of your product.

1981.387 -> For us,

1982.387 -> the goal is to enable people to focus on the products.

1984.736 -> And lastly,

1985.907 -> we believe that opinions facilitate productivity.

1988.557 -> Next.js allows us to move so fast because routing just,

1992.106 -> you know, you have, what is it?

1993.267 -> You have a directory pages slash something good.

1995.637 -> That opinion allows us to be productive at Zeta as an

2000.047 -> abstraction layer on databases.

2001.486 -> We try to have the strong opinions so that people can just

2004.577 -> follow a pattern and build the apps they want.

2008.277 -> And with that I wanna say, hey, thank you so much for,

2010.537 -> for having me.

2012.287 -> That Twitter handle is outdated, it should say @zeta,

2014.537 -> but it's fine, you'll figure it out.

2016.187 -> I appreciate your time and attention Next.js conf,

2018.917 -> it's been real.

2019.917 -> I'll catch you in the next one.

2021.957 -> All right, peace.

Source: https://www.youtube.com/watch?v=3TVkTrZFizo