DEV Community: Paul Chin Jr.

Balancing Complexity: A Tale of Array Includes vs. Negation

Paul Chin Jr. — Fri, 02 Jun 2023 17:51:34 +0000

The Farmer's Robotic Helper

Developers are constantly balancing complexity and flexibility. Imagine you're a farmer with an assortment of fruits: apples, bananas, oranges, and pears. You have a robotic helper which sorts the fruits into two bins, the Regular Bin and the Premium Bin. Apples and bananas can go into both bins, while oranges and pears are exclusive to the Premium Bin. Each morning, the robot picks up a random fruit and needs to decide which bin it should go to.

As the farmer, you're tasked with writing the software that guides the robot's decision-making. You can choose between two main approaches.

The Negation Approach

One way is to code the robot to identify where a fruit cannot go. If the fruit is not an orange and not a pear, it can be placed in the Regular Bin.

if (fruit !== 'orange' && fruit !== 'pear') {
  regularBin.add(fruit);
}

This approach is simple and flexible. To add a new fruit, you simply avoid adding a new condition. However, it's not immediately clear which fruits can go to the Regular Bin - you have to infer this from what they're not. As the farm diversifies its fruits maintaining this function is easier when there are fewer premium fruits being added.

The Array Includes Approach

Alternatively, you can list the fruits that go to each bin in an array, and check if the fruit is in that array.

const regularBinFruits = [ 'apple', 'banana'];

if(regularBinFruits.includes(fruit)){
  regularBin.add(fruit);
}

This approach is more explicit and understandable. It's clear which fruits can go to the Regular Bin. However, it's slightly more complex in terms of code, and adding new fruit requires updating the array. When the farm adds any regular fruit, the farmer has to update the array. When the farm adds premium fruits, no change is needed.

There are other possible solutions to this problem. Here are a couple of them:

Use a dictionary or a map: This approach can be very efficient especially when you have a large number of categories or items. Instead of using an array or a negation logic, you can map each item to a certain value (true/false, or 0/1, or any other meaningful value). This way, you can check the membership of an item in constant time. Here is an example:

let regularBinFruits = { 'apple': true, 'banana': true };

if(regularBinFruits[fruit]){
  regularBin.add(fruit);
}

Use a switch-case structure: This might be a good choice if you have a small number of items and each item requires a different set of actions. However, it can become cumbersome if you have a large number of items.

switch(fruit) {
  case 'apple':
  case 'banana':
    regularBin.add(fruit);
    // break is omitted to allow fallthrough
  case 'orange':
  case 'pear':
    premiumBin.add(fruit);
    break;
  default:
    // handle unknown fruit
    break;
}

Conclusion

At its core, this dilemma of categorizing items -- whether they're fruits for a farmer's robot or variables in a software program -- is a foundational problem in both computer science and mathematics. It deals with set theory, conditional logic, and algorithmic complexity. These subjects are often surrounded by academic jargon that can make them seem daunting.

However, as we've seen through the practical examples in this blog post, these concepts are not as complex as they might initially appear. They're essentially about making decisions based on whether or not certain conditions are met. Do I put this apple in the regular bin or the premium bin, or both?

In each case, we've seen that there are different approaches you can take, each with its own trade-offs. The negation approach is simple and flexible but can be less explicit. The array includes approach is more explicit but slightly more complex and less flexible. Other solutions, like using a map or a switch-case structure, offer their own sets of advantages and disadvantages.

In the end, the best solution always depends on the specific context and requirements of your problem. The key is to understand your use case and choose the solution that best meets your needs. And remember, while these problems can be expressed in academic terms, they're fundamentally about making decisions -- something we all do every day. So don't be intimidated by the jargon. You're more than capable of understanding and applying these concepts.

Creating a serverless API and CLI tool

Paul Chin Jr. — Mon, 07 Jun 2021 18:52:32 +0000

Have you ever wanted to have an image of Nicolas Cage directly from your terminal? In this post we will create an http endpoint that serves an image, and then we will build a CLI tool that accesses that endpoint.

Creating the API

Today we'll make a new http endpoint using Begin. To get started click the button below to create a hello world example.

To login to Begin all you need is a GitHub account. Once logged in, give your new API a cool name. Begin will create a repo and set up your CI/CD at the same time. Now each time you push to main your changes get deployed to a staging environment.

When the repo is created, go ahead and clone it and open in your favorite text editor.

The first thing we'll change is index.js, change it to the following:

// index.js
exports.handler = async function http(req) {

  return {
    headers: {
      'content-type': 'text/html; charset=utf8',
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
    },
    statusCode: 200,
    body: JSON.stringify({ image: `${process.env.BEGIN_STATIC_ORIGIN}/1.jpeg`})
  }
}

Next, we need to create a public folder in the root of our application and put an image in it to be served.

Now, we can push these changes and deploy the endpoint. Make note of the public url for your staging environment. We'll be making a GET request to it for the image from the CLI tool.

Creating the CLI tool

We'll create a new project called praise-cage-cli.

npm init -y

Then go into your package.json and add a bin property. This bin property will give you a command to

{
  "name": "praise-cage-cli",
  "version": "1.0.2",
  "description": "",
  "main": "index.js",
  "bin": {
    "praise-cage": "cli.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tiny-json-http": "^7.3.0",
  }
}

Create a cli.js file in the root and npm install tiny-json-http as a dependency. We will be using tiny-json-http to fetch the image from our API.

cli.js should look like the following:

#!/usr/bin/env node
const tiny = require('tiny-json-http')

console.log('praise cage')
getImage()

async function getImage() {
  const result = await tiny.get({ url: 'https://light-28e-staging.begin.app' })
  console.log(result.body.image)
}

The URL that you need to fetch should match the one from your deployed Begin API.

Finally, you can publish your CLI package to npm with npm publish.

Now anyone can run the command npx praise-cage-cli and they will be greeted with an image of The One True Cage.

How to build a full-stack serverless movie tracker with OpenJS Architect - Part 2

Paul Chin Jr. — Thu, 06 May 2021 16:27:24 +0000

Progressive Enhancement and delivering client-side JS

The basic functionality is completed. Now it's time to enhance this form with some JavaScript so it saves the watched checkboxes in real-time by submitting the form when a checkbox is clicked.

