The other day at lunch I was talking my colleague’s ear off about various technologies I like to use and why I like to use them. I decided to compile a list, which I shared with all my co-workers at IDEO New York. Why stop there? All of these technologies have helped me immensely, so for the benefit of all you Labs readers, here are my favorite tools.
I’ve grouped them together so you can jump straight to what interests you: tools to build a dynamic mobile app, tools to create and deploy a web server, great UX design frameworks, and generally helpful workflow utilities.
Dynamic Mobile App technologies: AngularJS, Ionic, and Firebase
Used together, these three technologies provide a straightforward way to get a dynamic mobile app up and running.
AngularJS is a revolutionary library because it introduces dependency injection into a front-end framework, which allows front-end builds to be extremely modular and lets you seamlessly inject modules into other modules. The framework is divided into three main components: directives, controllers, and services. Instead of using the built-in router I like to use UI-Router for additional flexibility. A great resource for learning more about Angular is ng-book.
Ionic is a framework built on Angular that provides an easy way to create mobile applications. Its docs are quite friendly and it contains a very complete set of pre-built components. Check out the getting started guide.
Firebase is the go-to when you want BaaS (backend as a service). It has great documentation, works with a multitude of different languages, and comes prepackaged with authentication. It’s a wrapper for MongoDB, which supports a document tree model (as opposed to a relational store model like SQL). This means that all the data you save is branched off of a root node. So, for example, you might have the first children be ‘clients’, ‘shipments’, and ‘products’, and then underneath let’s say the ‘clients’ node would a child node identified by the client id. Under client id would be nodes that pertain to that particular client, like ‘shipments’ which could contain an array of ‘shipment ids’. The one issue with saving information in this fashion is that children nodes cannot be joined like rows can in relational stores, so the relationships must be saved in multiple places within the tree, which results in data being written multiple times on save (denormalizing data). This works fine, with the assumption that the client will do significantly more database reads than writes (which is almost always the case).
Web Server technologies: Node and Heroku
This pair allows anyone to create and deploy a web server.
What makes Node so powerful for writing a server is its package manager, npm. Type what you would like the server to control in the npm search bar: chances are, someone has already created a library to do exactly what you want. Each library usually comes with a README on how to set up the server and a snippet of example code to get you started. By using multiple packages from npm and a little bit of copy/paste wizardry, nearly anything can be accomplished.
Once you have your Node server in a Git repository, getting it on the web is easy using Heroku—all it takes is two command-line commands: “heroku create <nameOfApplication>” and “git push heroku master.” Then your node server will be available at <nameOfApplication>.herokuapp.com.
UX design frameworks: Bootstrap, Foundation, and jQuery
Three libraries that have proved extremely useful.
Rather than designing around the “mobile also” design paradigm, Foundation focuses on “mobile first.” Look to this framework over Bootstrap if your main focus is mobile, but keep in mind that there is a smaller community around Foundation, so you won’t find as much support or as many themes.
A selection of great tools to help streamline your workflow.
Divvy should just come standard on OS X. It allows you create shortcuts to “arrangle” (arrange/wrangle) your windows into quadrants, halves, or however you’d like to tile them.
Postman is a Chrome add-on that lets you test any sort of REST API.
Kimono turns any website into an API. When you visit a page that you want to scrape data from, you can simply click on a bookmark to translate the document structure into an API that can update as often as 15 times a minute!
Sublime Text 3 is a great text editor with many plug-ins that can help with syntax highlighting, auto-completion, code formatting, and file navigation.
Kuler by Adobe is a great place to find color swatches for inspiration or roll your own color swatch using math-based color principals.
Google Trends is an awesome tool that I use to find out what frameworks and libraries are gaining or losing traction within the coding community. If a tool is on the way out, it might not be a good time to start learning about it.
Diigo is a browser add-on for link sharing that lets teams compile links under descriptive tags. If you highlight text or media within the linked page, your highlighting will appear when other people open the link.
What are your favorites? Send me a tweet (or comment below) to add to the list or find out more about any of the tools I’ve mentioned.