Using ES6/ES2015 in a Node.JS and Express

These are some very minimal changes to the standard express.js generated app.js file. It looks nice, “=>” syntax is getting easier to read the more I use and get used to it. Note: I took out a lot of unrelated code to isolate the topic of the blog. This example is for getting a development, learning environment ready to use Babel.js with Express on the back and front ends.

How’d I do it?

Using Babel’s “babel-node” cli tool, its compiling in real time in the development env. For production, do not use babel-node, you’ll want to compile with Babel.js then run with node. Just use “babel install –save-dev babel” and babel-node is already there and built in.

I also included eslint for good measure. Make sure to “npm install –save-dev babel-eslint” and set the parser to “babel-eslint.”

What else do you suggest that can I do to the app.js to take advantage ES6 features, without straying too far from the default?

NPM as an automated build system.

I hate having to set up complicated environments. I like JavaScript/Front End Development environments to be:

  1. Easy to understand and follow along for everyone on the team.
  2. Quick to get running and make changes.
  3. Free of having to learn new domain specific or pseudo languages for simple building.

Other platforms, Java or .NET, benefit from IDEs because they follow a predefined path and have a set of best practices defined into the language. The ugliness of JavaScript is why it’s powerful. But it can also lead to a lot of unnecessary reinventing the wheel.

Using NPM to use simpleton and replaceable tools keeps my projects fitting those three points above.

NPM is amazing and powerful. I’ve built three major projects now without Grunt or Gulp, using only NPM and locally installed modules.

The run command lets you run a locally installed module from the command line.

This runs “mocha test.js”

Scripts can also call one another.

In this previous example, “npm run check” will execute lint and test.

You can also use other NPM modules to run and watch the app.

For instance, in the following example, I use babel to convert and bundle the files after the lint and test. Then I run nodemon, which I have executing a custom script. Nodemon is also told to ignore the public directory where babel places the bundle. (I learned the fun way that this creates an infinite loop, if you don’t ignore it!)

Now when I run “npm run auto-start” it won’t just run the lint and tests and launch the app, nodemon will also watch for changes, linting, testing and restarting each time a change is detected.

Building from NPM is incredibly powerful. When I need to change the files or directories, I can do it inside the string. If I want to change the linter, I can change the dependency, and the script for “lint’s” value. Run “npm install” to update the dependencies. Then all the existing “npm run lint” calls will call the new linter. There’s only a tiny amount of configuration and no coding, just a JSON file describing what I want to happen.

Multiple calls to the same NPM module are possible, while using a different command to have different options.

Finally, the best part about building with NPM way: All that someone on the team needs to do to include this automation or build this app on another machine is clone the files and run “npm install” to get it up and running (if they have Node installed).

When won’t automated building with NPM work? Well, sometimes I have more complex builds, where one area of code might use one set of tools and another area uses some other tools. Some operations are easier to do asynchronously, rather than through piping stdout. What I’ve found myself doing more, is using NPM for my smaller personal modules and I’m still using grunt for my large projects.

Thanks for reading, if you have any ideas, concerns, or complaints please let me know on twitter @StevenLacks or in the comments.

Chaining and other Practical Uses for Promises for JavaScript (ECMAScript6, ES2015)

Repo on Github here.

Promises are cool. The best source for Promise API basics is still the API documentation on MDN. Well here’s some news. Promises are awesome and really easy to work with. That article will teach you all about the built in methods, like “all” and “resolve”, we’re going to go over some useful techniques that are not built into the Promise object.

First, let’s do a simple promise.

What if we want to do something sequentially? Promise.all() waits for all of the promised functions, Promise.race waits for one… but a lot of times, we want to run sequences without losing the benefits of asynchronous code.

Next, let’s make it a bit more complex, with issuing the then in the then. Adding the reseting the counter and using our thenableLoop.

| 0 – Working
| 1 – Working
| 2 – Working
| 3 – Working

This outputs like so:

| 0 – Working
| 1 – Working
* 0 – Working
* 1 – Working
* 2 – Working
* 3 – Working
* 4 – Working
* 5 – Working
Done

You can also pass callbacks as promisables…

That outputs…

| 0 – Still Working
| 1 – Still Working

Keep in mind if we passed in promisable, instead of promisable 2 it would look like this:

| 0 – Still Working
| 1 – Working

Finally, let’s look at binding arguments to the promise…

This outputs:

| 0 – Custom String
| 1 – Custom String

You can have very powerful sequences, with non-blocking IO. This is great for real world applications using ES2015/ES6. You could easily replace our timeouts in these examples with AJAX calls, queries to a datastore, complex DOM interactions, or anything else you might want to ensure is done before executing another set of instructions.

Repo on Github here.

T-Mobile Data Usage