// public/index.js
let forms = document.querySelectorAll("form[action='/watched']")

for (let f of forms) {
  f.querySelector('button').style.display = 'none'
  let check = f.querySelector('input[type="checkbox"]')  
  check.addEventListener('change', function (e) {
    f.submit() 
  }, false)
}

This is the simplest version of progressive enhancement we can make. The client-side JavavScript selects the forms, hides the 'save' button and adds an event listener to the checkbox. Each time the checkbox changes, it submits the form for the user.

Adding star ratings and comments

We're going to continue making our application more complex. In the next few sections, we will add a "star rating" feature as well as a comment system.

First, lets change our markup in the get-index route.

// src/http/get-index/index.js

const arc = require('@architect/functions')
const data = require('@begin/data')

exports.handler = arc.http.async(http)

function authControl(account) {
  if (account && account.name) {
    return `
    Welcome back ${account.name}
    <form action=/logout method="post">
    <button>Logout</button>
    </form>`
  } else {
    let clientID = process.env.GITHUB_CLIENT_ID
    let redirectURL = process.env.GITHUB_REDIRECT
    let href = `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_url=${redirectURL}`
    return `
    <a href='${href}'>Login with GitHub to see a list of movies</a>
    `
  }
}

function movie({ key, watched, title, rating, review }) {

  return `
<form action="/watched" method="post">
  <input type="hidden" name="movieId" value="${key}">
  <input type="checkbox" data-movieid="${key}" name=watched ${watched ? 'checked' : ''}>
  ${title}
  <input type="text" data-movieid="${key}" name="review" placeholder="leave a review here" value="${review || ''}">

  <input type="radio" name="rating" data-movieid="${key}" value="1" ${rating === '1' ? 'checked' : ''}>
  <input type="radio" name="rating" data-movieid="${key}" value="2" ${rating === '2' ? 'checked' : ''}>
  <input type="radio" name="rating" data-movieid="${key}" value="3" ${rating === '3' ? 'checked' : ''}>

  <button class=cage>Save</button>
  </form>`
}

async function getMovies(account) {
  let movies = [
    { key: '001', title: 'Raising Arizona' },
    { key: '002', title: 'Con Air' },
    { key: '003', title: 'National Treasure' },
  ]
  if (account) {
    let accountMovies = await data.get({
      table: `${account.id}-movies`
    })

    let result = ''
    for (let mov of movies) {
      let found = (accountMovies.find(m => m.key === mov.key))
      result += movie({
        key: mov.key,
        title: mov.title,
        watched: !!found,
        rating: found ? found.rating : '',
        review: found ? found.review : ''
      })
    }
    return result
  }
  return ''
}

async function http(req) {

  return {
    html: `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/_static/index.css">
  <link rel="shortcut icon" href="#">
  <title>Praise Cage</title>
</head>
<body>
<h1>Praise Cage</h1>

${authControl(req.session.account)}
${await getMovies(req.session.account)}

<script src=/_static/index.js type=module></script>
</body>
</html>
`
  }
}

Next, we can modify the post-watched endpoint. We now want to include review and rating properties to be saved to the database.

// src/http/post-watched/index.js

const arc = require('@architect/functions')
const data = require('@begin/data')

exports.handler = arc.http.async(route)

async function route(req) {

  console.log('post-watched req.body:', req.body )

  let account = req.session.account.id

  if (req.body.watched) {
    await data.set({
      table: `${account}-movies`,
      key: req.body.movieId,
      review: req.body.review,
      rating: req.body.rating
    })
  } else {
    await data.destroy({
      table: `${account}-movies`,
      key: req.body.movieId
    })
  }

  return {
    location: '/'
  }
}

Finally, we can update our client-side JS with the following:

// public/index.js

let forms = document.querySelectorAll("form[action='/watched']")

console.log(forms)

for (let f of forms) {

  // hide all submit buttons
  f.querySelector('button').style.display = 'none'

  // get a ref to the form checkbox
  let check = f.querySelector('input[type="checkbox"]')

  // get a ref to the form radios
  let radios = f.querySelectorAll('input[type="radio"]')

  // get a ref to the form text
  let text = f.querySelector('input[type="text"]')

  // mutates state
  function changed (e) {

    let movieId = e.target.dataset.movieid
    let payload = { movieId }
    payload.watched = f.querySelector('input[name="watched"]').checked
    payload.review = f.querySelectorAll('input[name="review"]')[0].value

    let rating = f.querySelectorAll('input[name="rating"]:checked')
    payload.rating = rating.length === 1 ? rating[0].value : ''

   //make an HTTP post with fetch

    fetch('/watched', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
        'x-nick-cage': 'fetch'
      },
      body: JSON.stringify(payload)
    }).catch(function fail(err) {
      console.log('failed', err)
    })
  }

  // listen to checkbox changes
  check.addEventListener('change', changed, false)

  // listen to radio buttons getting hit
  for (let r of radios) {
    r.addEventListener('input', changed, false)
  }

  // listen to changes to review text
  text.addEventListener('input', changed, false)
}

The full source code can be found here: https://github.com/pchinjr/movie-tracker

How to build a full-stack serverless movie tracker with OpenJS Architect - Part 1

Paul Chin Jr. — Thu, 06 May 2021 16:24:44 +0000

What we're building

In this post, I'll cover the beginnings of a full app that uses AWS serverless services that will have a full database, session support, GitHub OAuth login, and is developed with progressive enhancement in mind. The app will provide a logged-in user with a list of movies. Each movie can be checked to indicate if it has been watched or not. So you can keep track of all the Nic Cage movies that you've seen.

The tools we will need

This app will require you to have Node.js, OpenJS Architect, your favorite text editor, some basic JavaScript knowledge, and how to use Git. Oh, and a GitHub account.

Architect is an open-sourced deployment framework for serverless web apps on AWS. It will hide a lot of complexity in setting up Lambda functions, API Gateway, and DynamoDB.

Create a new Architect project and set up CI/CD on Begin

To get started click the button below to deploy it in 15 seconds:

Once you login to Begin with your GitHub credentials it will create a new repo on your account. Your CI/CD is now done! Each commit to your default branch will cause a new build to a staging environment.

Clone your repo and run npm i to get started locally.

