3/3/2022

What's in a platform?

Before I send you off to start writing apps, I really want to talk about platforms from a high level. I think it's nice to get a bird's eye view of the landscape you're about to journey into. This post may contain a few buzz words that you haven't encountered before, especially if you're super new to programming. Don't worry too much about the specifics here. While I'm going to be giving you some high level info, I'll ground us a bit by giving examples relevant to the javascript ecosystem (since that is where I have my students begin).

My goal here is to explain the different parts of a platform and give some examples of each piece. I hope you walk away with one major realization: it doesn't matter if you are building for iOS, Android, Windows, Linux, or the Web. These pieces all exist within each of those ecosystems, and once you are able to understand how they all fit together in one ecosystem, building for the next will be vastly less intimidating.

What do I mean by platform?

By platform I mean the ecosystem that we depend on to build our applications. There is essentially no way to create, build, and release an application to the world without depending on some larger ecosystem of tools. These tools include things like the programming language itself, the libraries you use to build your apps, the tools you interact with while building it (such as a text editor, dev server, etc.), and so on.

How do you learn a platform?

Learn The language Primitives

Whatever platform you're building for probably has a default langugae. For the web ecosystem it's JavaScript. For the apple ecosystem it's swift. For android it's java/kotlin. You can definitely build apps for these ecosystems using other languages, but they almost always have some default ecosystem that is active and heavily supported. Some javascript primitives in use below:

const myThing = "this in an immutable variable";
let numPlanets = 8; // this is a mutable variable
var myObject = {
    stuff: "things",
};

Learn the std library

You should strive to understand which parts of the language are provided to you by different mechanisms. The language itself is comprised of primitive operators, keywords, etc. The standard library (typically abbreviated std) is an EXTENSION to that language provided to you by the language. Javascript doesn't actually hava a real standard library, but there are some common utilities that you can expect to be present in most javascript environments. Here are some examples.

const myInt = Number.parseInt("8");
const mappedArray = [1, 2, 3].map(e => e + 1); // [2, 3, 4]

Learn about the runtime/interpreter/compiler

How/where/when does your code actually run? Does the environment that runs/builds your code provide you with anything beyond the primitives/std lib? How can you differentiate them? In the browser you are handed a bunch of APIs to respond to events that happen. The browser controls all of this, and you must humbly ask the browser to notify you events that happen. If you write a server-side script using Node.js, the Node.js runtime is your environment. Here are some examples of using builtin extensions provided by both environments.

Browser

// Get a reference to an HTML element
const myDiv = document.getElementById('#my-div');

// Create HTML inline!
myDiv.innerHTML = "<p>Hahaha look mom, raw HTML in javascript!</p>";

// Respond to click events
function divOnClick(event) {
    console.log("Holy moly this div just got clicked!", event.target);
}

// Register click event response function
myDiv.addEventListener('click', divOnClick);

Here's the entire MDN Web API documentation;

Node.js

// Node.js
import fs from "fs";
fs.readdir("path/to/dir", (err, result) => {
    if (err) return console.err("Sadz 🙁", err);
    console.log("All the files/folders in my dir!", result);
});

Here's the current version of the Node.js API Documentation

Learn the package manager

Figure out what package manager your chosen ecosystem uses. For node.js and modern javascript apps, this will npm (or yarn);

Learn about popular libraries/packages/tools

Make a list of the 100 most popular/used libraries/frameworks/tools in your ecosystem. Learn about a couple of them every day. Check out the NPM registry here.

Figure out deployment

How do you take an application for your target ecosystem, build it, and then get it out into the world? We can handle the specifics of how to do this later, but for now it's worth looking into some of these popular tools:

Previous Next

Ask me questions on twitter or email me at ty@tytr.dev

Tytr