Code Refactoring: Maintainance & Readability

[jdittrich]

We should make the code more readable. Ideas:

• Wrap reused functionality in jQuery plugins to allow more terse code and provide consistent means to manipulate the DOM.
• Use an MVC
  • The structure allows reading and writing the HTML directly. If we separate data and mockup code, we need to parse this back-and-forth (reading a file: parse HTML to MVC-data-format (most likely JSON); writing a file: take care that the saved HTML makes sense standalone and if read)
  • Currently the core code is very simple (what "bloats" are useful, but non essential functions). Can we maintain easy-to-read and -extend code?

[jdittrich]

@Coldwine – wanna join?

[steoo]

@jdittrich as I was saying in the other issue it can be considered to use Flux / Redux instead of MVC with React or Vue.js for example

[jdittrich]

NOTES:

• Some processes, like deleting, duplication and in general, manipulating elements are likely to be easier using a MVC or React-alike.
• We use deeply nested data structures that are mirrored in the resulting HTML code. In many application I know mainly flat data and view structures are used. That is no hindrance, but should be considered
• Saving: One could use HTML just like an XML data format that in addition of saving data can be displayed too. It overloads it's use a bit, but I think that the show-and-send format and the save-data-for-editing should remain the same.

[simonv3]

So one of my major issues with quickMockup (I did some wireframing this morning and have some thoughts, but sadly I forgot my notes so I can't remember them all :P) is that it can be pretty slow and unresponsive. This would probably be fixed by having a more robust DOM manipulator, but I'm not sure whether something like React or Angular, with their large load factors, would be useful.

I would recommend MithrilJS as it's tiny (https://lhorie.github.io/mithril/), but it's a bit more opaque for onboarding new users.

What I like about the current setup is that I can edit the existing document's HTML, add something via HTML, and it will add that to the manipulation. Maybe that's something worth losing though for the better functionality on data storing etc.

[jdittrich]

@simonv3:

Thanks for your feedback!

it can be pretty slow and unresponsive.

Interesting, I never head this issues, but I might use it differently. Can you share the files this happens with? Also, is it slow loading or is it slow when interacting?

load factors

While I find it good if the page stays small, I suppose that loading 30kb more would not be too bad for a productivity application (if it has a useful outcome)

I would recommend MithrilJS...

I'm currently looking into vue.js. The problem is that the application is quite dependend on drag and drop and most libraries excel at input fields, lists etc. This might even be a reasons for using react, since it has lot's of components and binding libraries in it's ecosystem.

[steoo]

@jdittrich agree. React has a lot of already built component that can help building a responsive drag and drop application. I really like the component and moduling system of React, while I don't really like Vue.js when it comes to write logic inside the markup.

[simonv3]

slowness

This happens in Firefox 45.0.1, it lags while interacting. Loading isn't a problem. I suspect it's the number of DOM elements floating around? Here's the file: https://oasis.sandstorm.io/shared/CN6zht3UrfTqZBWlM0THn_0nVAwHxutqG4bI4cLHmq9

If you're fine with a larger library for loading, I have no issue with either React or Vue or whatever :)

@steoo do you know of some drag and drop existing React libraries that we could have a look at?

[jdittrich]

slowness

hmm, works really fine for me, even on an old computer (FF45.0). Only the "clearrect" element does not display correctly, but the dragging is smooth.

[simonv3]

Usually the dragging works fine - it's the toggling between elements that creates an issue, but I'll try to pay more attention to it, and track it if I pick it up again. I'll also create a new issue for it then, to stop derailing this one :). Clearrect was me experimenting with adding my own rectangles after the fact, so it's probably missing the styles? (also an aside and not really relevant).