Infrastrucure as Code, `app.arc` file

Let's start by looking at our app.arc file and modify it to the following:

@app
example-movie-tracker

@static

@http
get /
get /login
post /logout
post /watched

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

After you've finished modifying the app.arc file, run arc init from the command line to scaffold out the functions.

GitHub OAuth and environment variables

Now let's implement GitHub OAuth. We're going to need to set up environment variables and modify a few files.

Environment variables allow us to parameterize sensitive state, like third-party API keys and URLs, without hard coding them into our application code.

First, follow these instructions and register a new OAuth app. You should see the following:

You will need to save GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, and GITHUB_REDIRECT to a prefs.arc file in the root of your project. Architect reads this file and loads the environment variables into the Lambda at runtime. The file should look like this:

#prefs.arc

@env
testing
  GITHUB_CLIENT_ID <your-client-id>
  GITHUB_CLIENT_SECRET <your-client-secret>
  GITHUB_REDIRECT http://localhost:3333/login

This allows us to work locally by running npm start. In order to get this working on our deployed app, you will have to create a new OAuth application for staging and production and updating a new set of environment variables in the Begin console.

Implementing OAuth login flow

Now we can write some code to handle the OAuth login flow from GitHub.

First, we'll write the get-login function.

// src/http/get-login/index.js

const arc = require('@architect/functions')
const github = require('./github')

exports.handler = arc.http.async(login)

async function login(req) {
  let account
  if (req.query.code) {
    try {
      account = await github(req)
    } catch (err) {
      return {
        statusCode: err.code,
        body: err.message
      }
    }
    return {
      session: { account },
      location: '/'
    }
  } else {
    return {
      location: '/'
    }
  }
}

This get-login function is where our GitHub app redirects to after successfully authenticating.

If we have successfully authenticated we can then use the returned code to retrieve the account data from GitHub's API.

We check for req.query.code
Then use the code to retrieve the user account from the GitHub API
Finally, we return the account if present.

We also will create a github.js module to include the GitHub specific logic. This github.js is used to retrieve the account data from GitHub.

First, we POST to the GitHub OAuth service with the authentication code to retrieve an access token
Then we retrieve the account data with the access token set as an Authorization Header.
Finally, we return the account data or any error we receive.

// src/http/get-login/github.js

const tiny = require('tiny-json-http')

module.exports = async function github(req) {
  try {
    let result = await tiny.post({
      url: 'https://github.com/login/oauth/access_token',
      headers: { Accept: 'application/json' },
      data: {
        code: req.query.code,
        client_id: process.env.GITHUB_CLIENT_ID,
        client_secret: process.env.GITHUB_CLIENT_SECRET,
        redirect_url: process.env.GITHUB_REDIRECT
      }
    })
    let token = result.body.access_token
    let user = await tiny.get({
      url: `https://api.github.com/user`,
      headers: {
        Authorization: `token ${token}`,
        Accept: 'application/json'
      }
    })
    return {
      token,
      name: user.body.name,
      login: user.body.login,
      id: user.body.id,
      url: user.body.url,
      avatar: user.body.avatar_url
    }
  } catch (err) {
    return {
      error: err.message
    }
  }
}

Next, we'll create an auth component in our get-index function

// src/http/get-index/index.js

const arc = require('@architect/functions')

exports.handler = arc.http.async(http)

function authControl(account) {
  if (account && account.name) {
    return `
    Welcome back ${account.name}
    <form action=/logout method="post">
    <button>Logout</button>
    </form>`
  } else {
    let clientID = process.env.GITHUB_CLIENT_ID
    let redirectURL = process.env.GITHUB_REDIRECT
    let href = `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_url=${redirectURL}`
    return `
    <a href='${href}'>Login with GitHub</a>
    `
  }
}

async function http (req) {

  return {
    html: `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Praise Cage</title>
</head>
<body>
<h1>Praise Cage</h1>

${ authControl(req.session.account) }

</body>
</html>
`
  }
}

Now we can create the post-logout handler to clear the session object and log the user out.

// src/http/post-logout/index.js

let arc = require('@architect/functions')

async function logout(req) {
  return {
    session: {},
    location: '/'
  }
}

exports.handler = arc.http.async(logout)

Testing Auth

Now we can test our app locally by running npm start. You should see a link to log in with your GitHub credentials.

Building our `get-index` route

Now it's time to continue to build out our UI. We're using a dynamic endpoint for our get-index route which will fetch any data from the database on page load.

// src/http/get-index/index.js

let arc = require('@architect/functions')
let data = require('@begin/data')

exports.handler = arc.http.async(http)

function authControl(account) {
  if (account && account.name) {
    return `
    Welcome back ${account.name}
    <form action=/logout method="post">
    <button>Logout</button>
    </form>`
  } else {
    let clientID = process.env.GITHUB_CLIENT_ID
    let redirectURL = process.env.GITHUB_REDIRECT
    let href = `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_url=${redirectURL}`
    return `
    <a href='${href}'>Login with GitHub to see a list of movies</a>
    `
  }
}

function movie({ key, watched, title }) {
  return `<form action="/watched" method="post">
    <input type="hidden" name="movieId" value="${key}">
    <input type="checkbox" name=watched ${ watched? 'checked' : ''}>
    ${title}
    <button>Save</button>
  </form>`
}

async function getMovies(account) {
  let movies = [
    {key: '001', title: 'Raising Arizona'},
    {key: '002', title: 'Con Air'},
    {key: '003', title: 'National Treasure'},
  ]
  if (account) {
    let accountMovies = await data.get({
      table: `${account.id}-movies`
    })
    console.log('found account movies', accountMovies)
    let result = ''
    for (let mov of movies) {
      let found = !!(accountMovies.find(m=> m.key === mov.key))
      result += movie({key: mov.key, title: mov.title, watched: found })
    }
    return result
  }
  return ''
}

async function http (req) {

  return {
    html: `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Praise Cage</title>
</head>
<body>
<h1>Praise Cage</h1>

${ authControl(req.session.account) }
${ await getMovies(req.session.account) }

<script src=/_static/index.js type=module></script>
</body>
</html>
`
  }
}

There are two functions we're adding, getMovies and movies. These functions accept some parameters and return an HTML string. We're able to build out our UI using these functional components without the need for a larger framework.

