JavaScript for Line of Business Applications

I've been using Grunt and Gulp for some time now. However, I've realized lately that with a simple package.json I can do the same, but more manteinable and with less code. In this post, I'll explain how we can do it!!

In this instalment, we will build on what we covered previously during the first part of the tutorial in order to create the logic of the Breeze application – loading and displaying current temperature information for various locations by making AJAX requests to the OpenWeatherMap API. We’ll also improve the Grunt workflow and briefly look at SCSS variables and mixins.

This article aims at introducing you to some of the currently most popular tools when developing modern web applications with JavaScript. These are totally not new at all and have been around for a couple of years now. Still, I found many devs still don't use or know about them (as you might), wherefore this article tries to give you a quick, concise intro to get you started.

And so the evolution of front-end development continues with Gulp, the new build system that has already garnered praise amongst many web developers.

After spending some time reading the docs and playing around with Gulp, I’ve finally decided to test its adoption in an existing project that currently uses Grunt. From what I’ve seen so far, Gulp is blazingly fast when compared to Grunt for similar tasks.

Let’s dig a bit deeper though, and get a little understanding of the differences between Grunt and Gulp, beyond superficial speed comparisons.

In this post we’ll cover:

* A shallow dive into Gulp, and how it compares with Grunt.

* Things to consider when choosing between the two tools.

Many developers and development shops have embraced testing in their server side code – either using a TDD model, or sometimes just with unit or functional tests created on the fly – but very few developers I talk to test their front end code beyond eyeballing it in a few browsers (or if they’re lucky, with a service like BrowserStack). And even fewer of those use any kind of automation. In this post I’m going to try and help out that majority of you who aren’t testing – or maybe just aren’t automating.

Lately I’ve been converting a number of my jQuery plugins over to Github – something the new jQuery plugin site is requiring – and while doing so I’m refactoring and adding tests with QUnit(created by the same folks that write the jQuery core). I realized pretty quickly that having to go to the browser, hard refresh, and then run the tests again after every change was a time killer, but I didn’t want to write a whole bunch of tests and then go check the results, otherwise I could be tracking down bugs (in my code and the tests) for days. Instead I set up some automated testing using Grunt, PhantomJS, and a couple Grunt plugins. Here’s how.

There are many things I like about Grunt, and many of them are still true.

I like that Grunt gives you the choice of being a Config file or just straight up JS (write your own functions using Node Modules).

I like that it had it's own API to do things and forced plugins to be written in a common way (much like jQuery) - this made it easy to A : Use plugins quickly; and B : Write plugins.

I like that it garnered a quick following and is now used by a lot of Open Source projects. This in no doubt helped spawn a metric-shitton of plugins.

But there was room for more. There's always room for more.

gulp.src takes a glob (a list of files) and then you just pipe them through plugins. This is the thing with Gulp, it's all about Streams. Just think of it like the chaining you do with jQuery.

I like Gulp a lot, it feels like discovering Grunt all over again. I like the way its code over configuration; don't get me wrong, I love the simplicity of Gruntfiles and I think it gives opportunities to those who wouldn't normally write their own scripts to assist with automation to dive in. I am also aware that with Grunt you can choose to have code over configuration.

Grunt and Gulp can co-exist to serve different groups of people, for now though, im sitting with Gulp. I can't wait to start doing more with it.

Tooling for scaffolding Polymer web apps

As I mentioned earlier, Polymer is a library of polyfills and sugar which enables the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.

generator-polymer is a new generator for Yeoman that helps you scaffold out Polymer apps using Yeoman, letting you easily create and customize Polymer (custom) elements via the command line, and import them using HTML Imports. This saves you time by writing the boilerplate code for you.

Most often people associate both Grunt & Gulp with building systems but they are not restrict to that and both can form part of the of a front end dev’s day to day development process being able to run tests & reload html when altered, etc

• Both use Node.js to provide their functionality
• Installed via NPM & need both a global and project specific install
• Have a plugin eco-system
• Their configuration files are valid JavaScript
• Configuration consists of “Tasks”

Originally it took me a while to get on board with using Bower as part of my main development workflow. My biggest gripe was the way it handled repositories that were missing a bower.json file to configure ignored files etc.
In that scenario the whole repository is installed into the bower_components folder and although there are two sides to it, checking that fluff into my Git repository doesn't feel right. That is of course, until Grunt came along.

Like most of life's problems, Grunt can help.
The process goes a little like this:
* Instructing Git (or your chosen VCS) to ignore the bower_components folder
* Checking for and installing any updated packages
* Copying the required files across into a directory that gets checked in to the VCS

By selectively copying files this way our repository can be kept free from test folders, READMEs and other cruft.

If you then needed to update jQuery to the latest version all it would require is changing the version number in the bower.json (or by installing it on the CLI), running the Grunt task and then committing the updated files to the repository. No manual downloads or file copying required.

Previously, I talked about some tips and tricks I use with Grunt.js. If you haven't heard of Grunt.js you may want to check out my article on the basics of grunt. This time I want to wrap things up by talking about custom tasks in grunt. While there are a lot of great plugins for grunt sometimes you need something custom, lucky for us grunt makes it easy for us to define our own tasks.

Grunt.js provides two types of tasks: Basic Tasks and Multi-Tasks. Basic Tasks are little more than a named javascript function you can run from the command line. Multi-Tasks are what most plugins provide, you provide a namespace and code to run those tasks, then the user creates instances of that tasks by placing options under a config object of the same name.

If you’ve done much reading about angularjs you’ve no doubt come across mention of karma, a test runner recommended especially for use with angularjs applications. The angular-seed project is a great way to get started with the basics of angular testing using karma, but for projects of any significant size you will soon hit the cieling in terms of organization complexity. What I want to share in this article is the approach I have taken using Grunt and the grunt-karma plugin to sustainably manage my projects’ client side unit tests and run them via TravisCI.

Creating client-side JavaScript packages is increasingly becoming a painful endeavor. We need to publish our package to different repositories such as bower, component, and npm, and there are others! Crazy. People might be using volo,jam, or Ender... Have I named enough yet?

Then there's building the package for human consumption. That's where things get really cute. You have CommonJS modules and browserify, AMD modules with Require.js, plain-old raw JavaScript, and a bunch of other "input" formats. There is plenty that can be done in that field, and plenty is done indeed. The output isn't that complicated, but everyone expects you to provide at least the minified (and unminified) code for your module tighly packaged in a single .js file.

Solutions such as Grunt or yeoman kind-of solve these problems, but leave you but a bunch of code that you might have no idea how it works.

Documenting code is a rough, but necessary evil. Having a well maintained and documented code base can ease new developers into your code base and also help keep tabs on certain pieces of your application.

YUIDoc is a node app that assists in parsing certain JavaScript comments out to generate API documentation. Here are some of the basics of the syntax for documentation.

It allows you to tag pieces of your application to be processed for later documentation.