Feature Request: Diff Tool


#1

A frequent use case is to create some mockups, hand them to a developer and then later had them another copy with some edits. I think it would be very useful to have a “diff tool” so they could quickly see where the changes are between versions. Deletions could get a red background, additions a green background or something like that.


#2

Hey @KJPaul, I created a mockup of a DIFF tool. I must say I was inspired by your idea.

Let me know what you think.


#3

Hey @KJPaul, thanks for the idea. This is something that we have discussed at length as a team. We are still trying to come up with the best way to show this. We are planning a history feature in the near-ish future though. So we’ll probably start with that and then iterate from there. Thanks!


#4

This will actually help. Feeding this “combined” data set into a view and making all the plus elements “glow” green and all the minus elements “glow” red would be the next step…:slight_smile:


#5

I will modify this for you, as well as provide instructions of how to create it. There are some specific methods that I used to create it (Open Sublime Text 3 and indent JSON).

UPDATE

Created a leaner version of it for now

  1. ADD - Green/Red highlights from textarea control and label
  2. CHANGE - Removed extra arrows explaining the DIFF add/remove
  3. CHANGE - Adjusted spacing so it lines up better with mockup syntax

#TODO

  1. Await feedback
  2. Next steps

#6

You can do this in Mockups 2.x with any standard Diff tool prior to 3… more functionality removed from Mockups due to the proprietary binary format. How about Balsamiq just changes that format to a folder like a .app on OS X and include a .plist or something instead of a binary database. Then we could all go back to using mature source control solutions like GIT.


#7

We tried that, but the performance was just not up to what we needed. SQLlite (our format) is MUCH faster when loading and saving parts of the data often like we do.

As for diffing, you can now Alternates to solve the same issue. We also plan on adding a “snapshots” feature which shows you the history of each mockup within the app, so that you can see what changed and who changed it. Stay tuned.


#8

I suspect it’s due to how you are handling files. You should be streaming rather than reading/writing or potentially using something like SQLite or Mongo (a better option in my opinion) as a staging area but ultimately storing everything as text documents for portability. I’m sure you will develop solutions to hit a few pain points and some people will love them. That’s great.

However. What you’re ultimately missing out on is having a long term relationship with customers who are embedding your tool into their workflows. Rather than trying to provide your own version of this, you should embrace the open ecosystem with more tools, establish a platform around your expertise… make a GIT editor/gui with visual diffing, make advanced interactive prototype tools that take the BMML and convert it to PhoneGap/Cordova apps, Swift code for native and whatever Google and Microsoft are cooking up, take the design pattern library you’ve been growing and add more value to it.

Instead you’ve lowered your heads and are navel gazing, trying to create one-off solutions for problems that have already been solved and missing the forest for the trees (yes, mixed metaphors, that’s where I’m at).


#9

@emenoh I’m going to reply on your blog post instead of here, that way it’s all in one place.


#10

@peldi I can’t wait for this.


#11

Do you plan to add linking to alternates, that would allow us to click on a part of the mockup and quickly be sent to the changed portion, which happens to be as an alternate.


#12

I am new to Balsamic. How do I get to the Diff Tool v2 view?


#13

Are you asking how to recreate it?
I will find some way to share the tips with you.


#14

I don’t like the proposed approach. I think the idea of a diff is good. I’m a visual guy and want a visual diff, I don’t speak XML.


#16

Actually this is JSON, here is a comparison JSON Tutorial


#17

A visual diff tool is needed. A text-based diff does not solve the problem. What I do for now is to export the wireframes to PNG and then use a tool that can diff PNG files. It works ok, but what I find is that it shows a lot of false positives because it is comparing every pixel.


#18

I am too somewhat disappointed at this change of file format. I had been waiting for the project feature to evolve for quite some time but unfortunately this change is not that convenient. It was quite a benefit to see changes in my “mockups” directories (that are under version control) to see if someone added or deleted something. Moreover, since the BMML format was text, and even if it wasn’t something I understood deeply, I could often easily tell what changed in any mockup.

Ideas about visual diff tools are nice, but until that happens (and if) the old format was convenient. Moreover, there is no way to export a mockup to BMML if I wanted to maintain my old directory so there is no way for me to edit them without converting.

I use BeyondCompare extensively so I was excited that there was an SQLite plugin and I thought I found a solution:

However, the conversion to text is not as readable. Perhaps someone with more knowledge could improve the existing plugin to better format the generated text, and perhaps sort items and attributes so that comparison is more readable.


#19

Well its been two years but I have finally come around to implementing a small utility that you can use to convert BMPR to text format JSON. This can help you integrate diff support for BMPR files in your favorite tools. You can download the latest version here:

If you use Beyond Compare then you can also use a pre-packaged file format that can be imported into Beyond Compare 3: