JavaScript – The Universal Language - Code and Chats with Ken

JavaScript is a Universal Language

When it comes to web development JavaScript is everywhere you need it to be:

On the front-end browser for user interactions
On the back-end server for responding to data requests
On the command-line for automating tasks

This article is dedicated to showing you around JavaScript. If you’re new to the language you’ll surely gain inspiration for why you want to learn it and how you can apply it. Veteran coders will likely pick up one or two techniques by the end of this article.

Find the companion source code repo hosted on GitHub. It brings to life all of the ideas found in this article. Clone it and pull it down to your dev machine.

Frontend Interactions

Here we have JavaScript working client-side on the user’s browser.

Open the file “client\index.html” in your favorite browser. For example Google Chrome.

You’ll see a simple page with an input field resting besides a button. Type a number into the entryfield and press the Go! Button. You’ll see the FizzBuzz algorithm working up to whatever count that you give it.

Being a programmer gives you another way of running this program in your web browser. Open up the developer tools and display its console. Understand at this point the page’s JavaScript is loaded into memory and you can immediately access it.

Look for the button callback handler in the Ready() function.

The button calls a function that’s stored globally and you may easily call it manually. In the browser’s developer console enter “CalculateFizzBuzz(12)” and you’ll see the page’s contents change. Get a feel for this by trying it with a few other parameters. Read the source code implementing the CalculateFizzBuzz() function.

Before you build a working user interface you can call your logic routines in the developer console. Get your logic locked down first and perfect it next by layering up your UI.

What’s A FizzBuzz?

Interviewing programmers often makes people ask them to code things. What sort of code? Basic algorithms in a relevant language.

The idea seems kinda crazy to me because it’s often done top of head and standing at a whiteboard. Neither condition is how I code. It seems to be the convention for interviewing programming candidates regardless of being far from perfect.

FizzBuzz is a small test seeing how a candidate approached a problem. Telling them to “think out loud” helps to see what they make of the problem and how they break it down into a solution. Rules for FizzBuzz are straightforward:

Loop some amount of times, for example 100
Print out “fizz” for every number that’s evenly divisible by 3
Print out “buzz” for every number that’s evenly divisible by 5
Print out “fizzbuzz” for every number that’s evenly divisible by 3 and 5
Print out the number if not evenly divisible by 3 or 5

Simple stuff, right? You’ll be amazed to search on the web seeing many solutions abound, Each reveals thoughtful insights about its author. You’ll pick out what’s important during the code walkthrough.

Serving from the Backend

JavaScript is wrapped into NodeJS for handling server-side requests. Run it on your command line entering the command “node server\apps.js” and you’ll see a startup message in the console reminding you of the server’s URL.

Run your browser and enter this URL “localhost:8080” into its search box. This tickles your JavaScript server. Watch it respond back to the browser with a webpage containing the FizzBuzz algorithm working.

See how the app creates a simple web server in NodeJS.

Because NodeJS is very interesting technology, and we want to explore it more, try entering this URL “localhost:8080/42” and you’ll see the FizzBuzz routine run again with the count. In this case the right-most part of the route is pulled off and converted into a number telling how many loops to iterate.

Read the server-side implementation of CalculateFizzBuzz(). Note in particular how similar it is to the client-side one.

Play nicely with this because there’s little user input validation logic. You could certainly add more as an interesting exercise for the reader.

Invoking on the Command-Line

NodeJS offers server-side access to JavaScript. It also allows for command-line use of the language. This example shows how to invoke JavaScript with a simple argument and text interface. For fun it also shows how to do some file processing by pulling in a configuration input file and outputting a results. Both formatted in JSON, natch.

Why? Because file processing is a classic engineering job just like FizzBuzz is a classic interview question. It’s fun to build one too!

As you navigate around the article’s source code repo change into the “command_line” folder. Enter this command “node fizzbuzz.js” and read its helpful hint on how to invoke the program. It expects a single argument.

Try running it again like this “node fizzbuzz.js 50” and you’ll see text output as the logic churns through the number of iterations you ask for.

See how the RunWithParams() function directs that activity

Notice that “fizz_buzz_results.json” is generated as a result of this tool. It’s a structure data file offering the results as a JavaScript object dumped from memory to disk file. Function WriteFizzBuzz() does that activity

Try running it again like this “node fizzbuzz.js config.json” and you’ll once again see text output as the logic churns. Notice once again that the output file “fizz_buzz_results.json” is rewritten. You’ll notice it outputs “FIZZ” and “BUZZ” in uppercase, and that it runs through a count of its own accord. Read the “config.json” file to see the run-time configuration. This is another handy way to control your JavaScript programs. Read the LoadConfig() function to find out how.

Cool, right? Read through this program to learn more. Create your own command-line utilities to automate tasks. Drudgery is the death of creativity and that’s a human being’s primary value-add. Robots, on the other hand, thrive on orderly routine. Make little software robots to be your assistants.

How Could You Dislike JavaScript

