DEV Community: Cédrick Lunven

Build Your First App with JavaScript, Node.js, and DataStax Astra DB

Cédrick Lunven — Tue, 25 Oct 2022 19:47:17 +0000

This is the first of a three-part app development workshop series designed to help developers understand technologies like Node.js, GraphQL, React, Netlify, and JavaScript to kickstart their app development portfolio. The full series is available on YouTube. In this post, we’ll cover the fundamental concepts of website applications and introduce DataStax Astra DB as your free, fast, always-on database based on Apache Cassandra®.

In the U.S. we spend almost 88% of our mobile internet time buried in apps like Facebook, Instagram, TikTok, and games. With almost a million new apps released each year and 218 billion app downloads in 2020, learning how to build them is an essential step in any frontend developer’s career.

So how can you start building apps? As a modern app developer, you’re spoiled for choice with multi-cloud platforms and open-source frameworks that do all the heavy lifting for you. If you learn the basics and leverage the right tools, you can go from developing simple to-do lists to a full-stack Netflix clone — which is precisely what we’ll be covering in our application development workshop series.

To put you on the right track, this first workshop is all about building a website application. You’ll learn the fundamentals of web apps, become familiar with popular languages (like JavaScript), then get a pre-coded to-do list app that you’ll learn how to modify and deploy. It’ll take you less than three hours to complete, and all you need is a web browser and an internet connection. Let’s get started.

The basics of web app development

A website application (or web app) is software that runs on a remote server and can be accessed using a web browser on any device. Think of apps like Slack, Gmail, Google Docs, and Twitter, for example. Unlike native apps, which are installed directly on a device and designed for specific operating systems, web apps can reuse the same code and adapt their interface to any mobile device, laptop, or tablet.

While native apps perform much faster, they’re also expensive to develop because you need to learn different languages and frameworks for each platform or device. Web apps, on the other hand, can be “built once and reused forever,” and are vastly simpler to launch, manage and iterate.

When developing a web app, you’ll typically use the following architecture:

Figure 1: Architecture of a typical website application.

Client is your device’s web browser, which you use to access the app.
Frontend is what the user interacts with, and is basically a web server that relies on three main technologies: HTML, CSS, and JavaScript.
Backend is what interacts with the webserver and stores all the database drivers, APIs, and microservices that bridge the frontend with the backend.
Data layer is where you store the states of your app. This can be in a filesystem, external storage, document-oriented software, or a database.

A popular database you might already be familiar with is Apache Cassandra®, which powers high-performing applications for thousands of companies including Hulu, Netflix, Spotify, and Apple. While this free, open-source database is known for its high availability, scalability, and resilience; the downside is that it’s also notoriously complex to set up and manage.

This complexity is an ongoing theme when working with the data layer. As a developer, you need just four operations to interact with your database: create, read, update, delete. But to execute them, you first have to learn the language for the database you’re using. For example, you’d need Cassandra Query Language (CQL) to interact with a Cassandra database. What’s more, you’d also need to learn how to design the data model (schema) so you can properly format and organize the data stored in your database.

It’s a steep learning curve for a new app developer, which is why DataStax built Astra DB, the serverless Cassandra-as-a-Service, as part of our mission to connect every developer to the power of Cassandra.

Simplify Cassandra app development with Astra DB

Astra DB is the simplest way for developers to back their applications with cloud-native Cassandra, allowing them to:

Deploy modern apps faster without the complexities of installing, managing, or scaling Cassandra.
Interact with your database using multiple APIs to avoid data modeling.
Bake in security from the ground up with encrypted data and JSON web token (JWT) based authentication for secure communication with your database.
Choose whether to deploy your Astra DB on Azure, GCP, or AWS.
Autoscale database resources are based on traffic and app requirements so you only pay for what you use.

As a developer, you can create an account on Astra DB for free. You get 3.5 million queries and 40 GB each month, and when you’re ready to scale, you can simply pay as you go.

Astra DB doesn’t just give you a database, it also gives you a collection of APIs that you can use to interact with your database out of the box. This API layer that sits between your app and your Astra DB is called Stargate.

Stargate helps you streamline app development with Cassandra using popular APIs:

REST provides a common gateway so you can access your data using a familiar interface through RESTful APIs for any Cassandra database.
Document (JSON) is a documents API that lets you save and search schemaless JSON documents in Cassandra (with no data modeling needed).
GraphQL is a query language for APIs that lets you insert, query, and change data within the database (without writing in CQL).

All of this means fewer languages and frameworks for you to learn and a shorter time to launch. Think of AstraDB as your own personal Samwise Gamgee, with all kinds of useful tools in its bag to make your app development journey easier.

