Hi, everyone, I’m Allison. I'm a developer marketing manager here at
observable in observable framework projects. You can write data loaders in Python, JavaScript, R or any other language to generate static
files at build time. With data loaders, you can minimize file sizes and reduce client
side data processing for faster page loads. In this video, I'll demo how you can create
your first data loader in a Framework project, then access the output from
a data loader in a page, and see change
s to data loaders
reflected in live preview. This video follows the example
in our Getting started tutorial, which we’ll link to below and where you
can find the code you see added here. So let's get started here. We're looking at an existing Framework project. We've already added a new markdown
file weather.md, in the docs directory. That'll be the project page where we
access the output of the data loader we create next. Let's add our new data
loader in a data subfolder within docs. Data
loaders have double file extensions
indicating the output type with the first extension, then the loader type with the second. We'll create a JavaScript data loader that
generates a JSON file named forecast.json.js. With the data loader file created, now we'll
add JavaScript code to access weather forecast data for a specific location in the US from
the National Weather Service’s free API. First, we provide a latitude and longitude from which the API will find
the nearest weather station.
We'll start with a weather station
near San Diego, California. Then we'll add a custom function
that checks the API response status. When we try to access the data
that will either return the data if everything works as expected, or
an error message if the fetch fails. Using that function will access
the station data from the API, interpolating the latitude
and longitude in the URL. Then we'll just pull out the
weather forecast data. And finally, we'll write the data in JSON format to
st
andard output using process.stdout.write. That last piece is a requirement for all data
loaders. No matter what language you write a data loader in the output needs to be sent to
standard output to work in your Framework project. Ok. So with our data loader created, how do
we see and access the generated data snapshot? Well, one option is to manually run the data
loader here, we can run node then the path to our data loader in the terminal, which
will print out the entire generated output.
That's a nice way to see if
your data loader is working as expected and can be useful for debugging. But often you'll be iterating in a data loader
while watching updates in a page preview. Let's access forecast.json, the output
of our data loader in weather.md. We’ll add a JavaScript code block, then use
FileAttachment to read in the data snapshot. With Framework’s file-based routing, we’ll point
to the static file served by a data loader using the same relative path we'd use to get from
our markdown file to the data loader itself. We'll point from docs to data/forecast.json. Let's also add a line in weather.md
to display the forecast data. We can see our page content by starting
a live preview using npm run or yarn dev. Now we can see the forecasted weather
data for our station near San Diego, closest to the latitude and longitude
that we specified in our data loader. A really nice part of working
in Framework projects is that live preview also works with data loader updat
es. Let's change the latitude and longitude in
the data loader to a location near Fairbanks, Alaska. On save the updated loader runs again, generating a new data snapshot that is
automatically reflected in live preview. So we can now see the colder
weather forecasted for Fairbanks. This is one small example of writing a data loader
then accessing the output in a project page. But the possibilities really are limitless. You can write data loaders in
whatever language you want to wrangle and
analyze your data, then
generate snapshots at build time. See the links below to learn more from
our framework, documentation and see data loaders in action in our live examples
and come back again soon in future videos, we'll cover page layouts, project customization
and deploying projects to Observable.
Comments