Modern JavaScript: A Quick HowTo Brew

[gm112]

Hey, lurkers of the lonely ghost ship known as the USS GDU. Today we're going to talk about JavaScript!

 

Getting Started

First, get a JavaScript Development Environment setup. Thankfully, its rather platform agnostic and the instructions for each remain mostly consistent (aside from a few nuances with working with the command line).

Premise

First, and foremost let's talk about NodeJS. It is released as two different versions: Current and LTS. LTS stands for Long Term Support, which means that its part of a release cycle that is slower and only consumes security or critical-related bug fixes. Making it a perfect candidate for putting where ever you are planning on hosting your new JavaScript project! Its use case differs from the one we're going for here. We are trying to use the latest and greatest features that JavaScript and NodeJS have to offer, so why not go with the newest stuff? But then what happens to your code when you end up wanting to run new stuff and feel confident in knowing that your project will consistently work across different versions of JavaScript/NodeJS? Meet Webpack and Babel. The bulk of this article will cover briefly how to set both utilities up and why they exist.

Setting up your Project

• NodeJS (https://nodejs.org/en/)
• Prerequisities
  • A Text Editor
  • Basic coding knowledge
  • Basic command line

When you have installed the Current version of NodeJS, then open up your command prompt and proceed to do the following:

1. Navigate to your project directory. Make sure its empty.
2. Run "npm init", and follow the prompts. Press enter for defaulted answers.

Now you have generated what essentially is your project file for your JavaScript project. A file has been created which should is called "packages.json", and inside it contains meta data that explains what your project is and what dependencies it has, allowing for npm to automagically install any packages you may need for running your or someone else's project. Anyways, now we're onto the next part!

Installing Babel

We will start by installing Babel first, before Webpack. Because in working backwards, we can approach this complicated setup in layers. Now, onto important matters....

Babel is a utility made for the purpose of translating JavaScript and morphing it so it can be "compiled down" from newer versions to older versions of the JavaScript spec known as ECMAScript.

• Run "npm install --save-dev @babel/core @babel/cli @babel/preset-env"
  • --save-dev tells npm to save the package under "development dependencies" rather than a traditional dependency. This generally won't bare any differences.
  • @babel/core and @babel/preset-env are both two packages which make up Babel and a preset plugin.
  • @babel/cli adds a "babel" command to your command line.

Using your text editor, in the same directory as the package.json file, create a new filed called ".babelrc".

.babelrc

After creating the .babelrc file, let's jump into it! This file is where you will be configuring Babel from. It is nothing more than a basic JSON file. Refer to here for documentation: https://babeljs.io/docs/en/babelrc

Make sure .babelrc looks like the following:

{
  "presets": ["@babel/env"]
}

and you're done with installing Babel!

Using Babel

Now that you've set everything up, you're now able to make use of Babel!

• Create a new file called "test.js"
• Populate the file so it looks like the following:

const helloWorldFunction = () => console.log('hello, world!')

• Run "babel test.js --out-file test.compiled.js"
• Run "node test.compiled.js" and you should see the following:

hello, world!

End?

For now. I will be updating this post with the other parts as time goes on. I find talking JS is fun and interesting and this information unfortunately can be overwhelming to beginners, so I decided to put this together to help shift through the sand... derp

[gm112]

God dammit lol. In the time since I wrote this article, Babel and Webpack changed their tooling around so some of the instructions are invalid technically. So next entry will talk about what monorepositories are. It's a bit of a tangent from JavaScript itself, but given the change and the ecosystem of JS I might as well cover it to give extra context around how the JavaScript ecosystem tends to work.

[Guest Melphina Micaela]

It's because you take too long. >: [
(Can't wait for the next one tho! : >)

[hawthorneluke]

On 9/5/2018 at 7:12 PM, gm112 said:

God dammit lol. In the time since I wrote this article, Babel and Webpack changed their tooling around so some of the instructions are invalid technically. So next entry will talk about what monorepositories are. It's a bit of a tangent from JavaScript itself, but given the change and the ecosystem of JS I might as well cover it to give extra context around how the JavaScript ecosystem tends to work.

frontend development in a nutshell lol

[gm112]

On 9/10/2018 at 8:18 AM, hawthorneluke said:

frontend development in a nutshell lol

;(

On 9/9/2018 at 9:38 AM, Melphina Micaela said:

It's because you take too long. >: [
(Can't wait for the next one tho! : >)

Yeah, I have it rewritten but I'm doing the next part too. I will post it on Friday. 🙂 

 

(Translators Note: Friday means in 2019, not 2018 :X)

 

EDIT: I have updated the first post like I intended. The second part I pulled away because I want to go more into detail, so I've just been waiting on finding some down time to come up with something neat. I originally didnt have a end goal in mind for this. It took a bit to realize that hey, maybe I should direct the content towards making something.. So, yeah.. I'll update this momentarily. Sorry.

[gm112]

Surprisingly, a lot of this content has remained relevant. I should continue this series.