Build your first web app with JS, Node.js, and Astra DB

There’s no better exercise to get you started as an app developer than building a to-do list. The concepts and techniques you’ll learn in our first workshop are fundamental to building any web app and will put you on track to creating more advanced apps yourself. So, in this workshop you’ll learn how to:

Set up a free Astra DB instance
Run the web-based IDE Gitpod
Interact with the database using APIs
Build a to-do list app using React

You don’t have to install anything and the technologies involved are all open source and free to use. Aside from Astra DB, here’s a quick intro to the other technologies we’ll cover in this first workshop:

Gitpod is a cloud-based integrated development environment (IDE) powered by VS Code that lets you create ready-made dev environments and edit your code directly in your browser.
Node.js is a runtime environment that executes JavaScript outside of a browser to let you generate dynamic page content and interact with the data in your database.
React is a JavaScript library to create interactive user interfaces that easily adapt across most browsers and devices.

To give you the bigger picture, here’s the architecture we’ll be following to build the to-do list app:

To get started, simply sign up for your free Astra DB account, then head over to the workshop video on YouTube.

For the source code, slides, exercises, and the step-by-step guide go to our DataStax Developers repo on GitHub. Lastly, if you get stuck or want to chat with our buzzing community, join the conversation on Discord.

When you’ve completed your first app and you’re ready for the next step in your app development journey, dig into our second workshop on how to build a TikTok clone!

Follow the DataStax Tech Blog for more developer stories. Check out our YouTube channel for tutorials and here for DataStax Developers on Twitter for the latest news about our developer community.

Resources

Deploy a TikTok Clone with Node.js, Netlify, and DataStax Astra DB

Cédrick Lunven — Tue, 06 Sep 2022 23:25:32 +0000

This is part two of the DataStax app development workshop series, where we guide you through fundamental technologies to kickstart your app development portfolio: Node.js, React, Netlify, and JavaScript. The full series is available on YouTube. In this post, we’ll guide you through the concepts and tools you need to build a TikTok clone backed with DataStax Astra DB.

In part one of our app development workshops, we walked you through the basics of building a web app and introduced you to the technologies you’ll be using throughout the series.

Now that you’re armed with the best tech stack for building web apps, in this second installment we’ll look at the building and deploying one of the most popular apps today: TikTok.

Back in the day, you’d have to hire an entire IT team to develop an app like TikTok. Now all you really need is a handful of technologies that can get you up and running within hours. For this workshop, we’ll be using the following:

React to develop the user interface
Node.js as our runtime environment
Astra DB as our free, serverless database
astrajs/collections, which is a library called to interact with a document-oriented database
Netlify to deploy the app across a global content delivery network (CDN)

Here’s a quick breakdown of our TikTok app setup:

Figure 1: Diagram of TikTok clone app.

The clone has already been pre-built using React and JavaScript so you can easily modify and deploy your own TikTok app over a CDN, backed by a cloud-based database. Since we already covered React and Node.js in our previous workshop, let’s take a closer look at the technologies turning the gears and cogs in the backend.

Working with Astra DB and Document API

For our TikTok database, we’re using DataStax Astra DB: a cloud-based database that fully manages Apache Cassandra®, one of the most robust and scalable NoSQL databases around.

With Astra DB, you can leverage the availability and performance of Cassandra without the complexity of installing, operating, or scaling it. You can also use Astra DB entirely on the free tier. All you have to do is sign up for an Astra DB account, then spin up a fully-featured Cassandra cluster in minutes and start experimenting.

As a reminder, Astra DB comes bundled with Stargate, which is a collection of APIs that you can use to easily interact with your data over REST.

Figure 2: Diagram of Astra DB and Stargate.

One such API, which we’ll be using to interact with JSON documents in this workshop, is the Document API.

If you remember from part one of our workshop series, the Document API allows you to save and search schemaless JSON documents in Cassandra without the pain of defining a specific data schema. It essentially abstracts away the complexities of converting JSON documents into tabular form, making it quick to iterate and easy to scale because you can freely store your documents without the restrictions of a schema.

What’s more, as the Document API is built on Cassandra, you benefit from the inherent robustness and reliability of its distributed infrastructure. And, once your application has settled on a particular format for its data, you can easily migrate it into a defined schema.

Deploying to production with Netlify

To tie it all together, you’ll use Netlify to deploy your TikTok clone directly from the GitHub repository. Netlify is a serverless platform that enables developers to quickly build and deploy web apps across their global CDN. This means simpler deployments, built-in redundancy, and pages that load at warp speed.

