Print Page - Separate "Sources" and "Themes" in js too?

Title: Separate "Sources" and "Themes" in js too?
Post by: emanuele on January 02, 2013, 08:37:25 am

The new year is having some strange effect on me... ::)

In php we have "Sources" and "Themes". What about having something similar in javascript too?

At the moment several js files have pieces of html around in a more or less random order.
Wouldn't be nice to move all of them into the "theme.js" file in form of functions, so that if someone wants to change something doesn't have to sort of guess where the piece of code he is looking for is?

Something similar to what Sam Clarke did with the latest version of the editor.

Of course I don't mean to have a "sources" and a "themes" directory for javascript, just "some" files corresponding to "sources" and one file that does the "theming".

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on January 02, 2013, 02:42:24 pm

Why would it be nice? Wouldn't it be better to have as few files as possible and cut the number of http requests? That doesn't matter in the case of templates, etc but it is a consideration for any files which have to be downlaoded and cached. Splitting them up, unless absolutely necessary, doesn't seem like a good idea to me.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: TestMonkey on January 02, 2013, 03:02:15 pm

Spuds has made a "combiner" class which combines and minimizes the css and javascript files sent to the browser: only sends the "combination". So the number of files we work with, during development, doesn't matter for what is sent over in the end.
(unless the user desactivates that particular optimization, sure, their choice).

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: emanuele on January 02, 2013, 03:05:05 pm

Quote from: emanuele – January 02, 2013, 08:37:25 amSomething similar to what Sam Clarke did with the latest version of the editor.

Of course I don't mean to have a "sources" and a "themes" directory for javascript, just "some" files corresponding to "sources" and one file that does the "theming".

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on January 02, 2013, 04:56:06 pm

Ok, if we're running a compiler by default then sure, split them up if it will help.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Spuds on January 04, 2013, 10:18:03 pm

I could see the use of moving the JS that affects layout to its own file, call it what you want, like interface.js or something. That way its easier to find the js that hides, collapses, activates, validates, etc in a single place.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: IchBin on January 05, 2013, 05:50:35 pm

Quote from: Spuds – January 04, 2013, 10:18:03 pmI could see the use of moving the JS that affects layout to its own file, call it what you want, like interface.js or something. That way its easier to find the js that hides, collapses, activates, validates, etc in a single place.

/me Like this idea the best.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: The Craw on March 20, 2013, 07:27:58 pm

I like the idea of splitting things up. One of the things I did with PureChat was have two separate javascript objects, one for business logic, and the other for template interaction only. The business logic would handle all of the ajax requests, utility functions, and define variables. So you might have files like this:

utilities.js (helper functions)
main.js (a global object holding important variables)
display.js (information and helper methods for display.template.php)
display.ui.js (user interface interaction object)

Some sample code for display.js and display.ui.js

Code: [Select]

// display.js
var DisplayObject = function()
{
    this.quickReply = function(userName, message)
    {
        message = displayObject.validateMessage(message);
        
        $.ajax({
            url: '';
            data: {userName, message},
            type: 'POST',
            success: function(response)
            {
                if (response.success === 'true') {
                    displayUI.showPost(response.data);
                }
            }
        });
    }

    this.validateMessage = function(text)
    {
        // process text.
    }
}
var displayObject = new DisplayObject; // Create and instance of the "class".;

Code: [Select]

// display.ui.js
var DisplayUI = function()
{
    this.showPost = function(postData)
    {
        var html = 
            '<div class="post no_display">' +
                '<div class="message">' +
                    postData.text +
                '</div>' +
                '<div class="userData">' +
                    '<ul>' +
                        '<li>' + postData.name + '</li>';

        $.each(postData.posterInfo, function(index, data)
        {
            html .=
                        '<li>' + data + '</li>';
        });

        html .=
                    '</ul>' +
                '</div>' +
            '</div>';

        $('.no_display').slideDown(250, function()
        {
            $(this).removeClass('no_display');
        });
    }
}
var displayUI = new DisplayUI;