Previously, I was on the T-Mobile 1GB plan. Towards the end of the month, I’d always hit 1GB, sometimes a day or two early. I realized that the day or two of lost productivity would be worth upgrading to 3GB… so I did… Now, a day or two before the new month, I’m getting the same warnings and I’m hitting 3GB.

Now, my usage probably has increased a bit, but I doubt by 2GB more… and I’m still on wifi most of the time.

Has anyone else had this experience?

Are these the simplest`Template Strings` in ES6 (JavaScript)?

Instead of a quote, wrap your string in back-ticks ` (on QWERTY this is just above tab, it shares a key with the tilde ~) to make a template string.

Works on: Chrome 41 or greater, Firefox 34 or greater, not currently in IE. Let me know if this is working in the Spartan preview, I’m the biggest windows fan without Win10 installed.

First, let’s check out the console.

Next, in a web page. Here’s a really simple demonstration of the ES6 template string being implemented in the DOM .

 

ES6/HTML5 Import Demo and Tutorial (Video)

“HTML import” is a well put together way to bring in HTML from other files. It uses minimal JavaScript to make it happen natively, and it’s only a matter of time before someone writes a nice little library on making that happen in a way that appears to be magical for designers.

Mozilla’s not supporting them, but now that I’ve used it, I’m think that this syntax was well thought out and will be easily shimmed. (I know you hate shims, but this is really small and should package nicely.)

First, note that this isn’t going to work serving it locally right from your file system. In other words, you can’t just open your HTML files in the browser from the file explorer. If you don’t know how to set up a server, then this might be a bit too advanced for you anyway. No offense, I still suck at that stuff. (why I work as a front ender!)

How to set up Sails.js on WebStorm

Setting Sails.js to run in your WebStorm development environment  is pretty easy.  You can watch “Getting Sails js Running on Westorm Node js Framework Tutorial” or read on to see how.

Create your project, delete all the files and directories in the project (including the hidden .idea file).

How to Install Firefox Developer Edition on Ubuntu Linux (Debian)

Firefox Developer Edition Logo

Great free dev tool

Firefox developer edition has a lot of cool tools to help web developers, designers, and those who want to build for FirefoxOS.  Of course, on Linux, it’s a little harder to install for those who don’t have a lot of experience in the command line, right now. It’s a really easy install, once you know your way around a bit more. This tutorial is assuming your using default settings in Ubuntu/Lubuntu/Xubuntu.

Go here: https://www.mozilla.org/en-US/firefox/developer/

You’ll be presented with various versions available to run in Linux, if you’re using Ubuntu, you’ll want the Debian flavor in either 32- or 64-bit. 32-bit will run on either, so unless you know you’re on 64- bit get the 32-bit.

How do you rate a framework?

This could really be asked of anything. How do you rate a car? How do you rate a programming language?

Wikipedia’s comparison of web frameworks is objective, but useless as a qualitative or meaningful quantitative comparison. It is nice to have dates of last release, but how often are these released? How many people are working on them? Is there any money backing them up?  Is there any interest in big players in keeping these alive and open?  Are they free? Are they open source? How closely do they follow the community goals of the parent language?

How many tutorials are there? How active is the community? What is the frame work used in? How many repos?

I’m not saying that these things need to be put in a chart on Wikipedia or Stack, but we should at least keep these things in mind when discussing them.

What is it good for?

Generally, these aren’t to hard to do one your own.  You can literally Google most of these yourself.

I need some help.

https://espoc.recruiterbox.com/jobs/fk0mhm

Entry level Developer | HTML and Javascript Programming

Clearwater/Saint Petersburg, FL

 

Immediate opening for a smart, ambitious HTML programmer looking for a good work environment at Vericle – a fast paced, innovative Internet billing technology company with extraordinary client-centered culture and focus on client relationships.  Vericle offers integrated cloud-based practice management software, billing and revenue cycle management service, and client coaching for maximum profitability, compliance, practice growth, and office efficiency.

If you are motivated by having a role that

  1. has a purpose – you improve healthcare and you help practice owners reach their goals
  2. promotes mastery – you learn and master your skills
  3. offers autonomy – you develop your own ideas on your own time

then Vericle may be the company for you.

You must love HTML/CSS and JavaScript. You must be self-driven and have a capacity to learn quickly without a lot of supervision. You will be responsible for responding to user support requests and user requirement analysis for a state of the art software application.

RESPONSIBILITIES

Day-to-day work involves responding to time-sensitive end-user and internal user requests (tickets), including:

  • Building new custom documentation
  • Working with end-users to gather requirements
  • Analyzing HTML and JavaScript

SKILLS

  • Proficient in HTML,CSS
  • Knowledgeable in JavaScript
  • Good communication skills
  • Good sense of design and layout

EDUCATION

  1. College education or equivalent
  2. Recent college graduates welcome – on-the-job training available
  3. No previous experience necessary

https://espoc.recruiterbox.com/jobs/fk0mhm