The 2000 line framework challenge: How to template JSON or APIs in 3 lines of component code + 1 extra file (no NPM needed)

In this tutorial I will show how StaticData can be used to very quickly assemble web components that bring in JSON data or API data and mount it on the web. This can work with any JSON or API data, and can even support other formats as well (e.g. certain CSV formats are supported out-of-the-box!)

When to use Modulo.js for templating APIs or JSON

This is something that Modulo.js does really well, since it's one of the most common tasks that frontend engineers have to do. Basically, have you ever been in the following situation?

• I want to make a basic static site, but I wish I could keep one part of it automatically updating from a JSON or API source (e.g. an event calendar, or AirTable, or Google Sheet)
• I am using a complex and heavily customized framework (e.g. Wordpress, Drupal, or even Rails), but it's much harder to insert API data in any way they suggest. I wish I could just stick this API data right here, with just a snippet I can copy and paste into the template!
• I am a new developer or student who wants to know the easiest, least complex way to get practice combining HTML with data (perhaps the most important frontend skill to learn)

If one of those seem like your situation, then this is the tutorial for you! If you are new to Modulo.js, then read the next section. Otherwise, jump down to the "good stuff" below.

Wait, what is this 2000-line framework, Modulo.js?

Modulo.js is a solution to a hard challenge: How can we build frontend tools that are much simpler so it's easier for static site builders, Rails and PHP and Wordpress users, or coding students? How can we make a very tiny, robust, useful framework in 2000 lines of understandable code? Basically, how do we build frameworks that aren't mysterious labyrinths of node_module dependencies? A Vue/Svelte/React-lite framework a single, easy-to-read file is appealing to beginners and wizened old-head hackers alike! Modulo.js is a single 2000 line file without any dependencies. It is HTML-first, and browser-first, and integrates with only a few lines of code in any HTML file. It immediately enables you to write productive Web Components with many modern features. Check it out: ModuloJS.org

Starting out with a component

In this tutorial, we'll use the GitHub API. Why? It's well-documented, and no token is needed for up to 60 requests per hour. However, any JSON and many CSV APIs should work. Also, files saved on a static server will behave the same, so if you have a data set, use a converter to export whatever file format it's in now into the JSON format, and save that file somewhere in order to follow this tutorial.

Let's start with a very basic component:

<Template>
    <strong>Name:</strong>  <br />
    <strong>Site:</strong>  <br />
    <strong>Tags:</strong> 
</Template>

The next step is identifying the API or JSON URL we want to use. For example, to get information on the Modulo framework itself, we would do: https://api.github.com/repos/modulojs/modulo. Or, a personal repo (user michaelpb and repo whiteboard) might look like this: https://api.github.com/repos/michaelpb/whiteboard

Once you've identified the URL and confirmed it works, then adding with a StaticData CPart is the easiest part, since it takes only 3 lines of component code (put after the Template):

<StaticData
    -src="https://api.github.com/repos/modulojs/modulo"
></StaticData>

To explain: StaticData brings in and parses a data source based on extension (defaulting to JSON), and will also bundle the data when compiled or built (so no more requests are needed).

Adding template variables to show data

Now that we've added the StaticData CPart, we can add references to it in the Template to show the data itself:

<Template>
    <strong>Name:</strong> {{ staticdata.name }} <br />
    <strong>Site:</strong> {{ staticdata.homepage }} <br />
    <strong>Topics:</strong> {{ staticdata.topics }}
</Template>

To dissect what we did: staticdata is the name of the data we bring in (note that it's lowercase), and . is used to access "inside" of that data (just like in JavaScript). Thus, .name accesses the "name": JSON data property, and so on.

However, the topics is all "smooshed" together. We want to make it better styled. Let's now practice making it in separate paragraphs.

Using a for loop to loop through "plural" data

We'll convert the simple variable substitution syntax (that is {{ ... }}) into the more appropriate for-loop template repetition syntax (that is, {% for ... in ... %}...{% endfor %}. We'll combine that with HTML syntax for <ul> and <li> to make an unordered list. Observe:

<Template>
    <strong>Name:</strong> {{ staticdata.name }} <br />
    <strong>Site:</strong> {{ staticdata.homepage }} <br />
    <strong>Topics:</strong>
    <ul>
      {% for topic in staticdata.topics %} 
        <li>{{ topic }}</li>
      {% endfor %}
    </ul>
</Template>

Adding bootstrapping code

Finally, if you are new to ModuloJS, you might be wondering how we can actually use this code. Well, the boilerplate for Modulo is just a few lines, and since it has no dependencies other than the 2000 line JS file, we can build out a the demo without anything else (not even a test server is needed).

The boilerplate looks like:

<!DOCTYPE html>
<template Modulo>
   <!-- Component definitions go here... -->
</template>
<script src="https://unpkg.com/mdu.js"></script>

All together: Web components which bring in JSON API data and mix it with HTML

So, combining the code above with this boilerplate, and a <Component name="DisplayAPI"> definintion so we can mount it on the page, and we have a complete working example! Try the code below as an HTML file for a complete example, then open using your browser.

<!DOCTYPE html>
<template Modulo>
  <Component name="DisplayAPI">
    <Template>
        <strong>Name:</strong> {{ staticdata.name }} <br />
        <strong>Site:</strong> {{ staticdata.homepage }} <br />
        <strong>Topics:</strong>
        <ul>
          {% for topic in staticdata.topics %} 
            <li>{{ topic }}</li>
          {% endfor %}
        </ul>
    </Template>
    <StaticData
        -src="https://api.github.com/repos/modulojs/modulo"
    ></StaticData>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>

<!-- to use it: -->
<x-DisplayAPI></x-DisplayAPI>

In the browser:

Conclusion

Hope this code is useful. Next time I'll be going over similar topics, exploring more ways to quickly bring in data and code!