Personally, I find that a lot easier to debug and modify, because the working code isn't all mixed in with the template interaction. Just my opinion. :)

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on March 20, 2013, 07:47:06 pm

I am a bit worried that you guys are so far into your architecture that you'll end up creating an inpenetrable maze for others.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: The Craw on March 20, 2013, 07:59:06 pm

I could see that happening if things got super polymorphic or something with a zillion different interlocked objects, but if anything I'd say splitting this up makes it easier. Especially if the files and methods are named well, being descriptive of their purpose. Plus then your theme authors know exactly where to go to find some display code, rather than digging around in a few really huge files.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Arantor on March 20, 2013, 10:17:35 pm

Don't forget that you cannot always entirely avoid inline code in the template for very specific cases.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: The Craw on March 20, 2013, 10:42:12 pm

True, but I would think those cases are few and far between. At least they should be.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Arantor on March 20, 2013, 11:02:39 pm

You'd think so, but they're really not. Don't forget how big the codebase really is.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: The Craw on March 21, 2013, 01:31:27 am

What, exactly, do you mean by inline code? Event handlers are obviously tied to the markup, but what else?

Edit: I don't mean inline stuff like onclick="someFunction();" Those are evil to the core.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Arantor on March 21, 2013, 12:24:42 pm

I mean where you have templates actually outputting markup that's specific to the page. For example, the auto suggest component - it loads suggest.js, but then there's code in the main template to initialise the suggester instance with options specific to the page on which it is being called.

Same goes for all instances of the bbc editor.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on March 21, 2013, 03:04:04 pm

Quote from: The Craw – March 20, 2013, 07:59:06 pmI could see that happening if things got super polymorphic or something with a zillion different interlocked objects, but if anything I'd say splitting this up makes it easier. Especially if the files and methods are named well, being descriptive of their purpose. Plus then your theme authors know exactly where to go to find some display code, rather than digging around in a few really huge files.

That sounds good in theory, but we tried something similar during 2.0.x development. The early betas and RC's had the CSS split into a bunch of files. It was found that in practice this was a right PITA, and it was a lot easier on people if the whole lot was just rolled into index.css.

Sure it was a bigger file, but as long as you has a search term you could find what you wanted very easily, with no need to scroll through the whole thing, and you didn't have to remember whch frigging file the bit you wanted was hiding in.

The idea that "Oh hey if we have smaller files things will be easier to find" is not necessarily true. It might be true, if you can memorise the content of every file. :P

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: TestMonkey on March 21, 2013, 03:49:18 pm

Btw, search in files instead of search in one file, when you have a problem. Every editor allows that, and every file manager.

Quote from: Antechinus – March 21, 2013, 03:04:04 pmThe idea that "Oh hey if we have smaller files things will be easier to find" is not necessarily true. It might be true, if you can memorise the content of every file. :P

Nope. If the separation is meaningful, and correctly represented by names/structure.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Arantor on March 21, 2013, 03:58:08 pm

QuoteNope. If the separation is meaningful, and correctly represented by names/structure.

Antechinus' experience is matched by mine. The reality doesn't conform to what we think it should.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on March 21, 2013, 04:32:01 pm

Quote from: TestMonkey – March 21, 2013, 03:49:18 pmBtw, search in files instead of search in one file, when you have a problem. Every editor allows that, and every file manager.

Yeah sure. I know how that works. Open every damned file in the directory. Run your search term on every file. Ok, so you get a hit if you're lucky. So now, close all the files you don't want, so you can actually get at the one you do want. Repeat this process every time you need to edit something.

What Ranty said. :)

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Arantor on March 21, 2013, 04:40:11 pm

Notepad++ does it rather elegantly, but even so it's still not that clever for this.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on March 21, 2013, 04:44:56 pm

Notepad++ is what I was referring to. It's what I usually use.

ETA: "Nope. If the separation is meaningful, and correctly represented by names/structure." Umm, meaningful to everyone, or meaningful to whoever happened to write it? :D

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: TestMonkey on March 21, 2013, 05:27:30 pm