To achieve this impressive level of performance, Netlify is based on JamStack: the new standard architecture for the web. Unlike traditional websites and apps, JamStack neatly separates the frontend pages from the backend apps and databases.

This frees the frontend from backend servers so pre-rendered content can be deployed directly to a global CDN. In turn, this spares you from creating or maintaining your own servers and dealing with DevOps. Plus, you can easily enhance and personalize your content through APIs and serverless functions.

To deploy our TikTok clone, here’s how it’ll all tie in.

Figure 3: TikTok clone architecture using GitHub, Netlify, and Astra DB.

Netlify will automatically clone the repository into your own, build your site, and deploy it across their CDN. One advantage of both Netlify and Astro DB is that you can deploy to any major cloud provider (AWS, GCP, and Microsoft Azure) without having to create an account with them.

Set up and deploy a TikTok clone in less than two hours

Now that you understand what’s going on under the hood, you’re ready to get your own TikTok clone up and running. During this second workshop, we’ll hand you a ready-coded sample and show you how to do the following:

Connect your free Astra DB database
Initialize the application using Node Package Execute (NPX)
Define the objects needed and work through the backend
Deploy your application to production with Netlify

Here’s the architecture we’ll be guiding you through:

Figure 4: TikTok clone app architecture for this DataStax workshop.

To start, make sure you’ve signed up for your free Astra DB account, then jump into the workshop video on YouTube.

For the source code, slides, exercises, and the step-by-step guide go to our DataStax Developers repo on GitHub. Lastly, if you get stuck or simply want to chat with our community, join the conversation on Discord.

Coming up next, for the grand finale of this workshop series, we’ll be piecing together everything you’ve learned so far and walking you through building a Netflix clone.

Explore more free tutorials on our DataStax Developers YouTube channel and subscribe to our event alert to get notified about new developer workshops. For exclusive posts on all things data: Cassandra, streaming, Kubernetes, and more; follow DataStax on Medium.

Resources

Build a crypto application with GraphQL Federation

Cédrick Lunven — Thu, 30 Jun 2022 16:16:26 +0000

This post will show you the ropes of GraphQL federation and give you the context you need before embarking on the crypto app workshop by Ania Kubów.

Federating GraphQL is a popular approach for companies with large, distributed architectures where scalability and flexibility are paramount. For example, Adobe uses GraphQL federation across 40 API endpoints to improve their team’s agility and velocity; meanwhile Netflix developed a federated GraphQL platform to quickly and reliably scale their API for their studio ecosystem.

If you’re already familiar with GraphQL, then learning how to federate data using GraphQL APIs is a good next step.

In this workshop, Ania will walk you through GraphQL federation and how to use it to build a simple crypto application. In the process, you’ll learn how to create a database using DataStax Astra DB, interact with it using GraphQL, and federate data from several databases to populate your crypto dashboard.

There’s no special software to install and we’ll only be using free, open-source technologies, including:

React to develop the crypto app user interface
Astra DB as our free, serverless database
GraphQL to create, read, update, and delete app data
Apollo to federate data from our databases

Let’s get started.

Understanding GraphQL federation

Let’s begin with a quick intro to the query language itself. GraphQL is an open-source query language, originally built by Facebook, that’s used to fetch data from an API into your application.

With GraphQL, you can hide the complexity of multiple systems (like microservices and third-party APIs) behind a single GraphQL interface. This allows you to fetch data from several sources in just one request, which saves on bandwidth and improves the performance of your app.

Figure 1: Diagram showing how GraphQL interfaces with multiple services. (Source)

Simply put, a federated architecture brings together multiple schemas from different services and merges them into one unified API endpoint. Although having a single GraphQL API is tricky when it comes to enterprise-scale systems.

This is where Apollo Federation swoops in. It’s a gateway layer that allows you to easily consolidate multiple GraphQL API services into one so that an enterprise-scale graph can work as a collection of separately maintained GraphQL services. This gives teams the freedom to work on different parts of the graph schema independently. This also makes it faster and easier to scale, manage, and deploy.

At a high level, Apollo Federation architecture consists of:

Subgraph services, where each one corresponds to a specific GraphQL schema.
A gateway that unifies the schemas into a federated graph and handles the queries across the subgraphs.

Figure 2: A consolidated GraphQL architecture using Apollo Federation. (Source)

In this workshop, we’ll use Apollo Federation to join two databases together and channel their combined output into a crypto app. For the databases, we’ll be using DataStax Astra DB, which we’ll introduce you to in the next section.

Your free database with DataStax Astra DB

Astra DB is a serverless database-as-a-service (DBaaS) that fully manages Apache Cassandra®. That means you can leverage the high availability and reliability of Cassandra, but spare yourself from the pains of operating and managing it.

