Dark - create a backend for your service without frameworks, infrastructure and deploying anything? Click it in this service (video, 9 minutes)
Ellen Chisa, co-founder of Dark, enthusiastically showcased their new programming language editor and infrastructure that they have been working on for the past two years. In her latest video, she demonstrates how to build a fully functional backend for an Office sign-in application. Ellen starts with a simple "Hello World", which is the first thing one usually does when exploring a new programming language. In Dark, there's no need for extensive installations or infrastructure setups before creating an API. All she needs to do is specify the route, method, and response, and a JSON API becomes available on the internet.
After setting up the simple API, Ellen moves on to building the complete backend for the office sign-in application. She employs a React application for the frontend, which is configured to integrate with Dark's API. Ellen emphasizes that Dark is completely frontend diagnostic, meaning developers can use any tool of their choice, like React, Vue, or Svelte. Throughout the building process, she uploads her build files to the CDN, which allows her to serve them through designated routes, thus quickly providing her frontend resources.
However, things didn't go smoothly as she encountered a 404 error since the API wasn’t fully set up yet. In Dark, Ellen can see which requests fail, allowing her to rapidly create new endpoints. Each piece of code she introduces is visible in real-time, making decision-making and testing more straightforward. She also adds a new datastore for hosts where information like names, phone numbers, and Slack IDs are stored, which is crucial for her sign-in application.
In the latter part, Ellen executes several operations to integrate additional functionalities into the application. She implements logic for sending SMS messages and Slack DMs using Dark's built-in functionality. Ellen showcases how to set up events and utilize the Twilio API to send messages. Throughout this segment, she highlights the flexibility of Dark and how effortlessly diverse systems can be integrated without unnecessary complications.
To conclude, Ellen summarizes how quickly one can build a functional backend in Dark, claiming it takes merely 10 minutes. She encourages viewers to explore Dark and suggests they join the platform with their own projects. At the time of writing this article, the video has garnered 2263 views and 41 likes, which may indicate the interest and utility of the showcased technology within the developer community.
Toggle timeline summary
-
Ellen introduces herself as co-founder of Dark and presents the holistic programming language editor.
-
She outlines her goal to build a backend for an Office sign-in application.
-
Ellen sets up a simple Hello World API without extensive installation.
-
She demonstrates creating a JSON API that can greet users by name.
-
Ellen shifts focus to building a full backend with workers and API integrations.
-
She presents a React application for the frontend of the Office sign-in application.
-
Ellen uploads the build file into Dark's CDN using the command line.
-
She encounters a 404 error as the API isn't built yet and plans to resolve it.
-
Ellen rapidly creates an endpoint in Dark for a datastore of hosts.
-
She structures a datastore 'hosts' with names, phone numbers, and Slack IDs.
-
Ellen adds herself to the datastore to test functionality.
-
She checks if the React application retrieves her details from the datastore.
-
Ellen creates a new endpoint for check-in functionality, utilizing request data.
-
She plans to send notifications via text and Slack when someone checks in.
-
Ellen sets up logic to send a Slack DM with the visitor's details.
-
She concludes by describing the functional backend built within a short duration for an office sign-in app.
-
Ellen invites viewers to join Dark for similar projects.
Transcription
Hey, I'm Ellen, co-founder of Dark, and I'm excited to show you the holistic programming language editor and infrastructure we've been working on for the last two years. Today, I'm going to show you how to build a fully functional backend for an Office sign-in application. But first, I wanted to do the first thing I would do in any new language, which is set up a Hello World. In Dark, you don't have to install a bunch of stuff or get going with infrastructure before you can have a working API. In fact, all I need to do is specify my route, the method, and my response. I now have this as a JSON API that's on the internet and available. I can say, add a URL parameter to it, so I have hello name, so I can greet my guests by name. And if I were to do this, I could say hello to myself, say hello to my co-founder Paul, say hello to everyone else who works here, say hello to you, a developer who's watching this video. In Dark, I now can see all of these full requests, and I can see what the expression evaluates to. If I chose to change a piece of it, I could see what that trace would now evaluate to. So that's how you get started with Dark. But let's get into building a full backend with, say, workers and API integrations and all your usual backend things. Ahead of time, we built this React application. It's the front end for our Office sign-in application. The only thing that's special about it is that it's pointed at Dark's API for the backend. Otherwise, Dark is completely front-end diagnostic. You can use React, Vue, Svelte, any tool of your choice. I previously built this application in my terminal, npm run build, probably looks pretty familiar. And now I'm going to use Dark's command line application to upload my build file into our CDN. So now that those assets are available for me, what I can do is I can just serve them at whatever route I want. In this case, just the base one. And I need the index.html. So there we go. React application. Right now, we're getting a 404, because we haven't built out our API yet. So let's do that. Traditionally, I would use my browser tools to inspect, check my console. In Dark, I don't need to do that. I can actually get in real time what request is failing and create that endpoint. I can throw some data in there quickly. And there we go. Alan and Paula are hosts. But that's not what you want for a real app. So let's create a new datastore. I'm going to make one named hosts. And we're going to give our hosts names, obviously. And then let's give them phone numbers so we can text them. And Slack IDs so we can send DMs. We're going to want to test this out. So I'm going to quickly add myself into the datastore. I'm going to use a REPL, because I don't have a front-end built for this in advance. But I'm going to leave myself a note that if I wanted to in the future, I can change to HTTP. We do name our REPLs after a combination of an adjective and an animal. Or you can just rename them. So I feel like it's nicer to have that one named add host. And that's not a very clear comment. Change to HTTP later. Great. So now let's just add me into our datastore. You already know that my name is Ellen. I pulled my phone number out into a function ahead of time. And for my Slack ID, I can just grab that quickly from my profile. Since Starks datastores are key-value based, I want to have a unique identifier. And my Slack ID is a good option, since no two people who work here are going to have that. So I'm going to extract that into a variable. And then you can see, as I'm naming my variable, it's putting it into the place where it was before as well. So there we go. We'll use my Slack ID as a key. That's why we did that. And our hosts table. Before, you saw that we could see the output of expressions. But since our datastore functionality has side effects, it doesn't run automatically. We can choose to run it, which I'm going to do now. Once we run it, we see the record that we get back. And we can also see that our host datastore is locked. Once we have production data in here, we'd have to do a migration in order to change our schema. Last piece of this is let's get our host from our datastore instead of our dummy data. And you can see we get this preview of our schema, in case we've forgotten what field we're looking for. In this case, it's name. Great. So when I go back to my React application, should just be me. Great. It's me. And developer. You're here to visit me. We get a 404 again. Same workflow. We can create a new endpoint. In this case, a difference is that while we're still going to do the same dbset operation that we had before, instead of having to build the full object, we can actually just use our incoming request. Use our request.body. Since we don't have a good unique identifier, I'm just going to generate a key. And let's make our new datastore. So I'm going to have a host. And it's going to have a visitor. There we go. Go back and fill that in. So now when we go back to our frontend, what we're expecting is if we check in, we will have it stored in our datastore. But we haven't done anything else yet. So there we go. We get our confirmation. And our datastore has locked. All right. Now let's go about sending me a text message and a Slack DM to say that you're here. I'm going to use Dark's built-in eventing functionality. So I'm going to emit our request.body. So same as before. Set event. To send a text. And I'm going to write similar logic to do the same thing, but to send a DM. Let's run both of those. And we can see here we've created these work items for ourselves. So now we're going to have a new worker for sending a text. Events work very similarly to incoming requests. In this case, I'm going to say let our host name equal our event.host. And then let's get our host back out of our datastore. And let's just make sure we get a response. We do. And the thing we really care about is our host phone. And let's write our message, which would be event.visitor is here to see you. All right. So now I think we have everything we're going to need. And let's use Twilio to send our text message. In Dark, we've wrapped the Twilio API. So when I type Twilio, I get this Twilio send text function. It shows me all of the parameters I need to call into this API. And so I pulled out my credentials ahead of time. So I need my SID, my token, and my phone number. My T number is going to be my host phone, and my body is going to be my message. Like we saw before with our database operations, we can choose to execute this API call. We can see that we get an OK response, confirmation, and I actually got a text message. Great. So one thing left to do. Let's build our Slack DM sending thing. So we're going to make our new worker. And it's pretty similar. Let's grab our host name again, because we're going to need to get their Slack ID. And Dark's copy-paste works by expression, so I'm just going to go grab this. Thanks, Siri. Not very necessary. And now we're going to get our channel, which is going to be our host.slackid. And let's just check real quick. Yep, there we go. Okay. So now since we're using the Slack API, we are going to want to pass in a header that both specifies our content type and also our auth credentials. So let's get going on that. First part, Slack needs a bearer token. And you've probably already guessed, I pulled out my token in advance. And let's merge that with our JSON content type. And just for ease of use, the URL we're going to be using for the Slack API is their chat API, and specifically we want to post a message. All right. So now we're pretty much there. I'm going to use the built-in HTTP client library to post our URL we've specified. In our body, we need our token, which is our Slack token. We need our channel, which we have pulled out as our channel. And we need our text, which I didn't pull it out nicely this time, so we'll do event.visitor. Is here to see you. We don't need a query, so I'm just going to make an empty object, and then we have our header. So let's try this. Hit our play button again. Bot message and message. So I think now what we should have is an application where when we go to our front end, we're able to specify who we're checking in to see. We could add more people to our datastore, but right now we just have me. When we check in as developer three, should get stored in our datastore, I should get a Slack and a text. And that's how you build a complete functional backend in Dark for something like an office sign-in application in less than 10 minutes. If you're excited about this or have something similar to build, please join us at darklang.com.