Front-End Workflows - fastest way to code?

Front-End Workflows - fastest way to code?

Hi all. Newbie here! :)

I'm new to Outsystems and come from a background of largely handcoding sites and developing themes for WordPress.

I've got a fairly personalised frontend workflow which I use - a combination of SublimeText 2 with LiveReload and SASS that lets me see results instantly as I code.

As such... I've found OS's "Preview" mode and the need to publish and wait for a few minutes before seeing results rather slow... Do you have any tips or tricks to make the process faster?

At the moment, I publish, make CSS changes in-browser in Firebug or Chrome Inspector, then copy to my OS stylesheet, publish and wait...

Would appreciate any thoughts.

Hi Quintin,

You are doing it the same way as me and probably many more OS developers. I can't think of a better way at this point.

Suggestions are very welcome!
Same here.
Quintin -

That's the same way I do it too. Ditto for JavaScript. It is indeed a bit slower than editing text files, saving, and hitting reload in the browser, but you more than make up for it on the backend side of things.

Hi Quintin,

If you have access to the server file system you can change the css and js files directly (in \\computer\drive\Program Files\OutSystems\Platform Server\running\espaceName...). This can be usefull if you need to make a lot of changes to the css or javascript, but you need to rememer to copy/paste those changes to the eSpace before publishing it again.

Tiago Simões 
Hi all,

Thanks for the replies!

What I've taken to doing is having the Preview mode open in Service Studio on one monitor and the stylesheet open on the other so I can see changes instantly... this raises the problem of needing to leave Preview mode to add containers and classes if I need to. All things considered... this is probably faster than I do it normally (hunting through the HTML file, finding the correct div and adding the class manually), which is great. It would be nice to be able to add containers in Preview mode as well, though.

It would also be great if OS could look at incorporating SASS (and possibly other CSS preprocessors like LESS) into their workflow somehow... I think that the current CSS editor could use a bit of a revamp, possibly.  o me the CSS editor leaves a bit to be desired... then again, I may have been spoiled by awesome software of the likes of SublimeText2 and Coda. I haven't coded in such a spartan environment since my Notepad++ days. :)

@Tiago - thanks! That raises some versioning issues, though. Could have worked if I were the only person making changes to the front-end.

Thanks for all your responses thus far!

I'm curious to know if there are any front-end guys out there who have any opinions or insight into how to use preprocessors like COMPASS / SASS in an Outsystems workflow?

Tiago makes the point that one can change the CSS directly in the filesystem... however, since the CSS would need to be copied and pasted into the stylesheet in Service Studio, this won't work for pre-processors. 

My feeling at the moment is that this is something that isn't technically feasible at this point because of the need for Service Studio's CSS editor.