Setting up my Dev Environment for 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:

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:

Then there's the frameworks and libraries...

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:

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

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...


Comments

Post a Comment

Popular posts from this blog

SeriLog & Application Diagnostic Logging

Image
Show me an application that doesn't log anything and i'll show you an application which is hard to debug. Every application we write should have a healthy sprinkling of diagnostic logging embedded throughout its logic. A trace to show us what's happening on the inside from the outside. In the past, I've hand-rolled my own bespoke logging classes to output either to file, database or simply console. Not any more! The problem has been solved. It's been done. There are libraries out there like Log4Net or Nlog But from now on, I intend to standardise all my C# code to use SeriLog . SeriLog is an example of a library where so many developers have poured in so much time that any home grown library cannot compete. Why waste your time? Just "nuget" it into your project and be done. Move on. Why is it so cool? Because it's simple. And because it supports many, many outputs. They call them sinks and there is a sink for everything as you ca
Read more

OxyPlot Charting Control

Image
The other day, I needed to display a simple time-series chart inside a little tool I was writing. Now, as we know the web has a slew of cool charting controls to pick from including chart.js and amcharts.js which I have used in the past and are great. But those libraries were out of the question because I needed to include the chart inside a WinForms application. Now, in the past I played with the Charting Controls from Microsoft and whilst they are good, that suite of controls has not been updated for an ice-age! So I decided to have a look to see what the landscape looks like for charting controls in the WinForms / WPF arena which is where I came across OxyPlot . OxyPlot is a cross-platform library for .NET and supports WinForms, WPF, Xamarin and UWP (but let's be honest, Who is targeting universal windows apps?). What makes OxyPlot interesting is that their main page says the project is supported by the likes of JetBrains and Xamarin to mention just a few! Thos
Read more

Android, Self-Signed Certificates and OkHttp

Image
Just recently I have been writing a private Android application using the latest freshness that is Kotlin . Of course, like all mobile applications, it makes heavy use of HTTP requests, sending data back and forth between my app and the back-end API. Because this app is private, it will never be released in the Google Play store and the back-end server will not be publicly available on the internet. The server is a private home web server on an internal network (think intranet) and the application will only contact it over my home WiFi. Did you know that Sensitive Data Exposure is still on the 2017 OSWASP top 10 list ? It's currently sitting at the #3 spot. The OSWASP folks say: "Over the last few years, this has been the most common impactful attack. The most common flaw is simply not encrypting sensitive data." So, as a good developer, my next job was to switch my project to use HTTPS/TLS . That's when I remembered Let’s Encrypt which is a free , auto
Read more