The best part is you can tinker around with Astra DB on an entirely free tier, with up to 80 GB free each month and the freedom to deploy multi-tenant or dedicated databases on AWS, Azure, or GCP. If you need to scale later on, then you can simply pay as you go and only get charged for what you use.

The second best part is that once you have your hands on Astra DB, you automatically get access to Stargate — an open-source data gateway that makes it easy to query any Cassandra database through REST APIs. One such API is the Stargate GraphQL API, which allows you to do the following:

Get the data you need from any Cassandra database using GraphQL types, queries, and mutations.
Easily and flexibly combine data from multiple services.
Create new database tables directly via the API.
Prototype your mutations and queries using the built-in GraphQL Playground servlet.

Figure 2: Diagram of Stargate GraphQL API within Astra DB.

In this workshop, you’ll be using the Stargate GraphQL API as your data source in Astra DB, and Apollo as your gateway to the federated databases.

Build a crypto app in just one hour

Now that you have a better idea of GraphQL federation, you’re ready to see it in action as you build your very own crypto app. Here’s what you’ll be doing in this completely free workshop:

Create an Astra DB database
Create another database with dummy data
Build a simple crypto dashboard using React
Federate data from both databases with GraphQL
View crypto information on your nifty new dashboard

By the end of this workshop, you’ll know how to federate two databases using GraphQL to populate a crypto app that looks something like this:

Figure 4: Final interface of the crypto app.

Ready to get started? Sign up for your free Astra DB account and then dig into the workshop video on YouTube. For the source code, head over to Ania’s GraphQL workshop repo on GitHub.

Remember, this is a simple crypto app that will teach you the basics of a game-changing approach to GraphQL APIs. Once you’ve mastered this workshop, keep the ball rolling with our blog post on data federation using Stargate GraphQL!

Resources

Bring Streaming to Apache Cassandra with Apache Pulsar

Cédrick Lunven — Thu, 23 Jun 2022 19:50:41 +0000

Twitch, YouTube, Instagram, Facebook — virtually every major brand nowadays uses live streaming to connect and engage their audience. For enterprises and developers building cloud-native applications, this growing trend creates a need for streaming technologies that can reliably handle the rush of massive amounts of data, while also being flexible and easy to manage for developers.

One such technology is Apache Pulsar® — an open-source, distributed messaging and streaming platform that’s easy to deploy, simple to scale, and packed with developer-friendly APIs. So the next question is: how can you stream from Pulsar to Apache Cassandra®, the powerful NoSQL database designed to support data-heavy applications in the cloud?

Join our beginner-friendly Pulsar workshop on YouTube and learn how to connect Pulsar with Cassandra for streaming! In this post, we’ll set the scene with an introduction to Pulsar and guide you through four hands-on exercises where you’ll use these free, cloud-native technologies: Katacoda, Kesque, GitPod, and DataStax Astra DB. Each exercise will also be linked to the step-by-step instructions on the DataStax Developers GitHub wiki.

Let’s dig in.

A quick introduction to Apache Pulsar

For a bit of background, Pulsar was originally developed by Yahoo! and open-sourced in 2016 as a cloud-native, distributed messaging and streaming platform. Today, it’s a top-level Apache Software Foundation and is used by dozens of companies worldwide, including Comcast, Verizon Media, and (yours truly) DataStax.

Pulsar is largely favored by enterprises and developers for its superior resilience and lightweight compute process, which makes Pulsar ideal for real-time apps and streaming data between sensors and IoT devices. On a slightly more technical level, anyone using Pulsar will likely gush over the following features:

Pulsar represents both publish/subscribe messaging and queuing, where the consumer can subscribe to a topic in three different ways:

Shared subscription where Pulsar shares the messages in that topic across all of its subscribed consumers.
Exclusive subscription where every consumer gets their own copy of the data.
Fail-over subscription provides the benefit of an exclusive subscription but if a consumer falls, Pulsar will send the data to a backup.

Additionally:

Designed for multi-tenancy: Pulsar was built from the ground up as a multi-tenant system, which allows for a more cost-effective deployment that you can share across multiple teams and across multiple applications. This also applies to the next feature.
Seamless geo-replication: With built-in geo-replication, Pulsar keeps your data safe by easily replicating persistently stored messages across multiple Pulsar clusters.
Better scaling: Pulsar separates compute from storage, which makes it simpler for developers to expand capacity to hundreds of nodes.

These features not only make Pulsar a good fit for Cassandra, but also with any cloud-native architecture. Speaking of which, let’s take a look at Pulsar’s unique architecture.

