My Little List of Tools for Prototyping

As a developer I love to prototype to see if an idea works. Thinking big and starting small is actually one of Wehkamp’s principles. And, let’s face it, that’s not easy!

Usually it starts by getting an idea of the core concept that should be validated. Especially when working with teams, communication is key. This list of tools helped me over the years to draw or code out some of these concepts and get a discussion started.

Every tool on this list is free and online.

1. Sequence Diagrams

I love the way a sequence diagram brings clarity to flows. Sometimes I create these diagrams on the fly during meetings as a way to validate if we understand the problem / context correctly. SequenceDiagram.org uses a very simple DSL to express diagrams:

The code on left generates the sequence diagram on the right.
Click here to edit the diagram.

2. UML Diagrams

A few years back I discovered Yuml.me. It also uses a DSL to generate diagrams. I like the way it uses scruffiness — it feels like I’m prototyping. The class diagram syntax can be quite challenging especially when you want to specify types in methods, so I wouldn’t use these diagrams for documentation (I generate those in Visual Studio). The tool supports: class, activity and use case diagrams.

Example of a class diagram. There is no syntax highlighting, but it gets the job done. More on syntax can be found here. Click here to edit the diagram.

You can use Yuml to generate your own diagrams programmatically; here I use PowerShell to generate a Yuml of .NET Core projects.

3. General purpose: draw.io

I prefer generating diagrams from code, because it is easier to change them in a prototyping session. But sometimes you just need to draw some boxes; draw.io is the perfect tool for that. And let’s face it, the diagrams you can create are pretty cool:

When we were moving from our on premise monolith to our cloud micro services, we used a diagram to plot the evolution.

This is a another example:

This diagram describes the a Google Authentication flow in an MVC .NET application found here.

4. Cloud diagrams

A while ago I found an awesome tool to draw Cloud Infrastructure Diagrams: CloudCraft.co! The diagrams just blow me away (probably because the isometric shapes really appeal to my nerd-side). Stunning and… free!

This diagram describes how we are using an AWS Lambda to classify images on S3. More info here.

5. Online Coding: repl.it

Need to do some Node.js or Python? Repl.it is my goto editor! It helps to quickly prototype functions or even entire programs. Because everything runs in the browser you have nothing to setup (no installing, no environments, no nothing; I’m looking at you Python!). It also lets you use packages. Oh… and you can save generated files to your Repl.

What’s not to love? Linter, debugger, dark mode, side by side execution, shareable and free!

6. But for C# I use…

As a .NET developer I like my code to run on .NET Core (not on Mono like Repl does). I use .NET Fiddle for .NET prototypes. You can add NuGet packages and it has an auto run feature. It does not support multiple files, which is kind of a downer.

Clean interface.

7. And last but not least…

For client side HTML, CSS or JavaScript I always use JsFiddle. To be honest, I use it for way more then front-end work alone. Sometimes I use it to create animations or SVG images for blogs. And it is a good tool to create small applications to automate tedious tasks like text conversions.

One editor to rule all HTML, CSS and JavaScript. It can load a number of frameworks out of the box and let’s you save and share your fiddles for free. What’s not to love?

I work as a Lead Developer at Wehkamp.nl, one of the biggest e-commerce companies of the Netherlands. This article is part of our Tech Blog, check it out & subscribe. Looking for a great job? Check our job offers or drop me a line on LinkedIn.

Originally published at https://keestalkstech.com on July 25, 2019.