Build a UGC Live Streaming App with Amazon IVS: Tech Stack Overview (Lesson 1.2)

In this lesson, we'll take a deeper look at the tech stack used to build StreamCat, a UGC live streaming application. If you're not familiar with AdonisJS and AlpineJS, this lesson will serve as an introduction to these frameworks and will prepare you to better understand some of the code shown in subsequent lessons.

In Lesson 1.1, we learned that StreamCat uses AdonisJS. AdonisJS is a full-featured framework that provides routing, security, ORM functionality, and much more. Your application might use ExpressJS, a Serverless Architecture, or even a completely different framework based on another programming language - and that's great! The web is built on many technologies, frameworks and languages and you should use what you're most comfortable with to build your applications.

AdonisJS should look very familiar to you if you have ever used an MVC framework to build an application. In fact, AdonisJS is heavily inspired by the PHP framework Laravel, so if you've used Laravel in the past, you should find it very familiar. Let's take a look at a basic endpoint:

In this code, we are creating an HTTP endpoint for the path /test, that accepts GET requests. The route handler declares a view parameter, and the handler calls view.render() which accepts the name of a view template (test, in this example) and passes the view a model object containing a single property called name with the value Todd.

The view engine used by AdonisJS is powered by a template engine called 'Edge'. Edge uses a familiar bracket style for interpolating model variables: {{ variable }}. The view for the route that we declared above could look like this:

Now that you're a bit more familiar with AdonisJS, let's talk about AlpineJS.

AlpineJS is a lightweight, but powerful framework for building reactive frontends. Because this course aims to reach a wide audience of developers, we intentionally avoided popular frameworks like React and Angular. You might use one of those - or no framework at all - to build your application - again, that's awesome! Regardless of your preference, you should find AlpineJS easy to understand because it uses familiar constructs and reduces boilerplate. Here's an example of a view that counts and renders button clicks with AlpineJS:

This view declares a <div> as an Alpine component via the x-data directive which contains a reference to a variable called model. The span renders the current value of clicks from the model, and the button calls a model function called add which will increment the value of clicks when it is clicked. The component context is created via JavaScript:

When AlpineJS is ready (alpine:init), we create our model via Alpine.data(), declare the clicks variable, and define the behavior of the add() function.

With AlpineJS, we can avoid boilerplate calls to do things like add event listeners and reduce the complexity involved with managing variable state.

In this lesson, you learned the very basics of AdonisJS and AlpineJS, the two frameworks used to build StreamCat. In the next lesson, we'll take a look at the features included in StreamCat.