How do Skuid Developers organize their snippets?

Most of the pages I have only host a couple of snippets, so things remain nice and simple. But sometimes I have 10’s of snippets on a single page (for example a reporting page where I’m messing a lot with filtering data conditionally and interacting with highcharts).  This can get confusing for me.

How are you skuid developers organizing your snippets? I would imagine a directory hierarchy would be immensely helpful. Or is there a way you’re using static resources to organize your code?

Hello Shmuel -

Great question!  In general, I strongly advise not to put any JS (or even CSS) inside of a Skuid page directly.  While extremely convenient, the downside to this approach is that the code is not testable since it’s embedded inside of a data record in SFDC.  Additionally, when you have a lot of JS/CSS within a SKuid page directly, it bloats the page size which contributes to slower performance over the wire.  

The benefits of having your JS/CSS in separate files are:
1) It’s testable
2) It’s minifiable
3) You can use things like LESS and other techniques to simplify code development

My recommendation would be:

1) Put all your JS/CSS in separate JS/CSS files
2) Use an automated build process such as grunt/gulp to “build” your code
3) The automated process would apply tasks like testing, lint’ing, minifying, etc.
4) Zip up all those files and deploy as a static resource
5) Have your Skuid page include the static resource

Hope this helps.

Thank you! This basic guide is extremely helpful and should be pinned somewhere.