Saving the 'watched' movies to DynamoDB with `@begin/data`

We're using @begin/data as a DynamoDB client to save watched movies to each user's account.

// src/http/post-watched/index.js

const arc = require('@architect/functions')
const data = require('@begin/data')

exports.handler = arc.http.async(route)

async function route(req) {
  console.log('post-watched:', req.body)
  let account = req.session.account.id

  if (req.body.watched) {
    await data.set({
      table: `${account}-movies`,
      key: req.body.movieId
    })
  } else {
    await data.destroy({
      table: `${account}-movies`,
      key: req.body.movieId
    })
  }

  return {
    location: '/'
  }
}

Stay tuned for the next part where we will go over how to make this site work with client-side JavaScript. We will progressively enhance this site so that it will work even with JavaScript disabled.

Serverless Shopping Cart with OpenJS Architect

Paul Chin Jr. — Mon, 05 Apr 2021 15:34:10 +0000

In this post, we'll be looking at creating a model of a shopping cart. We will be using OpenJS Architect for the infrastructure as code and deployment framework. We will be deploying to AWS cloud through Begin. No other frameworks will be needed as we'll be developing this app with just HTML forms, GET, and POST requests. The cart will even work with javascript disabled!

Create a new Architect project

We can create a new Architect project from the command line, the only prerequisite is having Node.js installed.

npm init @architect ./shopping
cd shopping
npm i @architect/functions @begin/data

We're adding two dependencies that we will need to make things easier, @architect/functions and @begin/data. These two libraries will make things easier as we work with AWS Lambda functions and DynamoDB.

Modify the `app.arc` file

The app.arc file is our infrastructure as code file. It tells Architect what resources to deploy and gives structure to the underlying source code. Open up the app.arc file in the root of your project and modify it with the following:

@app
shopping

@http
get /
post /cart
post /cart/delete

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

After you modify the app.arc file, run arc init from the command line to scaffold out the functions that we will need.

There are three routes and a declaration of a data table. Each route will have a corresponding Lambda handler that is a discrete function. We'll be using @begin/data as a DynamoDB client to interact with the database.

Modify the `get-index` route

The first route we'll look at is the get-index route, which is called at the apex of the application.

let arc = require('@architect/functions')
let data = require('@begin/data')

async function http (req) {

  let result = await data.get({
    table: 'shopping-cart'
  })

  return {
    statusCode: 200,
    headers: {
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0',
      'content-type': 'text/html; charset=utf8'
    },
    body: `
    <h1> Praise Cage </h1>
    <p> Welcome to the Store </p>
    <ul>
    <li>Item 1</li>
    <form action='cart' method='POST'>
    <input type="number" name="quantity"/>
    <input type="hidden" name="productId" value='001'>
    <button>Add to Cart</button>
    </form>
    <form action='cart/delete' method='POST'>
    <input type="hidden" name="productId" value='001'>
    <button>Remove from Cart</button>
    </form>
    <li>Item 2</li>
    <form action='cart' method='POST'>
    <input type="number" name="quantity"/>
    <input type="hidden" name="productId" value='002'>
    <button>Add to Cart</button>
    </form>
    <form action='cart/delete' method='POST'>
    <input type="hidden" name="productId" value='002'>
    <button>Remove from Cart</button>
    </form>
    <li>Item 3</li>
    <form action='cart' method='POST'>
    <input type="number" name="quantity"/>
    <input type="hidden" name="productId" value='003'>
    <button>Add to Cart</button>
    </form>
    <form action='cart/delete' method='POST'>
    <input type="hidden" name="productId" value='003'>
    <button>Remove from Cart</button>
    </form>
    </ul>
    <p>This is your order</p>
    <ul>${result.map(item => `<li>${JSON.stringify(item.cartItem)}</li>`).join('')}</ul>
    `
  }
}

exports.handler = arc.http.async(http)

In this function, we are returning a string of HTML that will be rendered by the browser. Congratulations, you now have done server-side rendering with a serverless function!

Adding a database layer

You should notice that we are using @begin/data in the get-index route to grab all the cart data before the page loads and we will render that at the bottom of the page. In a future tutorial, we will look at styling this page, but for now, we will just return JSON of the objects in the database.

Modify the `post-cart` route

The post-cart route is where we will update our cart with the different items that are available.

let arc = require('@architect/functions')
let data = require('@begin/data')

async function http (req) {

  await data.set({
    table: "shopping-cart",
    key: req.body.productId,
    cartItem: {
      quantity: req.body.quantity,
      prodId: req.body.productId
    }
  })

  return {
    statusCode: 302,
    location: '/'
  }
}

exports.handler = arc.http.async(http)

Modify the `post-cart-delete` route

The post-cart-delete handler is responsible for deleting the item from the cart. Again it uses the @begin/data DynamoDB client. For more information about @begin/data, check out the docs.

let arc = require('@architect/functions')
let data = require('@begin/data')

async function http(req) {

  await data.destroy({
    table: "shopping-cart",
    key: req.body.productId
  })

  return {
    statusCode: 302,
    location: '/'
  }
}

exports.handler = arc.http.async(http)

With this last handler, we can now run npm start and see the results of our app thus far.

You should be seeing an unstyled page.

Next steps

In a follow-up tutorial, we will take a look at styling the cart so it will look a bit nicer.

Full code repo can be found at https://github.com/pchinjr/shopping-cart

How to use external APIs with Serverless Functions

Paul Chin Jr. — Wed, 24 Mar 2021 15:16:29 +0000

Working with an external API is a very common use case. In this post we will be using a Lambda function to make a data call to the Open Movie Database to get a list of Nicolas Cage movies and some information.

Create a new Architect project

The first step is starting a new Architect project from the command line

npm init @architect ./cage-characters
cd cage-characters
npm install @architect/functions tiny-json-http

Infrastructure as Code

Let's take a look at the app.arc file. This file is our infrastructure as code manifest. It lives in the root of our project and tells Architect where the code lives and how to deploy it.

@app
cage-characters

@http
get /

In this example, we're only using a single route. So let's modify the get-index function. But first, we need to get an API key from the Open Movie Database. Grab one by going to http://www.omdbapi.com/apikey.aspx and they will email you an API key to include in the request.

Set up environment variables

