Vanilla.js (2 Part Series)
This guide takes less than 10 minutes to complete. At the end of this guide — as part of final code review — there is a link to see the final application code. (If you don’t execute the steps in this guide, you can still access the final application code.)
Before you begin, make sure your development environment includes a text editor (your choice) and a web browser (again, your choice).
Vanilla.js depends on no packages and requires zero build tools.
This Quick Start uses a simple text editor of your choice that should already exist on your system. If not, provided you have the browser requirement you can alternatively use jsFiddle. You might get a little spoiled with how easy it is.
To check that you have the Vanilla.js client installed, open your browser, launch your developer tools (typically accessible via
console.info("OK") followed by
ENTER and verify that you see
OK echoed back.
You will use your favorite text editor to create web pages and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
Here’s some sample HTML to get you started:
Here’s some CSS. We need it so the application looks pretty. What the CSS actually does or how it was constructed is one of the great mysteries of modern web development.
You can include the CSS inside a
<style></style> opening and closing tag, or save it in a file named
style.css and include with this special line of code in the
head section of your HTML document:
<link rel="stylesheet" type="text/css" href="style.css">
You develop apps in the context of your text editor. Your file system contains the files for one or more pages.
To create the initial application, either make a file named
app.js and reference it in the body of your page like this:
Or paste the code inside a
<script></script> block. Here is the initial application code:
Yes, it’s a very simple application right now.
On most systems you can simply double-click or tap on the
index.html file and it will open in your browser and run. If you need a web server, that’s when you start doing crazy things like installing third-party tools. Sure, it’s possible.
Assuming you already have node.js configured on your system (and its partner-in-crime,
npm), you can install a simple web server like this:
npm install http-server -g
After that, run it from the directory your files are stored in by typing:
Then you can navigate to your file at http://localhost:8080/index.html.
Your app will greet you with a button that transforms when clicked:
Step 4: Create a Fully Functional RSS-Style Reader with Dynamic Collapsible Posts and Geo-Encoded User Information that Reveals on Hover
Really, it’s not as much work as it sounds. For data, we’ll make a live call to the sample information provided by “JSON Placeholder.” There are several data sets, but we’ll just look at “posts” and “users”.
What library or framework should we use to grab the data?
model. For example, “users” will end up as an array you can reference via
model.users. Notice it takes a callback that is executed when the loading is complete.
Next, we can rewrite the main app code to take advantage of this. Overwrite whatever was there, paste in the
get method listed above, and add this:
The code grabs posts, then users, then maps the users by id on
userIdx to make them easier to reference. Don’t try to run the code yet! A few things are missing. There is a
Wrapper class that eventually will help us dynamically generate HTML elements, and a
renderPost function that, well, renders each post. It looks like we’re on the hook to build these. Let’s create the
It’s a bit of code, but all very straightforward. Oh, and the great thing about classes is that they’re reusable, so we’ll only ever have to write it once. Here’s a quick tour of methods:
- Constructor —generates an element and populates it with text. Also conditionally sets it to invisible or visible and wires up a toggle to make it easy to hide/show the element.
- Click —wrapper to add a “click” listener and call a method.
- Show Selectable —simply sets the style so the cursor turns into a hand indicating an action can be performed.
- Add Class —is this the appropriate place to point out that most of the method names are self-documenting?
- Toggle Display —ahem.
- Append Child — nests an element inside the parent.
- Create Child —a quick way to create and append a child.
Generate —generates a new instance so you don’t have to call
newall the time.
return this. No, not this that you’re reading, but the
Wrapperitself. That’s because it makes it possible to chain function calls for a more fluent API. We’ll see more of that in a second.
Now we can tie it all together. We already fetched the posts and users; we just need to use our handy helper classes to render it. Without further ado …
The code fluently generates the template, wiring in place everything needed for the dynamic interactions. Let’s look at the finished app.
(Clicking on the location links will take you to an online map … you may find the destinations from the sample data to be quite interesting).
You can browse the working example of the app that you created in this Getting Started guide.
Tip: jsFiddle is a great place to experiment with Vanilla.js.
If it were me, I’d just rename that
.js file to have a
.ts extension and compile it to ES5.
Now that you’ve seen the essentials of a Vanilla.js app and your favorite text editor, continue with these other deep thoughts:
fetchso much easier than (if not quite as fun as)
After reading this, you’ll be ready to continue exploring Vanilla.js on your own through the other guides and references available on the Internet, focusing on the features most important for your apps.
“But wait — what if I have to support legacy browsers?”
We'll address that soon!