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.
- Command Line
- Node & NPM
- Regular Expressions
- Sublime Text 2
- Browser Simulation and Mobile Emulation
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.
Command Line Resources
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.
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.
Node & 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.
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.
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 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.
The Gulp default tasks are run on a per-request basis, as specified in the task runner.
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.
Regular Expressions (regex) are used regularly in projects to match strings within content.
Regular Expression Resources
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
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:
- To get to the console, open Sublime Text 2 and press Ctrl+`
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!
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:
- Clipboard History
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.
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.
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.
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.