We're going to set up a prefs.arc file to use as an environment variable so we don't commit this secret to GitHub.

Create a prefs.arc file in the root of your project.

# prefs.arc

@env
testing
  MOVIE_API_KEY your-api-key-here

When we deploy this app, we will set environment variables in the Begin console.

Now we can start to modify the get-index handler with our logic to query the movie database and display the information in the browser.

// src/http/get-index/index.js

let arc = require('@architect/functions')
let tiny = require('tiny-json-http')

async function route(req) {
  let url = `https://api.themoviedb.org/3/person/2963/movie_credits?api_key=${process.env.MOVIE_API_KEY}`
  let imageUrl = 'http://image.tmdb.org/t/p/w500/'
  let result = await tiny.get({url})
  let movies = result.body.cast

  let html = movies.map(movie => `<h3>${movie.character} - ${movie.original_title}</h3> <p>${movie.overview}</p> <img src=${imageUrl + movie.backdrop_path}></img>`).join('')

  return {
    statusCode: 200,
    html: html
  }
}

exports.handler = arc.http.async(route)

This function returns a string back to the browser to render as HTML. You can now run npm start to kick off the local development server and look at the results at http://localhost:3333.

Depoloying on Begin

The final step is to deploy this application on Begin. Begin is the easiest way to deploy your Architect projects to live AWS infrastructure. To do this, create a free Begin account by going to https://begin.com and using your GitHub account to log in. Create a new app and associate it with this repo. Begin will then create hooks to your repo and deploy the app to a staging environment on every git push.

You can see the full code example here: https://github.com/pchinjr/cage-characters

You can find the full documentation for the Open Movie Database here: https://developers.themoviedb.org/3/getting-started/introduction

Serverless Scheduled Functions on Begin

Paul Chin Jr. — Tue, 16 Mar 2021 14:31:29 +0000

Sometimes you need an automated function to repeat the same job on an interval. Begin has scheduled functions just for this task. In this tutorial, we will be building a GitHub issue scraper that will store information once a day.

To start, let's make a new OpenJS Architect project from the command line along with a couple of dependencies.

npm init @architect ./my-issue-tracker
cd my-issue-tracker
npm install @begin/data tiny-json-http

Open up the folder in your code editor of choice and modify the app.arc file to the following:

# app.arc 

@app
my-issue-tracker

@http
get /

@scheduled
issues rate(1 day)

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

The app.arc file is your infrastructure-as-code manifest. It tells Architect where your source code is and what to deploy.

Now you can run arc init to scaffold out our scheduled function.

Next, we can modify our scheduled function at src/scheduled/issues/index.js

let tiny = require('tiny-json-http')
let data = require('@begin/data')

exports.handler = async function scheduled (event) {
  console.log(JSON.stringify(event, null, 2))
  let date = new Date().toLocaleDateString()
  let url = 'https://api.github.com/repositories/137939671/issues'
  const issues = await tiny.get({ url })
  let numberOfIssues = issues.body.length

  //save the number of issues per day
  await data.set({
    table: 'issues',
    number: numberOfIssues,
    date: date
  })

  return
}

Finally, we can push this up to GitHub and associate it with a new Begin app.

After deployment, the function will invoke itself for the first time. This is when you can verify that it worked by checking the logs. You can also look in the Begin Data console and see that it saved a number with today's date.

You can find the full example code here: https://github.com/pchinjr/my-issue-tracker

Serverless dependency management in OpenJS Architect

Paul Chin Jr. — Mon, 08 Mar 2021 17:23:50 +0000

OpenJS Architect is an open-source framework for writing and deploying serverless applications to AWS. Each Architect project is comprised of many small and independent Lambda functions that are executed statelessly in their own isolated runtimes.

So how do we manage shared code and dependencies between functions?

Dependencies defined in your root `package.json`

You are likely to use some dependencies in each Lambda function that you are deploying like including the @architect/functions library. Architect has the ability to discover use your project's root package.json to install dependencies into your Lambda functions. Let's take a look at an example.

First, start by creating a new Architect project

npm init @architect ./arc-example
cd arc-example
npm install @architect/functions

By installing @architect/functions to the root package.json it will be available to all your functions when you require it. We won't need to manage dependencies with a per-function package.json.

So now we can use it in our get-index function.

// src/http/get-index/index.js

let arc = require('@architect/functions')

async function route(req) {
  return {
    statusCode: 200,
    html: `<h1> Praise Cage </h1>`
  }
}

exports.handler = arc.http.async(route)

`src/shared` and `src/views`

Another way we can handle shared code is with a special folder src/shared. Architect provides an easy way to abstract and reuse code in your functions. Most applications need to share logic, templates, or utilities. In order to do this, Architect uses a folder convention to copy the contents of src/shared and src/views into each function's node_modules directory.

It's important to note that the entire contents of src/shared are copied recursively. I suggest you keep the directory structure as flat as possible, and the payloads as small as possible to improve performance.

Let's create an example helper function.

`src/shared` example

To get started, create a new project from the command line.

npm init @architect ./arc-shared-views

Next, we can modify the app.arc file in the root of the project with the following:

# app.arc file
@app 
arc-shared

@http
get /
get /answer

Now we can start to build out our src/shared modules by creating a new folder at src/shared/helper.js. In this example, we need to make sure a number is converted to a string and this helper function will do the trick!

// src/shared/helper.js

function theAnswer() {
  //really important number that needs to be converted to a string
  let universe = 42 
  return universe.toString()
}

module.exports = theAnswer

We can use this helper in all of our functions by just requiring it from @architect/shared. Modify the get-answer function with the following:

// src/http/get-answer/index.js

let Answer = require('@architect/shared/helper')

exports.handler = async function http (req) {
  return {
    statusCode: 200,
    headers: {
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0',
      'content-type': 'text/html; charset=utf8'
    },
    body: `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> The Answer is </title>
      </head>
      <body>
        <p> This is the Answer: ${Answer()} </p>
      </body>
      </html>
    `
  }
}

Run npm start from the command line and take a look at our code structure. Sandbox will hydrate our functions with a node_modules/@architect/shared directory which is part of the function's payload when deployed and executed.

.
├── src
│   ├── http
│   │   ├── get-index/
│   │   └── get-answer/
│   │
│   └── shared/
│       └── helper.js
│   
├── app.arc
└── package.json

