The browsers are rolling out updates to support more of the latest features of JavaScript defined by ECMAScript technical committee 39. Have you thought about how much can we write today without using an app bundler like Webpack, Rollup.js or Parcel? Below I will go through a few JavaScript features we can use in today’s modern web browser when building a new web app.

coffee mug with pinecones Photo by Tetiana Shadrina on Unsplash

Unsurprisingly, Internet Explorer doesn’t support many of these features, however, Edge seems to do a decent job.

The idea behind this post is to begin to consider whether or not a bundler is really needed, because it has become the norm to use one for lots of JS apps. A bundler is an additional dependency which you may need to configure quite extensively to get the output you need, adding significant complexity before building any app features. I’m not saying we don’t need them, but it could be possible to start a project without a bundler, and add it in at a later stage when you find the need. Perhaps you have a small enough project where it’s not needed: perhaps a Chrome extension for example.

New language features added in the browser

Below are a few new JavaScript features which will work in most modern browsers.

  • let and const for declaring variables and destructuring assignment.
  • Template literals are string literals allowing embedded expressions and can be multiline. string literal ${expression}
  • Rest/spread operator ... take remaining values (rest) or apply key/values (spread) to an object or array.
  • Arrow function expressions () => {}, is a more compact syntax than the normal function expression and does not have its own this but instead it uses the enclosing lexical scope.

Examples

const letters = ["a", "b", "c", "d", "e"];
const starter = {
  hello: "hello",
  world: "world"
};

const [a, b, ...rest] = letters;
console.log(a, b); // => a b
console.log(rest); // => ["c", "d", "e"]
const spread = rest;
const numsLetters = [1, 2, ...spread];
console.log(numsLetters); // => [1, 2, "c", "d", "e"]

const { hello } = starter;
console.log(hello); // => hello

let count = 1;
count += 5;
console.log(count) // => 6

console.log(`Template literals ${starter.world}`) // => Template literals world

const arrowLog = (message) => console.log(`->: ${message}`)
arrowLog("point"); // => ->: point

Async/Await and making HTTP requests

You will be pleased to know that async/await is supported in the browser which will make using native fetch API even easier to work with.

async function getRecipe() {
  const res = await fetch(
    "https://api.github.com/search/repositories?q=tetris+language:assembly&sort=stars&order=desc"
  );
  const data = await res.json();
  console.log(data);
  return data;
}

JavaScript modules and organising your app files

With most applications you will want to separate your app into modules. Typically you will create a new file which will export an object or function that can be imported in another file. This means it would need to support a module system.

Modern browsers do support ECMAScript modules by adding a script tag with the type="module" and here are some points to note about this approach. See module browser support.

  • Each module has its own scope which is not the global one
  • Strict mode is always ‘on’, even when “use strict” directive is not provided
  • The module may import other modules using import directive
  • The module may export bindings using export

Another interesting attribute of a module script is it behaves like a defered script, in that is will not block the parsing of the HTML and execute after parsing has completed. In the example below you can see the script tag is in the head but our imported module will reference the div tag further along.

Example use of module script tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

// index.js
import { startApp } from "./todo-app.js";

startApp();

// todo-app.js
export function startApp() {
  const appBox = document.getElementById("app");

  appBox.innerHTML += "I was imported";
}

It is also possible to do an inline import, see below:

<script type="module">
  import { startApp } from "./todo-app.js";

  startApp();
</script>

Read more details about module script tag here.

Potentially you could have a small project or start a new one without the need of a bundler. If you decide to not use a bundler, I’d like to hear what challenges you faced and what you tried to do to solve them? Let me know on Twitter, or in the comments below.