I'd like to load my web app data into a javascript array. Has anyone done this or know the best way to accomplish this?
I know this topic is old, but I figured I'd offer my two cents anyway.
For a list with many items, I use a custom list template (released after these posts were written) to create a js object:
'{tag_name_nolink}' : {id: '{tag_itemid}',url: '{tag_itemurl_nolink}'},
And then on the page where I insert the module, I surround it with the rest of the object code:
<script>
var itemList = {
{module_webapps,18231,a template="/Layouts/WebApps/my_web_app/customlist.tpl",,,,true,500,,1}
null : {id: null,url: null}
};
</script>
Now I can call an object with:
itemList.url
Or whatever.
Technically inline, but still at the bottom of the page. And the code that reads it wouldn't be inline.
I guess, to me, there are a lot of things that can't be done ideally in BC (though, that changes for the better every month), so this is a work around.
That said, I'm completely unfamiliar with html5 data objects (except by name). I'll check it out! Thanks, Liam.
I really do the same thing, with this situation being the only exception. One of the things I really like about this is that it is simply creating an object, without even traversing the Dom.
So, I'm assuming you see it as a performance hit. Is that it? Is there something you would do in this situation that doesn't cause concern?
I like that, as long as you can safely expect you won't accidentally escape something improperly... it's unfortunate that webapps don't export to json on their own though.
I've usually just pulled a custom data list template in with ajax (as html), attached it to a dummy dom object and used that.
One the primary things I learnt at Uni is the Object Oriented Modal of design and Development, MVC etc.
Seperation of the function, display, data being a fundemental point to develop and all the benifits of that.
Also, Your HTML code will weigh more, i.e. a web page riddled with similar code will have a kb size that is a lot larger than necessary. The inline script and css will make the source more dense, search engines have to sift through it to find your actual content.
Your HTML code will never be truely cached but the external dependencies, such as the CSS and JavaScript files, will be cached by the visitor’s web browser after the first visit – this means that instead of loading a lot of superfluous HTML code for every page in your web site the visitor visits, it will quickly retrieve all style and interaction locally from the web browser cache and thus improve perfomance further.
No fall back interaction, and harder to manage, correct and update along with poor attrinbute accessability. Having your scripting in one central location makes your development time more effecient, working on new aspects of the site has no effect on the live site, functions can be wrote once called many times and only when needed. Object coding in Javascript improves performance, management, use and more also.
With these in mind the page load is just longer with inline scripting and the event handling is poorer and then coupled with the other elments mentioned above.
Just better done right
BC has runs gzip, you can optimise your code and the server caching of css, script, image files and the browser it just all leads to better perfomance of your site which is also increasingly something google wants to see to rank you well.
Alright Penny and Liam,
I had to go do a bit of research because of Penny's comment. The subject of MVC is entirely foreign to me, so I entirely missed that in Liam's comment.
So Liam, here's what I think you are saying to me:
I had BC output an object (part of my model) for my functions (model, controllers) to use, along with its usual job of delivering the HTML (the view portion of its own model). This is first of all messy. Second, if I were to do this at all, done correctly, instead of just a lonely object sitting by itself I should have wrapped it into a useful function so it's purpose is more clear?
Scale of 1-5, how close am I. (five is right on)
Adam,
To start you off in terms of basics....
Have a functions file (I wrote a guide on the Adobe site but BC took their guide section down as it was another place. I got it saved and I will put it as a guide on these forums soon!) where you write your functions. Each function for a job.
Have a Dom.js file where you run the dom in jQuery. One time call. In here you can call a function when to run it.
So say you have the home page slider but that is only home page.
You wrap the function in an if statement that basically is..
If element exists (.length) then run this function.
If the element does not exist the function does not run.
You can lazy load and call scripts, create script library to run (On our sites we have one extra .js at the bottom called to do all our magic) and add plugins easily to a site, lazy load them so they do not run every time you load a page even if not needed....
You can progress to convert everything into objects not just functions.
You can progress still to use classes in javascript..
jQuery has great features to aid in all these areas.....
So much you can do to optimise not just your sites and scripts but how you operate running these methods.
The OO apporach to your work is modular design and development just means you can do more for less and sites are just better.
Penny, smaller the code the better really, Lots of people use jQuery plugins because they do not understand javascript or jQuery that well to get something going. Often 4 lines of code can be done to do the same job.
Some aspects wont work in that sense for web development and more over BC but you can come up with a really nice modal for yourself and BC.
I have a scripts.js file that contains all my jquery plugins and an object with all my scripts divided up by their different purposes:
Object.category.script ();
The only other script references I include in the document, with the exception of the obvious CDN references like jquery, are the odd time when a set of functions are very large and only applicable to a particular area of the site. I do this because including them in my scripts.js file would make it to big to quickly read through.
The reason I justify having a custom list layout output an object for me is because it saves (just in this particular scenario) a lot of http requests and unnecessary processing.
We don't have an ideal coding world in BC. Sometimes I think it's more about weighing the fruits of your options against the fruits of convention.
Perhaps more load overall, but certainly not on the front-end. Just the same, this has been an intriguing discussion, prompting a little research on my part. I always appreciate that.
I'd be interested to see how you do things, Liam. Unless, of course, you feel a little protective of all the work you've done to develop it. That would be understandable. But I've always enjoyed learning from others.
More Adam, See by big above post
Due to the caching and a few other bits. More load being inline.
I did a big basics guide for intermediates that was up on adobe site but removed as BC closing to many avenues for guides. I will re-up it in the guides section I cleaned up before xmas on these forums. That will be the guts of what I do and the basic concepts.
Sounds of it your about there Adam. Have to admit I have not fully practised what I preach in but defiantly do not do inline. Time to update but I think I do as some do with the Object oriented, lazy loading etc.
Even if it is only slight improvements in perfomance in SOME areas and lots in others the management apsects of it alone is worth adopting.
Think about inline stuff as well with jQuery and all the people calling the Dom multiple times!, eeek! SO many do using BC ![]()
To tell the truth, the thought of "calling" the Dom has never even crossed my mind. I think of server calls, and I think of how much work has to be performed by the browser (especially when I'm creating loops), but you're absolutely right. We do call the Dom, and it's just one more handshake that has to happen. The first thing I'm going to look into is a Dom.js approach.
I think this has been one of the most interesting discussions on this forum, and has certainly stimulated my thinking!
Do any of you use source control?
I guess as a sole developer, it may be a bit pointless in my case, and I always take a copy of a file before I start modifying it.
Also, if clients are updating files you have no control over that.
Penny
I seen sites which do the jquery DOM loading 20/3o times because of all the inline scripting! pretty shocking, lol.
You can get it to have one js called in your templates which loads what you need when you need it and all the basics etc and out of the head to reduce the load there. So clean, performs well.
Ecommerce framework fuel offers through the ecommerce websites business has HEAPS of script to fix up BC eCommerce (which has so many issues) along with the standard issues and of course securezone ones all together. More script then I like but I would hate to think the load it would be without some of the above mentioned stuff in play. And that even uses old ways we do things, just a big job to update it at the moment.
As per Kenneth earlier in this discussion:
“I've usually just pulled a custom data list template in with ajax (as html), attached it to a dummy dom object and used that.”
It just hit me, thanks to this discussion, that this is the better approach. I'll still create my custom list template that outputs an object for me, but instead of having it load into the page, I'll avoid the caching by calling it through Ajax into my scripts.js. Duh. I was so close to a perfect solution!
Git is awesome, How it works in Coda 2 is awesome BUT.... You do not need it in BC. It is great for huge projects and team environments and big system development but a bit much for BC and I find it slows you down.
Bit to much I think.
With some of the above and applying that to how you build BC in general, which I think literally the Penny has droppoed on that from Penny and sounds like she has some improvements to make on her BC builds already (which will be awesome) you can have great fun building BC sites. I do.
Here you go by the way re-document:
http://forums.adobe.com/docs/DOC-2964
Formed up this evening. You may know a lot or do some or all of it but it a good guide for lots of people hopefully.
Liam, as I read through your document and thought about the merits of lazy loading, a question arose. How do you handle jQuery plugins?
Currently, I paste them directly into the top portion of my scripts.js file, then call them from within my object at the bottom portion of the file. To illustrate, this represents my current file structure (though I included the 'if' statements around my functions in a new attempt at make this better at lazy loading):
/* Plugins */
This represents a minimized version of a jquery plugin, pasted directly into my scripts.js file.
Here is another.
And another.
/* My scripts */
jQuery.noConflict();
function scriptlist() {
var $ = jQuery;
var Engine = {
utils : {
function1 : function() {
//do stuff here
}
function2 : function() {
//do stuff here
}
},
ui : {
function1 : function() {
//do stuff here
}
}
};
if( $(element).length ) {
Engine.utils.function1();
}
if( $(element2).length ) {
Engine.utils.function2();
}
if( $(element).length ) {
Engine.ui.function1();
}
};
jQuery('body').on('click.productSubmitInput',function() {
jQuery.ready(scriptlist());
});
scriptlist();
Now, there are probably many things wrong with what I wrote, and you are free to comment on them, but my questions are: Is it bad to include the plugins at the top of this file? Should they, instead, be contained within my scriptlist() somehow? Should I have conditions set on their loading?
There are a few different ones but I call them in the Dom.js but through lazy laoding. They are declared with cache or not and their dependencies if they have them and then call functions / objects on the Dom call.
IF functions call a plugin then the plugin is only loaded when called.
Something else you can do is use getScript in jquery in a function to call another script to use only when you need it in that function.
Have you looked at require.js? (http://requirejs.org/)
I haven't had the best of luck using getScript with multiple libraries because of async issues, but apparently promises are a thing now and i'm trying to learn them, to make a function queue like this.
North America
Europe, Middle East and Africa
Asia Pacific