Quote from: Antechinus – March 21, 2013, 04:32:01 pm
Quote from: TestMonkey – March 21, 2013, 03:49:18 pmBtw, search in files instead of search in one file, when you have a problem. Every editor allows that, and every file manager.
Yeah sure. I know how that works. Open every damned file in the directory. Run your search term on every file. Ok, so you get a hit if you're lucky. So now, close all the files you don't want, so you can actually get at the one you do want. Repeat this process every time you need to edit something.

Find in files. All files in directory/directories.

Re: separation in files criteria:
Layout vs actions, is a conceptual separation which makes sense for many reasons.

It is also fine if people don't want to do it, and I can see where the risks of becoming confusing are. But if you do want to do it, go ahead and do it. I think discussion of a real proposal is preferable. Ant, feel free to keep an eye on PRs and see if they make sense to you.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: emanuele on March 21, 2013, 06:57:27 pm

I agree that proper and meaningful separation is difficult to achieve.

What I think, though, is that have all the template elements as close as possible is better than have them spread all over the places.
I think started this topic because I realised there are (or there were) theme elements in script.js (I think) left from before the rework of the theme for 2.1 and not changed. Why? It's not important.
So, from that the "idea" to have all (or at least most) of the "presentation" in one single place instead of spread all over the places (because at the moment it is spread over at least 3 to 5 files).
Nothing too complex, nothing too fancy.

css is for sure a quite different beast.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: IchBin on March 21, 2013, 08:52:08 pm

Quote from: Antechinus – March 21, 2013, 04:32:01 pm
Quote from: TestMonkey – March 21, 2013, 03:49:18 pmBtw, search in files instead of search in one file, when you have a problem. Every editor allows that, and every file manager.
Yeah sure. I know how that works. Open every damned file in the directory. Run your search term on every file. Ok, so you get a hit if you're lucky. So now, close all the files you don't want, so you can actually get at the one you do want. Repeat this process every time you need to edit something.

What Ranty said. :)

Just a quick note.

You're doing it wrong. You can search through a whole directory (and the sub-dirs) without opening a single file in Notepad++.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Antechinus on March 22, 2013, 12:07:50 am

Yeah I just found that out after PestFunky said that stuff about files. ;D

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: emanuele on August 09, 2014, 08:16:09 am

Bump for great justice.

Back to the original topic, without all the wandering about files, my original intent was:
script.js => does stuff
theme.js => shows stuff
scripts.js calls theme.js to finds out *how show certain stuff.
That's all I am thinking to achieve.

And since we are adding some stuff "js-only", I think it's a good moment to start thinking at least of a general structure...

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: emanuele on August 21, 2014, 06:20:07 pm

Usual disclaimer: I was just having some fun reading stuff.

I was curious and I searched a bit the web to see how other people handle this kind of things and I found a list of template engines for javascript:
http://upcomingweb.org/2012/06/javascript-template-engine.html

Most of them seem rather complex stuff, between the first three, dustjs seems the easiest:
https://github.com/linkedin/dustjs
it's used by linkedin (and maybe paypal, I'm not sure about that, though), so it should have something positive. lol

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: IchBin on August 22, 2014, 12:48:54 am

angularjs is cool too.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: Joshua Dickerson on August 22, 2014, 01:20:20 am

I have used JS template engines before but for Elkarte, I can't imagine there are many times when you'll want to use a template from the backend instead of just adding another div or row to a table. In that case, just get the last one, duplicate it, and then change the content. Less things to keep track of.

Title: Re: Separate "Sources" and "Themes" in js too?
Post by: emanuele on August 23, 2014, 07:56:52 am

Yeah, I used that approach in some places, but honestly it's a mess.
It works if you have to add just a couple of things, but for mid-complex stuff it's basically impossible. For example I was thinking to use that approach for my infinite-scrolling trick, but clone the post/poster area and replace the stuff is a nightmare...

ElkArte Community

Elk Development => Feature Discussion => Topic started by: emanuele on January 02, 2013, 08:37:25 am