Menu Developer Moovweb University

Develop Locally: Tools and Essentials

Having a strong command of common software and web development technologies will strengthen your ability to create effective Moovweb experiences. Here are just a few, along with some external resource lists.

Outline


Command Line

When using a computer, most users are familiar with a graphical interface to do their work with. Most operating systems give you the ability to drag and drop folders, create new files, install programs with easy buttons to press that provide you with nice pop-up responses and so on.

The Command Line (also know as the terminal) is simply a text-based computer experience that makes many more commands available to you. In fact, you have every command available to you that a computer understands.

Most of the commands we’ll be using involve using the Moovweb SDK. To learn more about these commands check out our moov Terminal Commands documentation or continue with our Training Course!

Command Line Resources


Git

We recommend using Git for version control, allowing you to save your code at different points in time, retain your code, and move between different project builds.

Git can be run from the command line, but there are also a number of GUI tools for Windows, Mac, and Linux. For basic Git project management, any visual tool should work well.

Git Resources


jQuery

jQuery is a very common, feature-rich JavaScript library that handles DOM traversal, manipulation, event handling, and manipulation in a very intuitive manner. A few Moovweb-built libraries depend on jQuery.

By default, a generated Moovweb project does not come pre-packaged with jQuery: we make the assumption that the origin site you intend to transform has jQuery. If this is the case, the addition of another jQuery would have a negative impact on performance, and possibly even version incompatibility. If jQuery is not present on the origin site, you can either add it via the Project Generator customization option, or manually via the bundles.yml file.

jQuery Resources


DOMNodeAppear

DOMNodeAppear is a plugin to efficiently replace the intent of the DOMNodeInserted event. DOMNodeAppear improves upon the interface, executing a callback when the selector in question appears in the DOM. This is useful for when you don’t have access to the original JavaScript code that makes the requests, or when a complex JavaScript feature needs visual modification. DOMNodeAppear is dependent on jQuery.


Uranium

Uranium is a simple JavaScript interaction library. It includes extremely useful, mobile-friendly widgets such as image carousels, togglers, zoom elements, and much more. Uranium is dependent on jQuery.

Uranium Resources


Node & NPM

In order to use the Moovweb SDK, you must install Node and NPM.

The Moovweb SDK (running sudo moov server/start, and making any request or transformation procedure) uses its own internal version of Node 6.2.2. This is matched to the version of Node used in the cloud.

However, npm and the task runner use the version of node installed on your machine. For this reason, it is extremely beneficial to install the same version of Node on your machine, for consistency. We recommend using n for Node version control.

Node Resources


ES6

The Moovweb SDK is built on Node 6, which includes ECMAScript 2015 (ES6) features and syntax.

Since this is a very important feature for writing code, we’ve included an overview page as part of the Moovweb API Documentation.


Cheerio

Moovweb uses moov_cheerio, which is an extension of Cheerio, a lean server-side implementation of jQuery that allows you to manipulate HTML on a server. We use Cheerio to select items in the HTML of the page and transform them as necessary.


Gulp

Gulp is a task management system for projects. It will be set up automatically with your Moovweb project. The gulpfile.js file in the root of your project contains all the information Gulp needs.

Gulp can perform a series of tasks when compiling a project. By default, a Moovweb project comes with a couple of core Gulp tasks: one to concatenate client-side JavaScript, and another for spriting. These tasks bundle the respective asset files to reduce the overhead of multiple network requests and improves the performance.

The Gulp default tasks are run on a per-request basis, as specified in the task runner.

Gulp Resources


JSHint

JSHint is a JavaScript Linting tool that can be used to catch subtle mistakes and maintain conventions throughout a JavaScript codebase. JSHint is built into the moov_builder node module as a gulp task.

By default, moov_builder will use JSHint to analyze the ./scripts directory while the Moovweb SDK is running. When changes are made to a .js file, JSHint will analyze the file and stream the results to the logs of the Moovweb SDK.

You can also install manually run JSHint on a file or directory after installing it as a node module.

$> jshint ./scripts

scripts/index.js: line 13, col 32, 'myGlobalVariable' is not defined.
scripts/html.js: line 8, col 86, Expected '===' and instead saw '=='.

Additionally, you may be able to configure JSHint with Sublime Text 2, VIM, or whatever your favorite text editor may be.

You can tell JSHint to ignore specific files or folders by adding those files to a .jshintignore file in your working directory. By default, Moovweb provides a jshintignore file in each project that ignores the node_modules folder and the scripts/moov_main.js file, and additional files and folders can be added to prevent JSHinting vendorized or autogenerated JavaScript files developers may not be at liberty to fix.\

JSHint Resources


Regular Expressions

Regular Expressions (regex) are used regularly in projects to match strings within content.

Regular Expression Resources


Sass

Much of the work of modifying a site is in giving it a new visual design. Moovweb uses Sass, a CSS preprocessor that provides an alternative way of writing CSS with extra functionality added. Three important features of Sass are discussed here, but there’s a lot more, trust us.

  • Nesting for better code organization
  • Mixins/Extends to keep your code DRY
  • Partial file imports for better file organization

Sass Resources


Sublime Text 2

If you don’t already have a favorite text editor, we recommend using Sublime Text 2.

Set Up Package Control

Once you’ve installed Sublime Text 2, make sure to install Sublime Package Control:

  1. To get to the console, open Sublime Text 2 and press Ctrl+`
  2. Copy and paste the following command into the console:

    import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf), 'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ', '%20')).read()); print('Please restart Sublime Text to finish installation')
    

Sublime Package Control will allow you to easily add all sorts of plugins, extensions, and useful add-ons to your new favorite text editor!

Installing Packages

All you have to do is press Ctrl+Shift+P (Command+Shift+P for Macs), type “Install”, and click on “Package Control: Install Package”.

Now a new search menu will come up where you can search for the packages you’d like to install.

Here are some packages we recommend:

  • ApplySyntax
  • Emmet
  • SideBarEnhancements
  • Clipboard History
  • ChangeQuotes
  • GitGutter
  • Sass

Browser Simulation and Mobile Emulation

Safari Web Inspector

Safari, the built-in browser for Macs, has an option to change the user agent under the “Develop” menu option.

Override User-Agent (Safari)

Chrome DevTools

Google browsers (Chrome, Chromium, and Canary) have a button option to simulate mobile devices.

To access this feature, right-click and inspect any element on the page to get to open the DevTools panel. In the top left of the pane, there is a phone icon — click on this, and then refresh your page. This will automatically adjust to the settings based in the dropdown that appears above the browser panel.

Mobile Simulators

For more in-depth analysis on how your site looks and performs, it’s important to use a simulator. A simulator is a self-contained application that mirrors the behavior and size of a phone on your desktop.

iPhone Simulator (Mac only)

One of the most commonly used simulators is the iPhone simulator. You will need to install Xcode in order get access to this application.

Android Emulator

When developing a mobile site, it’s important to take into account other mobile devices. There is also an Android emulator bundled with the Android SDK available for download.

Simulation/Emulation Resources