When you navigate to http://localhost:3333/answer you will be greeted with data from our shared module, and it can be used by any other function.

`src/views` example

The src/views folder is a special location that allows you to include code for each of your HTPP functions with a GET route. Continuing with our previous src/shared example we will include a layout template that your HTTP functions can use.

Modify the app.arc file to match the following:

@app
arc-shared

@http
get /
get /answer 
get /about
get /css/:stylesheet

@views
get / 
get /about

What we've done is added two new routes - /about and css/:stylesheet, then declared that two of the routes / and /about should receive a copy of the modules in src/views.

Create a new folder and file, src/views/layout.js. In this file we'll write the following contents:

module.exports = function Layout (props) {
  props = props || {}
  let heading = props.heading || 'Architect views!'
  return `
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Architect example</title>
 <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
 <h1>${heading}</h1>
</body>
</html>
`
}

This is our shared view template that will be used by each GET route listed under the @views pragma in the app.arc file.

Next, we'll modify src/http/get-index/index.js with the following:

let Layout = require('@architect/views/layout')

exports.handler = async function http (request) {
  try {
    return {
      statusCode: 200,
      headers: {
        'content-type':'text/html; charset=utf8'
      }, 
      body: Layout()
    }
  } catch (e) {
    console.error(e)
    return {
      headers: {
        type: 'application/json; charset=utf8',
      },
      status: 500,
      body: JSON.stringify({
        name: e.name,
        message: e.message,
        stack: e.stack
      }, null, 2)
    }
  }
}

This function will call the layout file and return its output as the body of the response. Next, we can set up the about page to send a different set of props to the layout. Modify sec/http/get-about/index.js with the following:

let Layout = require('@architect/views/layout')

exports.handler = async function http (request) {
  try {
    return {
      statusCode: 200,
      headers: {
        'content-type':'text/html; charset=utf8'
      }, 
      body: Layout({heading: 'About'})
    }
  } catch (e) {
    console.error(e)
    return {
      status: 500,
      type: 'application/json; charset=utf8',
      body: JSON.stringify({
        name: e.name,
        message: e.message,
        stack: e.stack
      }, null, 2)
    }
  }
}

Now when /about is requested, this function will execute and be able to return the data being passed into Layout().

Finally, we have some finder control over which GET functions will have /src/views copied into it. We do this with the @views pragma in the app.arc file. We want to create a URL to our style sheet, but this function doesn't need access to the layout code. Only the GET routes under @views will have the src/views code copied into it. Our first route of /answer won't have src/views modules copied into node_modules.

Modify the code in src/http/get-css-000stylesheet/index.js with the following:

const styles = `
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
`
exports.handler = async function http (request) {
  return {
    statusCode: 200,
    type: 'text/css; charset=utf8',
    body: styles
  }
}

OK! Go ahead and run npm start from the project root and navigate to http://localhost:3333 to see our app in action. Change the route to http://localhost:3333/about and you'll see that our proper were passed as expected.

See full example code in the repo: https://github.com/pchinjr/arc-shared-views-example

Mixing Deno and Node with Serverless Functions on Begin

Paul Chin Jr. — Tue, 02 Mar 2021 14:12:44 +0000

One of the promises of serverless functions is the ability to bring your own runtime. You can even mix and match runtimes within the same application. In this post, we'll show a reduced example of a serverless side rendered HTML using Deno and a single POST endpoint written with Node.js.

Start with a Deno Hello World example by clicking the button below to deploy a fresh app to Begin.

Behind the scenes, Begin will provision a new GitHub repo and set up your CI/CD all in a single click. Once your app is provisioned clone the repo and install some dependencies.

npm install @architect/functions @begin/data

We'll first modify the app.arc file. This file is our infrastructure as code manifest. It defines the routes we want to declare as well as where the code for each function.

@app
begin-app

@http
get /
post /pray

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

In our app we have two HTTP functions, a get-index function and a post-pray function. We will start with the get-index function.

// src/http/get-index/index.js

import HTML from "./components/html.js";
import Main from "./components/main.js"

export async function handler(req /*object*/) {
  return {
    headers: {
      "content-type": "text/html; charset=utf8",
    },
    statusCode: 200,
    body: HTML({
      title: "SSR in Deno",
      children: Main({name: 'Cage'})
    }),
  };
}

Notice that we're using Deno for this function so we can use import statements. Next, we will create the two components that our app is created with. HTML is the HTML container code and Main will be our main app container. These components will have state passed into them from our get-index function.

// src/http/get-index/components/html.js

export default function document(state={}) {
  let {children, title } = state
  return `
<!DOCTYPE html>
<html>
<head>
  <title>${title}</title>
</head>
 <body>
  ${children}
 </body>

</html>
`
}

// src/http/get-index/components/main.js
export default function Main(state={}) {
  let { name } = state

  let time = new Date().toLocaleTimeString()

  return `
<div>
  <h1>Praise ${name}</h1>
  <p>${time}<p>
  <form action='/pray' method="POST">
  <input type="text" name="prayer">
  <button>Submit</button>
  </form>
</div>
`
}

The Main component is a form element that will POST the input text to our serverless function. So let's take a look at the POST function.

// src/http/post-pray/index.js

const arc = require('@architect/functions')
const data = require('@begin/data')

async function route(req) {
  console.log(req.body.prayer)

  let save = await data.set({
    table: 'prayers',
    item: req.body.prayer
  })

  console.log(save)

  return {
    location: `/?success=${req.body.prayer}`
  }
}

exports.handler = arc.http.async(route)

Our POST function catches the request body and saves it to a DynamoDB table and returns a success query param to illustrate that the server did it's part.

You can view the completed code repo here: https://github.com/pchinjr/deno-mixed-runtimes

Serverless side rendering in Deno and Begin

Paul Chin Jr. — Mon, 22 Feb 2021 18:32:41 +0000

Lambda functions are really good at returning a string of text. In this article, we will review how to create a cool personal website with nothing but functions. We won't have to worry about configuring a web server, and our content will be server-side rendered, but serverlessly.

To get started with the completed app click the button below to deploy it in 15 seconds:

Our entire page will be rendered from a single lambda function. Take a look at src/http/get-index/mod.ts

