Lesson Weekend

In Intro to Programming we put our business logic and user interface logic in the same file. However, that's not a good practice; we should definitely separate our logic into separate files, especially for larger codebases. In general, each constructor should have its own file and we should modularize our code as much as possible.

However, if we break up our logic into multiple files, how can they communicate with each other? We need to use import and export statements. import and export statements are a nice piece of functionality that was added to EcmaScript6 (the technical name for JavaScript), which came out in 2015. (Later this week, we'll be diving into more ES6 features.)

Before ES6, developers used NodeJS require statements to share logic between files. Here's an example. Let's say we have a Triangle constructor (similar to our triangle tracking project from Intro) in a file called triangle-logic.js. We'd export it like this:

triangle-logic.js
function Triangle(side1, side2, side3) {
  ...
}
exports.triangleModule = Triangle;

The only line of importance here is the final one; we take the Triangle constructor (on the right side) and assign it to exports, calling it TriangleModule.

Now we can import the Triangle constructor into another file (for instance, our user interface logic) like this:

interface-logic.js
var Triangle = require('./../js/triangle.js').triangleModule;

We use the require statement to get the triangleModule from the specified path. (This is just an example path which will vary from project to project). Now we save it in a variable so it can be used in this file.

Importing and Exporting Code

ES6 simplifies the syntax for developers by using import and export statements. However, ES6 is still using require statements under the hood, so even though we're using different syntax, the exact same thing is happening under the hood.

Here's how we can simplify the above with import and export:

triangle-logic.js
export function Triangle(side1, side2, side3) {
  ...
}
interface-logic.js
import { Triangle } from './../js/triangle.js';

We specify that we want to export the Triangle constructor in our business logic file. Then we specify that we want to import the constructor in our interface logic file.

If we wanted to inherit multiple classes from a file (let's call it shape.js), our import statement would look like this (providing that we have export statements for each of these shapes):

import { Triangle, Rectangle, Circle } from './../js/shape.js';

While ES6’s implementation of classes and modules is really just syntactic sugar over the traditional way of doing things (using require statements), utilizing these features can make your code cleaner, more organized, and easier to read. You should recognize both ways of importing and exporting code, but we'll focus on using import and export while at Epicodus.

One other thing to note: browsers have no idea how to deal with require statements or import and export statements. Fortunately, webpack will take care of that for us! This is where concatenating files comes into the picture. We'll cover that in the next lesson.