Modern JavaScript Development

Welcome to Client-Side tales from a Server-Side Developer.

If your background is server-side development like me, then visiting the land of JavaScript can be quite daunting. Don't get me wrong, I'm not talking about the JavaScript language itself. Whilst the language has recently been updated to ES6, I'm talking about everything else that comes along with it.

Honestly, as an outsider looking in it's like the Cambrian Explosion out there. A soup of different language extensions, frameworks, plug-ins, package managers, task runners, et cetera, et cetera.

Where do you start?

So Many Questions

As I dip my toe into today's JavaScript ecosystem, I want to make sure I'm as forward-leaning as possible. I don't want to be writing JavaScript from 1995! But after spending time reading the interwebs you come away with lots of questions. Questions such as:

• Do I really need to install Node.js, just to write JavaScript?
• What's the difference between the Node Package Manager (NPM) and Bower? Why are there two separate package managers?
• Browserify. Whatify?
• Do I choose Gulp or Grunt? - Do I even need either?
• What the hell is YeoMan?

Seriously, who's coming up with these names?

• Should I be using SASS or SCSS? What about LESS?
• Is Jquery still a thing? I've heard that people depend less and less on it?
• Do I choose Babel or Traceur?
• What about throwing TypeScript into the mix? And what about FlowType? Where does that fit in?
• I've heard that React likes FlowType.. But why didn't Facebook just use TypeScript instead of reinventing the wheel?

Then there is the code editors. If you are on Windows surely you'll be installing the free community edition of Visual Studio 2015. But what if you want to master a code-editor and be able to transfer those skills to Linux and the Mac?

Do you choose:

• Brackets
• Sublime Text
• VSCode
• Atom
• WebStorm

Then there's the frameworks and libraries...

• Ember
• Angular
• Backbone
• JQuery
• React
• Underscore
• Yadda, Yadda. Yadda...

The list truly goes on and on. Fortunately, at this stage I'm not as interested in JS Frameworks and so I haven't explored any of these at this point.

Phew... I'm exhausted!

But choice is Good, right?

I guess choice is good, but if your not in the ecosystem day-to-day then there's a lot to catch up on.

Oh, and by the way... Sorry to break this news to you but if you are reading this post 5 minutes after it was published, then I'm sorry but the above list is probably way out-of-date by now. In fact as you're reading these words 8 more frameworks have just popped into existence and already have a strong following. 😊

My Installation Setup

So, back to my setup. Currently, as it stands, this is the mis-informed JavaScript setup that I have started with:

• Git
• Node.js
• Bower
• VSCode
• Visual Studio 2015 Community Edition (Its free!)
• Babel

And these are the things I will probably be taking a look at later down the line:

• Browserify
• Gulp
• YeoMan
• TypeScript

Let's go over these installs..

Git for Windows

What is it? Git is the popular version control system to host code. A lot of open source JavaScript libraries are hosted on Git.

Why am I installing it? The command line git.exe is needed for you to pull down code and build packages from. Also the Node Package Manager (NPM) uses it.

Node.js and the Node Package Manager (NPM)

What is it? Node allows you to run JavaScript outside of the browser. Simple as that.

Why am I installing it? Node.js allows you to run JavaScript outside the browser which means task-runners like Gulp can run on your system but it also includes the Node Package Manager (NPM). This is the JavaScript equivalent of .NET’s Nuget. It’s easy to see why Package Managers are so popular. If your solution depends on X, Y or Z you can reference them via NPM or Nuget.

Bower

What is it? It's another package manager! Like NPM above

Why am I installing it? But hang on! I've just installed a package manager above (NPM). Why do I need another one? I've found that many JavaScript libraries out there support both NPM and Bower. As an example, take a look at the Moment.js JavaScript library. On its webpage it supports Bower, NPM and NuGet amongst others.

Why is there two? Whats the difference? Is one better than the other? The internet, as always as opinions

https://www.quora.com/Why-use-Bower-when-there-is-npm
http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm

Babel

What is it? Compiles ES6 code down to ES5

Why am I installing it? It's great that ES6 has been released but if you look at this compatibility chart here you will see that a lot of mobile browsers still don't support a lot of ES6 features. That's where Babel comes in. It allows you to write ES6 code today and back-transpile it down to ES5 code so that it still runs on all browsers. It's awesome!

Gulp

What is it? A Task Runner. Something that automates our workflow.

Why am I installing it? Remember that writing the actual code is only half the story. If your using a CSS pre-processor or a language abstraction like CoffeeScript or TypeScript then you need a task runner to compile the SASS to standard CSS and the CoffeeScript to standard JavaScript.

In Visual Studio this is provided inside the box. You can setup pre-build and post-build steps, so that when you press F5 to compile your code it will perform these extra steps. (or use an MSBuild script on the command line)

The equivalent in the JavaScript world is Gulp and it allows you to automate your workflow. For example, as part of deploying your code you might want to:

1. Run Babel to Transpile from ES6 to ES5
2. Run HandleBars to bundle up all your HTML templates
3. Setup your distribution folder (Create folder structure, etc)
4. Convert your SASS or LESS files to actual CSS that the browser understands
5. Lint your code for errors
6. Merge all your JS/CSS into 1 file
7. Minify the code
8. Yadda, Yadda...

Gulp allows you to write JavaScript to chain all these events together. Remember Node.js allows you to write JavaScript code outside the browser, which makes this possible.

Okay, if all you are doing is writing simple JavaScript then perhaps you don't need Gulp at this time. As it happens, I haven't installed it as I am just using a simple Batch File for my build steps.

VSCode

What is it? Its a lightweight code editor

Why am I installing it? I spend the majority of my time in the full fat version of Visual Studio and for personal development I use the Community Edition of Visual Studio 2015 (Its free!). But VS Code is fast, supports a whole host of languages and is cross-platform. As of today, it's still in beta but I intend to use it for all my client-side JavaScript development and see how I get on.

Command-Line Install Script

Here is the command-line install script to install the above:

# Step 01: Install Chooloatey (a windows version of apt-get) https://chocolatey.org/ 

c:\> @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex (( new-object net.webclient).DownloadString( 'https://chocolatey.org/install.ps1' ))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

# Step 02: Install Git (https://chocolatey.org/packages/git.install)

c:\> choco install git.install

# Step 03: Next Install Node.js (https://chocolatey.org/packages/nodejs.install)

c:\> choco install nodejs.install

# you should now be able to run "git" and "node" from the command line (might need to re-open cmd prompt for them to be in the path)

# Step 04: Next Install Bower globally (http://bower.io/)

c:\> npm install -g bower

# Step 05: Next Install Babel globally (https://babeljs.io/)

npm install -g babel-cli

# Step 06: Other Installs

c:\> npm install -g typescript
c:\> npm install -g eslint
c:\> npm install -g yo
c:\> npm install -g qunitjs

That's about the long and short of it!

So, that's my setup and what i'm using for my personal projects. Now its time to write some code...