import Main from './views/main.js'

export async function handler (/*req: object*/) {
  return {
    statusCode: 200,
    headers: {
      'content-type': 'text/html; charset=utf8',
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
    },
    body: Main({
      /**
       * Basic bio
       */
      fullname: 'Your Name', // ←  Start by adding your name!
      title: 'My personal site!',
      occupation: 'Artist & Photographer',
      location: 'West Glacier, MT',
      bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.',

      /**
       * Contact / social
       * - Comment out any item below to remove it from your page
       */
      email: 'your@email.com',
      twitter: 'yourTwitter',
      linkedin: 'your-linkedin-name',
      instagram: 'yourInsta',
      facebook: 'your-facebook-name',

      /**
       * Layout
       */
      photographer: 'Ivana Cajina',
      service: 'Unsplash',
      credit: 'https://unsplash.com/@von_co',
      image: '_static/background.jpg'
    })
  }
}

This single Lambda function takes in the information we will need to fill in the site. Notice that we can use ESM to import the Main function, which will return an HTML string to the browser.

Let's take a look at the Main function that we import.

import Styles  from './styles.js'
import Symbols from './symbols.js'
import Splash  from './splash.js'
import Content from './content.js'

export default function Main(props = {}) {
  let title = props.title || 'Personal Website'
  return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
  <title>${title}</title>
  ${Styles(props)}
  <!-- Replace this with your own custom font link and edit Styles font-family -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
  <!-- End custom font -->
  <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" rel="icon" type="image/x-icon">
</head>
<body
  class="
    min-width-20
    display-flex-large
    height-100vh
    overflow-hidden-large
  "
>
 ${Symbols}
 ${Splash(props)}
 ${Content(props)}
</body>
</html>
  `
}

From here the site is broken up into different modules for each component. Each component is a function that accepts props and returns an HTML string. The modules we import at the top are going to be all the styles, svg symbols, a component for the background image and accreditation, and finally the content.

The pattern found here can be traced all the way down through content.js, which contains more submodules like heading-large.js, which is the component for showing a name. Let's take a look at content.js and heading-large.js.

import LargeHeading from './heading-large.js'
import MediumHeading from './heading-medium.js'
import LocationLink from './link-location.js'
import MailLink from './link-mail.js'
import SocialMedia from './social-media.js'
import Icon from './icon.js'

export default function Content(props = {}) {
  let fullname = props.fullname || ''
  let occupation = props.occupation || ''
  let location = props.location || ''
  let bio = props.bio || ''
  let email = props.email || ''
  let twitter = props.twitter || ''
  let linkedin = props.linkedin || ''
  let instagram = props.instagram || ''
  let facebook = props.facebook || ''

  return `
<section
  class="
    display-flex
    flex-direction-column
    height-content
    height-auto-large
    overflow-auto-large
  "
>
  <div
    class="
      display-flex
      align-items-center-large
      justify-content-center-large
      flex-grow-1
      flex-grow-2-large
      max-width-35
      margin-right-auto
      margin-left-auto
      padding-48
      padding-5-large
    "
  >
    <div
      class="
        margin-right-auto
        margin-left-auto
      "
    >
      ${LargeHeading({
    children: fullname
  })}
      ${MediumHeading({
    children: occupation
  })}
      ${LocationLink({
    location
  })}
      <p
        class="
          margin-bottom-42
          font-size-16
          color-383D3B
        "
      >
        ${bio}
      </p>
      <div
        class="
          display-flex
          flex-wrap-wrap
          align-items-center
          justify-content-space-between
          margin-bottom-16
        "
      >
        ${MailLink({
    email
  })}
        ${SocialMedia({
    twitter,
    linkedin,
    instagram,
    facebook
  })}
      </div>
    </div>
  </div>
  <div
    class="
      display-flex
      align-items-center
      justify-content-space-between
      padding-top-16
      padding-right-32
      padding-left-32
      padding-right-48-large
      padding-bottom-16
      padding-left-48-large
      color-5A5C5B
      background-color-F2F0F3
    "
  >
    <span
      class="
        display-flex
        align-item-center
      "
    >
      <span
        class="
          margin-right-8
          color-979797
        "
      >
        Built with
      </span>
      <a
        class="
          fill-979797
          fill-hover-FD6D6D
          transition-fill
        "
        href="https://begin.com"
        target="_blank"
        rel="noopener"
      >
        ${Icon({
    class: 'fill-inherit',
    href: 'begin',
    style: 'width:4rem;height:1.2725rem;'
  })}
      </a>
    </span>
    <a
      class="
        display-block
        padding-top-8
        padding-right-16
        padding-bottom-8
        padding-left-16
        font-size-12
        font-weight-300
        text-decoration-none
        color-FFFFFF
        border-radius-pill
        background-color-979797
        background-color-hover-058AEA
        transition-background-color
        text-transform-uppercase
      "
      href="https://begin.com"
      rel="noopener"
      target="_blank"
    >
      Build yours
    </a>
  </div>
</section>
  `
}

The Content() function calls LargeHeading() and passes in the name to be rendered. Let's look at heading-large.js.

export default function LargeHeading(props = {}) {
  let children = props.children || ''
  return `
<h1
  class="
    margin-bottom-24
    font-size-42
    font-weight-300
    color-5A5C5B
  "
>
  ${children}
</h1>
  `
}

We can follow this same pattern for the rest of the submodules in content.js where each function is returning a string template literal of HTML.

We can now get clean HTML to the front end with dynamic information constructed from a single Lambda function.

Serverless background tasks with OpenJS Architect - Part 3

Paul Chin Jr. — Mon, 22 Feb 2021 18:31:04 +0000

Queues example

@queues are very similar to @events because they also allow for asynchronous message processing. @queues will provision an AWS SQS queue and register a Lambda function to handle messages that are sent to the queue. There are notable differences between @queues and @events. While @events push messages to all of its subscribers, @queues will poll for messages. Queues work on the first message in the queue before moving onto the next. Queues will also keep retrying until it is delivered for up to 4 days.

Let's make an example message queue by starting with a fresh Architect project

npm init @architect ./arc-queues-app
cd arc-queues-app
npm install @architect/functions

Open up the app.arc file and modify the manifest to include our @queues function as follows:

# app.arc
@app
arc-queues-app

@http
get /

@queues
account-signup

After modifying the app.arc file you can run arc init from the project root to scaffold the function folders with Architect.

The queue function uses SQS as an event source. You can use this pattern to move data between Lambda functions and using the queue as a temporary data store. To write a queue function, make a new file in /src/queues

// src/queues/account-signup/index.js
exports.handler = async function queue (event) {
  event.Records.forEach(record => {
    const { body } = record;
    console.log(body);
  });
  return {};
}

Now we can modify our get-index function to publish a message as follows:

// src/http/get-index/index.js
let arc = require('@architect/functions')

exports.handler = async function http(req) {
  let name = 'account-signup'
  let payload = {body: req.body, text: 'yolo'}
  await arc.queues.publish({name, payload})
  return {statusCode: 201}
}

Run npm start from the root of the project to start Sandbox. Navigate to http://localhost:3333 and take a look in the terminal for our output.

You should see the @queue event object being logged in the console.

@queue {
  "name": "account-signup",
  "payload": {
    "text": "yolo"
  }
}

This event has name and payload keys which are reflected in the records when the queue is polled by the Lambda. You should also see the output from the account-signup function handler:

{"text":"yolo"}

Let's follow how Architect implements @queues by default with CloudFormation. Run arc deploy --dry-run and open up sam.json. You should see that AccountSignupQueueLambda has an Events source specified by type of "SQS":

"Events": {
          "AccountSignupQueueEvent": {
            "Type": "SQS",
            "Properties": {
              "Queue": {
                "Fn::GetAtt": [
                  "AccountSignupQueue",
                  "Arn"
                ]
              }
            }
          }
        }

Architect also creates an SQS Queue with CloudFormation. Notice below that the queue is set to FIFO, instead of standard. This means this Lambda will try to ensure that it handles all messages in order as they come in batches.

"AccountSignupQueue": {
      "Type": "AWS::SQS::Queue",
      "Properties": {
        "VisibilityTimeout": 5,
        "FifoQueue": true,
        "ContentBasedDeduplication": true
      }
    },

The @architect/functions library has publish() and subscribe() methods that wrap the JSON payload with a compatible Lambda function signature.

Serverless background tasks with OpenJS Architect - Part 2

Paul Chin Jr. — Mon, 22 Feb 2021 18:30:49 +0000

@scheduled example

Another common background task is @scheduled functions. These functions are invoked on a schedule defined in the app.arc file. These functions are good for cleanup tasks or kicking off other kinds of health checks. Let's make a new project and add a @scheduled function.

The first thing we will need is a fresh Architect project. We can create one directly from the terminal.

npm init @architect ./arc-scheduled-app
cd arc-scheduled-app
npm install @architect/functions

Now we can open up the app.arc file and add a scheduled function to the manifest.

# app.arc

# your project namespace
@app 
arc-scheduled-app

# http functions and routes
@http
get /

# scheduled functions listed by name and rate
@scheduled
daily rate(1 day)

Architect looks for the function named daily in the src/scheduled/daily folder. So let's go ahead and write one.

exports.handler = async function scheduled (event) {
  console.log(JSON.stringify(event, null, 2))
  return
}

When this function is deployed, it is registered to an AWS CloudWatch Event. The event will trigger this function to handle the event payload coming into it. It should be treated as something that happens in the background of your main application to handle work on a regular and periodic cycle.

Let's take a look at the generated sam.json to see how the resource will be created.

From the terminal, run arc deploy --dry-run and take a look at sam.json in the project's root directory. Here we can see the CloudFormation that will generate the rule and the trigger.

"DailyScheduledEvent": {
      "Type": "AWS::Events::Rule",
      "Properties": {
        "ScheduleExpression": "rate(1 day)",
        "Targets": [
          {
            "Arn": {
              "Fn::GetAtt": [
                "DailyScheduledLambda",
                "Arn"
              ]
            },
            "Id": "DailyScheduledLambda"
          }
        ]
      }
    },

This shows that the function is a scheduled event with a rate of being invoked once a day. The rate expression starts when the rule is created at the time of deployment. If you need more fine grained control over the timing, then you'll have to write a Cron expression. For more information about schedule rules, follow the AWS documentation

Stay tuned

In the next part we will look at using Queues with OpenJS Architect!

DEV Community: Paul Chin Jr.

Balancing Complexity: A Tale of Array Includes vs. Negation

The Farmer's Robotic Helper

The Negation Approach

The Array Includes Approach

Conclusion

Creating a serverless API and CLI tool

Creating the API

Creating the CLI tool

How to build a full-stack serverless movie tracker with OpenJS Architect - Part 2

Progressive Enhancement and delivering client-side JS

Adding star ratings and comments

How to build a full-stack serverless movie tracker with OpenJS Architect - Part 1

What we're building

The tools we will need

Create a new Architect project and set up CI/CD on Begin

Infrastrucure as Code, app.arc file

GitHub OAuth and environment variables

Implementing OAuth login flow

Testing Auth

Building our get-index route

Saving the 'watched' movies to DynamoDB with @begin/data

Serverless Shopping Cart with OpenJS Architect

Create a new Architect project

Modify the app.arc file

Modify the get-index route

Adding a database layer

Modify the post-cart route

Modify the post-cart-delete route

Next steps

How to use external APIs with Serverless Functions

Create a new Architect project

Infrastructure as Code

Set up environment variables

Depoloying on Begin

Serverless Scheduled Functions on Begin

Serverless dependency management in OpenJS Architect

Dependencies defined in your root package.json

src/shared and src/views

src/shared example

src/views example

Mixing Deno and Node with Serverless Functions on Begin

Serverless side rendering in Deno and Begin

Serverless background tasks with OpenJS Architect - Part 3

Queues example

Serverless background tasks with OpenJS Architect - Part 2

@scheduled example

Stay tuned

Infrastrucure as Code, `app.arc` file

Building our `get-index` route

Saving the 'watched' movies to DynamoDB with `@begin/data`

Modify the `app.arc` file

Modify the `get-index` route

Modify the `post-cart` route

Modify the `post-cart-delete` route

Dependencies defined in your root `package.json`

`src/shared` and `src/views`

`src/shared` example

`src/views` example