Efficient workflows and workflow patterns are key to effective web development. Learn how to streamline your workflow with this web development tutorial.
Most developers I know are
hands on learners. The type of people who take things apart to understand how they work. While that approach is useful for garnering a deep understanding, it's not very conducive to retaining a comprehensive development approach. If you pick up tools here and there, you may eventually end up with an amazing array of tools... but you probably also have a messy workbench. Rethinking and refining your workflows and workflow patterns will ultimately give any developer a framework in which they can work most efficiently. Ultimately when your dealing with lots of code on a regular basis, efficiency is the name of the game.
Optimizing your Web Development Workflow
It's important to keep in mind that workflows will always be unique to the user. The key factors I've kept in mind in with these suggestions are that everyone should be using tools that are unobtrusive, future-proof, device agnostic, and time saving. I've split these time savers into three categories and included detail and a simple workflow diagram for each. In order from least to most difficulty - Operational Streamlining will cover Applications and day-to-day tasks (Syncing Notes, Invoicing, etc.), Web Development Workflow will cover your basic local and remote servers (MAMP, Code Editors, Git Workflow, etc), and Command Line Utilities will cover core level time savers (Node, Bower, Grunt, etc). Now that we've got our scope, let's get cracking.
Web Development Workflow
The exact setup you prefer is likely a little different, but we've included our workflow diagram to give you a basic approach. One constant is that you'll want to use a code editor / ftp client to communicate with your server. Another, that MAMP (or WAMP for you remaining Windows users) should be the core of your local testing environment. In our example, we've kept Dropbox as local backup and are utilizing Git to push revisions to the live server. Your approach depends on individual preferences, but these tips should be helpful for anyone.
Setup a Testing Server: Practice makes perfect and until you have your own testing server, you can't really
practice web development. I wrote a tutorial on the topic of setting up MAMP, but the basics can be achieved using any stack setup. All the elements are usually already installed on an Apple (and most other computers), but using an application like MAMP (or WAMP for windows) gives you everything you need and makes it much easier to setup. By having your own independent "internet", you can run tests on every bit and piece of a websites code. The most obvious benefit is that you can keep the actual website live while you're testing revisions, but it's also helpful that you can work offline.
Use a Quality Code Editor and FTP Client: We all remember using a bootleg version of Dreamweaver. We've all convinced ourselves that Text Edit is a "pure" way to manage code. The reality is a decent code editor may cost a couple bucks, but ultimately the small investment pays off very quickly. Take a look at Coda, Sublime, or Atom and you'll see what I mean. When it come's to FTP exclusively - Filezilla is still pretty solid. Most advanced code editors have "built in" FTP functionality, but if you need to manage a ton of files and would prefer to do so in a separate app, Transmit is worth giving a look. You can always ssh into your server, but that's a little more advanced then our current scope.
Keep a Backup in Sync: Having a backup on hand is always important. I wrote a tutorial a while ago about using a MAMP setup that syncs w/ Dropbox that would be worth a read. When done properly, you can both retain and use that backup with a local server for testing. Similar approaches can be taken with other backup products, but the basic idea with any of these is to keep a live version of your databases & servers easily accessible when you need to reach them, but secure from prying eyes.
Git Familiar with Version Tracking:Think of version tracking as keeping a snapshot of your files. If you want to revert a website that you're working on to the way it was built last week, version tracking is what you should be using. A Git workflow is obviously a little more complicated then that, but if you take a minute and watch the attached video - you'll know all you need to know. If you absolutely detest the methodology, you can opt to use Mercurial or Subversion. I personally believe Git has a brighter future, but that's more of a philosophical opinion then concrete fact.
Command Line Utilities
Warning: Don't use command line utilities until you have a full understanding of what you're doing. You can do some major damage... Please Be Careful.
I have included a workflow diagram depicting the setup that we use around the office. When you get down to this level of streamlining though, every setup is truly unique. That said, these are certainly tools I'd recommend using or at least trying out. The first three I'll cover are intended to be installed at the core of your OS. Think of these as enhancements to your computer, whereas the command line utilities described later are enhancements used on a project level.
Let's Get to Work
Now that you have all the prerequisites installed, lets move along with the web development tutorial and address the command line streamlining utilities themselves. Don't forget that in order to add these tools to a specific project you'll want to cd into the folder you want to work with. This is an important distinction to make, so don't forget to relocate to your individual project folder before running the commands below. These tools are all device agnostic, but I'd also recommend using them remotely before trying them out on any live servers. As with the previous commands, you may need to
sudo the code too (9 times out of 10, if you see an error that'll be the cause). If you're unfamiliar with the concept check Apple's Documentation, but it basically just means typing "sudo" before your command and typing your system password to verify your admin privileges.
Yeoman uses the npm command to scaffold your project. It utilizes "generators" and basically simplifies the process of tying external packages to your project. The install command below will also install Bower & Grunt since they are dependencies (so feel free to bypass the next two installs if you install Yeoman).
npm install -g yo
A basic scaffold can then be installed with:
npm install -g generator-webapp. Create a project with:
cd my-yo-project. Then run it with the shortcut:
Check the folder you assigned and everything will be installed and ready to roll for you - Pretty neat trick right?Documentation
Bower is managed by the talented team over at Twitter and once run generates a file named "bower.json". That file basically specifies the dependencies that your particular project will be using. Think of Bower as an ingredient list for the recipe that is your project.
npm install -g bower
Once installed, finding and installing dependencies can be done easily. Run
bower search XXXto find the addition you're looking for. Run
bower install XXXto add it to your project. Use
bower listto see what you have installed in your project and
bower update XXXto update that specific piece.
Bower won't wow you, but it's not intended to. It's purpose is to keep track of everything and keep the pieces of your project up to date.Documentation
npm install -g grunt-cli
To preview an app you're working on, run
grunt serveand you'll get an immediate testing version popup. To run the tests you've configured, use
grunt test. Most importantly, to build your optimized project simply run
gruntand watch the magic happen.
You may run into a couple errors initially, but once you've got things properly setup Grunt will become a clutch asset. This is the tool that turns your frayed code into a minified marvel (and it even handles your CSS preprocessing!).Documentation
If Grunt isn't your "cup of tea", the alternative you'll want to check out is called Gulp. It works very similarly to Grunt, but it uses a "code-over-configuration" which makes it a little easier to start using for most people (basically, there's just less setup). If you'd like more detail on the distinctions between the two, give this post a look.
npm install -g gulp
Since Gulp is more of an alternative then suggestion, I won't go into to much depth. This cheat-sheet will be useful, but the basic codes are fairly simple. Run
npm install --save-dev gulpto install locally. Use
gulp XXXto run a task and
gulp XXX XXXto run multiples.
Gulp has enough of a following to be worth the mention, but it won't add any functionality beyond the Yeoman, Bower, Grunt combo (at least, that I'm aware of).Documentation
If you're looking to master this Yeoman, Bower, and Grunt based workflow, I'd recommend taking a look at this tutorial from Newtriks, another from Treehouse, and this workflow tutorial from Tutsplus. If you can grasp the previous summaries along with these tutorials, you should be off to a solid start with these command line assets.