Understanding the architecture behind Pulsar

Pulsar is a tiered, distributed system comprised of three components:

Apache BookKeeper®: An open-source storage service that handles persistent storage of messages.
Apache ZooKeeper®: An open-source server that handles coordination tasks between distributed clusters.
Brokers: A stateless component that mainly handles and load balances messages between producers and consumers, as well as store messages in BookKeeper instances (bookies).

Figure 1: Architecture of a Pulsar cluster.

In the upper right of Figure 1, Zookeeper manages the metadata and you can use it to track where the data lives in your storage system. This system is at the bottom of the diagram and is known as BookKeeper. Each BookKeeper node is called a “bookie”. The data is broken into ledgers and segments written to multiple bookies, so no single bookie holds it all.

In the middle of the diagram, we have the Pulsar brokers themselves, which are what talk to the producers and consumers. These basically take a logical model of topics and messages and turn them into storage that can be assigned to the bookies.

Now that you have some background, let’s move on to the workshop where you’ll learn how to use Pulsar and get familiar with the free technologies you can use to simplify your streaming setup.

The workshop: Four labs. One mission.

In this workshop, we give you four simple “labs” that will show you how to connect Pulsar with Cassandra for streaming. Each lab is explained in detail on our DataStax Developers GitHub, and you can also follow along with our YouTube Pulsar workshop video.

There’s nothing to install and no software to pay for, so flex your coding fingers and get a head start with each lab description below.

Lab 1: Set up Apache Pulsar

In this first lab, you’ll learn how to:

Install Apache Pulsar from the tarball
Configure infrastructure components in Pulsar
Create a topic to store messages
Read and write messages from the topic

To do all this without installing anything, you’ll be leveraging Katacoda, an interactive platform for software engineers to learn and experiment with different technologies.

Follow the instructions for Lab 1 on GitHub to get started.

Lab 2: Produce and consume messages with Kesque

In this second lab you’ll meet Kesque, a fully managed cloud messaging service powered by Pulsar. As a side note, DataStax acquired Kesque and now includes it as part of Luna Streaming, which is a completely free, production-ready distribution of Pulsar with handy admin and monitoring tools. We’ll be releasing a revamped version of this workshop using Luna Streaming, so keep an eye on our DataStax Developers channel!

For now, you will simply use Kesque itself to:

Create a topic
Use the free IDE GitPod to create a producer and consumer in Java
Create a message schema using the Kesque UI

To give you a better understanding, here’s a simple diagram with how all these technologies will work together.

Figure 2: Diagram showing how we’ll use GitPod and Kesque for Lab 2.

Go ahead and follow the instructions for Lab 2 on GitHub.

Lab 3: Connect Cassandra with Astra DB

Now it’s time to connect Pulsar to Cassandra and create a database where you can store the messages sent from Pulsar/Kesque. But instead of installing Cassandra and dealing with all the operational complexity that comes with it, you can just use Astra DB and then connect it to Kesque.

Astra DB is a multi-cloud database-as-a-service (DBaaS) built on Cassandra. It’s the simplest way to benefit from Cassandra’s robust and highly scalable architecture — without the headache of managing the details yourself. So, in this lab you’ll:

Sign up for a free Astra DB account
Create a database in Astra DB
Create a table to store the data sent from Pulsar

Follow the instructions for Lab 3 on GitHub.

Lab 4: Stream from Pulsar to Cassandra

In this fourth lab, you’ll finally start streaming. Here’s the big picture of what you’ve set up so far and what’s next.

Figure 3: Diagram showing how the topic connects to GitPod and Astra DB.

In Lab 3, you set up your Astra DB database and created a table to store the data from Pulsar. Now you will connect Pulsar to Cassandra using a sink, which for the unfamiliar is a class or function designed to receive events and funnel them into external systems.

So, in this last lab you will:

Create a sink in Pulsar/Kesque
Connect the sink with Astra DB
Watch the messages stream into your table in Astra DB

Follow the instructions for Lab 4 on GitHub.

Follow the full workshop on YouTube and keep learning

By the end of this workshop, you will have used completely free technologies to successfully stream from Pulsar to Cassandra. Congratulations!

Remember: if you need more guidance during this workshop, you can follow the whole thing step-by-step with the workshop video on YouTube (skip to minute 19 for the labs). Lastly, if you get stuck or just want to chat with our generous community, join the conversation on Discord.

Explore more free tutorials on our DataStax Developers YouTube channel, and sign up to our mailing list to get notified about upcoming community events and workshops. You can also follow DataStax on Medium to keep up with the latest in all things data, Cassandra, Pulsar, streaming, and more.