Every language is perfectly suited for solving specific problems, and no language is perfect. JavaScript has many design choices that confuse people because it isn’t like the others languages you know. Here are a few quirks that catch people all the time:

Functions tend to move into the global namespace and look like spaghetti but we want code to be rational and professional
There is a this and it’s rarely a reference to the memory that you want it to be – particularly on callback context
It has a notion of class, but objects are prototypal in nature, which totally works, but doesn’t track with most software experience
It’s a C-style language, but has risky block-scope variable declaration because they’re hoisted to the top of their function

After a while I get used to these things and have design patterns that work around them, and sometimes leverage them.

Recognize there are some changes happening to this language. It’s evolved greatly in its years of service, and it’s about to receive it’s most significant change to date.

What’s Next for JavaScript?

All of these examples demonstrate what’s current in the JavaScript world. Some of it will be new to you, and that’s great. Play with your newfound knowledge and make it your own. Enjoy the experiments. Realize that there are big changes coming for this flexible language.

Standards committees have settled on something called EcmaScript6 and that’s the foundation JavaScript springs from leaping into your browser and onto your screen. Formal specifications for EcmaScript (ECMA-262 published June 2015) are available in a 500+ page .PDF file.

Digesting that specification could take up the remainder of your year. Check out this site instead because it wonderfully summarizes key upgrades to the JS language.

It’s probably best if you choose a new feature that’s appealing and dive headlong into it. Then grab another, and another, until you’ve learned everything new listed in ES6.

How can we test the new features? Many parts of JavaScript next are already available on your desktop and mobile browsers. See what’s where by referencing this compatibility charts like these two:

http://www.webbrowsercompatibility.com/es6/desktop/

https://kangax.github.io/compat-table/es6/

Microsoft’s new Edge browser has a status page informing the world what features are baked into it. Reading through their list you’ll see they support a solid selection of JavaScript next.

Google Chrome and Safari webkit have similar status pages. Find links to them in your favorite search engine when you’re ready to learn more.

What about specified features that aren’t in a browser yet? How can you learn firsthand about those? Transpilers convert a program in one language into another. BableJS makes it possible to turn ES6 into ES5. You can try tomorrow’s language today. Any of the language’s new features that aren’t covered in a forward-thinking browser might be available by way of this conversion tool.

JavaScript of Past

Studying key JavaScript milestones made an impression on me. JavaScript is a relatively older language, but it’s constantly being reinvented. Upgraded through dedicated features added into the language itself. Also used as a foundation for experimental tech.

Because JavaScript is ubiquitous it’s a fun workbench to craft new tools on. People can propose a new language and compile it into an existing one. Then the result practically runs on every browser available spreading their tests wide and far. Embracing and extending JavaScript is a way for new tech makers to gain early adoption. Less friction promotes more use.

I’ve read articles referring to JavaScript as a modern-day machine language. That it is the lower-level, highly dependable, language executing everywhere. Higher-level languages expressing new concepts can compile their domain-specific languages into JavaScript. From there it reliably functions throughout the Internet-connected world.

Here’s a brief history of impressive technology leveraging and realizing JavaScript:

2015 => es6: High-quality revision for syntax and developer experience.
2013 => ASM.JS: Optimized for speed, memory management, and pre-compiled.
2012 => TypeScript: Adds static typing, other classical OOP constructs
2011 => NPM: NodeJS module package manager
2011 => Dart: Types, traditional-looking classes, support libraries
2009 => NodeJS: JavaScript running on the server-side
2009 => CoffeeScript: lightweight syntax, new function declarations, class syntax
2008 => V8: Google’s open-source JS engine, compiles to machine code, iterative optimization, during runtime
1995 => JavaScript V1: Brendan Eich wrote it for Netscape Navigator

You Can Learn It

By now you’ll be wondering how to use JavaScript more. Experienced programmers will find lots of online tutorials and books for sale. Referring to these takes your previous coding skills and maps them to the new concepts and syntax of JavaScript. What if you’re not a programmer? What if you’re new to JavaScript and want to build a webpage?

People new to programming, who are dedicated to learning, will find a class organized by Khan Academy. It’s structured in a way that brings you to the discipline of building software. It could be slow going, but have heart, and concentrate on the coursework. It’s a tough job, but it’s worthy work.

There are a few Khan classes related to their JavaScript one that you’ll find interesting. One is dedicated to introducing you to building webpages. Another combines knowledge you’ll gain from both by making webpages interactive.

That’s JavaScript to Me

By now you can clearly see how much I enjoy working in JavaScript. It’s a flexible language taking me across the full stack of web development. It’s a supportive language helping me automate the drudgery that comes with making things. It’s found right in front of users everywhere and it’s a playful environment.

Please share this article with your people if you find it interesting. When you finishing creating some next-level stuff with JavaScript please hit me up on Twitter letting me know. Let’s do something awesome today!

You may enjoy my book if you learned from this article. It’s called Responsive Web Design Toolkit: Hammering Websites Into Shape. Get it on Amazon today!