How to JavaScript? (or yet another JavaScript guide) Part 1 - Introduction
The next June 1st will mark 3 years since I started working with JavaScript professionally, and it’s amazing to think on how much I’ve learned and how much the way we do things changed since then.
My experience with web developing at that time was none, so it’s embarrassing, and also somewhat nostalgic, to remember that when I started working at linkedcare I knew very little of JavaScript and Rails. So I started studying, and learning how Rails renders assets server side, how to load scripts into HTML pages, use JavaScript to manipulate the DOM, make asynchronous requests with AJAX… But I digress.
Fast forward to today, with the advent of Single Page Applications and frameworks like AngularJS, EmberJS and libraries like ReactJS the presence of JavaScript has never been more prevalent and felt! As opposed to 3 years ago, where we rendered the assets server side and JavaScript was a nice (albeit in our case a very import) extra, today we talk about client side rendering and servers being a simple provider of resources. Thanks to the community effort there are some amazing tools for us to use to aid us working with JavaScript, but they can be quite complex and overwhelming to use. So… And now we arrive at the purpose of this guide, how do we use these tools? Recently I’ve been working on a personal project and I though that it would nice to document my workflow, in hopes of helping others going through the same (and also my future self, since I’m quite forgetful :))
First install Node.js, there’s several ways to achieve this so just head over to their homepage and select your preferred method. Node.js is a requirement for some of the packages that we’ll be using (like webpack), and installing Node.js will also install npm, which will help us manage package dependencies and more! So after completing this step, let us initialize our project. From your terminal, go to the directory where you want to create your project and execute:
$ npm init
npm will prompt us with some simple questions regarding our new project so just answer them (for entry point and test command just leave them with the default values). After we answer all question npm will generate a file called package.json based on the answers:
{
“name”: “how-to-javascript”,
“version”: “1.0.0”,
“description”: “Sample project”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1"
},
“author”: “jun.hanamaki”,
“license”: “ISC”
}This file will contains information about our project like its name, author, scripts to run, and also package dependencies (if you come from ruby it would be the equivalent to the .gemspec file). Speaking of packages, lets try installing one right now! For that just execute the following command:
$ npm install webpack --save-dev
This instructs npm to install a package called webpack, and because we passed the flag --save-dev it will also register it as a development dependency in our package.json (try checking it to see that the file has changed). The great thing about all this is that you won’t need to add these external dependencies in your source code, since anyone that starts working on this project can run the following command for npm to install the dependencies:
$ npm install
Now, what does it mean to install a package with npm? If we check our project’s directory, you’ll notice a new folder called node_modules, and this is where npm will install the projects dependency packages (you should add this folder to the ignore list of your code repository). And why did we install webpack as a development dependency? Well, our project depends on webpack during development to bundle modules, as in it grabs our .js and/or .css files and bundles them to be usable in the browser, but nothing like an example to show what all this means. This time we add lodash to our project:
$ npm install lodash --save
We install it with the flag --save so that it gets added to package.json as a dependency, since this package is required for our project (and not just for development).
Next, in our projects directory, create a folder called src, and inside it create a file called index.js, and write the following code:
var _ = require("lodash");window.alert(_.capitalize("hello world!"));If this looks strange, what we are doing here is using CommonJS’s require function to load a library (in this case lodash) into the variable named _, and invoking the method capitalize. Unfortunately this code doesn’t automatically work in the browser and needs to be transpiled and bundled into a file that is understood by it, this is where webpack comes into play. Go to your projects root and run the following command:
$ node_modules/.bin/webpack src/index.js dist/bundle.js
Running this command will instruct webpack to bundle src/index.js and all its dependencies into dist/bundle.js. Try opening dist/bundle.js and you should notice how big the generated file is, this is because it contains all the code from its dependencies (in this case lodash), our code, and the extra code that is required to make all this work in the browser.
Finally we just need to test if everything works, and for that we’ll create a simple index.html file in the projects root with the following HTML:
<!DOCTYPE html>
<html>
<script src="dist/bundle.js"></script>
</html>
Just open this file in your preferred browser and voila! It should show a popup with “Hello world!”.
So this will be it for my first post and today’s code is shared here, it is a very trivial and didactic example from which we’ll be building upon in the next posts.
Thanks for reading!