Useful Tools for Web App Development

When developing a Web App, there are some steps on the functional and technological side you can (and must) consider before starting.

Know Your Ground

Spend some time researching: are there alternatives that would do the same thing you want to develop? What are their flaws? Who’s their audience? Is there exclusive content you can offer? What’s your value proposition compared to your competitors? Here are some directories that will help you out:

Mockup and Prototype

There are several tools that can help you in the process of creating useful mockups. Many people suggest pen and paper and that’s perfectly fine if you’re all in the same room. If you’re not, you can start with some prototyping tools. My favorite is definitely Mockingbird for its simplicity (be sure to read the launch details). The only issue I have with it is that you can’t have collaborative editing (you can share an account, but it doesn’t track revisions). But it’s fine if you’re using it just to share ideas. For an even more robust tool, you can try Balsamiq, which however looks a little more cluttered.

Server Side Tech

Ask yourself a question first: do you really need a server side backend? By using specific online APIs you can effectively remove the need for a backend.
Here’s an example: you want to parse some RSS feed in your app. Typically, the first step would be to build a PHP proxy to get the XML feed as a JSON object. Instead of doing that, you can use Google Ajax Libraries or Yahoo’s YQL, relying on a much more robust server to get the job done.
Moreover, remember you can easily cache everything by using some HTML5 local storage. While you can’t store images or videos, you can store strings, and this could solve many of your issues. You can store text, your application state, even json objects (thanks to this simple trick). And with additional tools like JAML and JSONPath, you can easily traverse any JSON object and create useful templates that let you write clean code. While we’re still in the preliminary stages of having a functional client-side relational database (see the Web SQL project page), we can start seeing the light at the end of the tunnel.

Images

Images are important, however you should have heard about CSS3 by now. Long story short, with CSS3 you can manipulate lots of parameters that can help you in streamlining your app and reduce significantly the need for images. Gradients, shadows, font-embedding are only a few examples of the underlying potential.
The downside is that you may need to target specific browsers to see all the effects working properly. The good news is that the CSS3 specific properties gracefully degrade against older engines, so your users will simply see a less attractive page. Just make sure that key features and key interaction spots do not depend strictly on CSS3 properties.
As I’m usually not the creative guy, here are some useful tools from a programmer perspective: PrimerCSS lets you create a css file from markup, while CSSDesk lets you play with styling in order to quickly come up with some functional css. Then you can use ProCSSor to minify and deploy. If you need placeholders, you can use Placehold.it.

Videos

If your application contains videos, you may want to read this guide about HTML5 video. Once again, this would let you support a wide variety of platforms and all the major browsers. The only issue is that you definitely would need movies with different encodings. The best way to go is to choose the correct video player framework: do you want to be platform-specific? Do you need to target different browsers? Videos require storage, bandwidth and CPU power for transcoding. It’s important to take into account all of these things.
Once again, the best solution is an HTML video framework with integrated fallback. There are some out there and I’m currently testing a couple of them for a super-secret project.

Conclusion

While this is not a strict tutorial or walkthrough, it may open some suggestions on how you could approach your next project. The wonderful thing is that there are many resources on the web that make development easier and more enjoyable and if you’re just starting out you might find priceless help if you just take the time to look around. Are you using any of these resources? Where are you looking for development support? Let us know!