Pushstates / render content

[andreujuanc]

Hello!!

Back to work after some vacations x)

First, wanted to give you feedback about the "page" injection on every page. Is great, works. I changed the ractive demo pagetwo.html to implement this option instead of doing it on app.js and worked on first try.

Back to the real topic, do you have any plans to:

• Implement html pushstates?
• Implement some sort of "render on id" instead of declaring all the pages on html? It'd be useful for those pages that are lazy loaded.

app.js:
app.on({page: 'home', renderon: 'maincontent'});
index.html:
<div id='maincontent'></div>

If there is already a way to do this, I missed it D:

Also, if this goes "against" the project ideals, it's ok, I wont cry. Maybe.

Cheers

UPDATE:

I think second idea can be implemented in getPageEl function. Instead of returning the element with the same tag name as the page, it can return the element in where it will be rendered.

[andreujuanc]

Ok, got rendering pages on one place without affecting riot pages D:

Ill do more testing and will upload to my fork. Hope to hear some critics x)

andreujuanc@c04c8b5

I messed up and mixed both changes together. one formatting and the actual change :( sorry.

@qathom Do you prefer if(somecondition) or if (somecondition) . Note the space after if and (

Another thing: Is it your editor that does not align the lines that should be, or you doing it by hand? Check here: andreujuanc@c04c8b5#diff-712364b0c799cdedfacfb35b259a3fafL516

[qathom]

Hi @andreujuanc,

Thank you for your contributions! :)
Sorry, I was also in holidays.

Implement html pushstates?
=> Yes. But not asap! In the next major update. :)

Implement some sort of "render on id" instead of declaring all the pages on html? It'd be useful for those pages that are lazy loaded.
=> Page nodes contained in the index.html file are considered like web pages (known resources). I think that lazy loaded data must be included inside of them. What do you think?

Do you prefer if(somecondition) or if (somecondition) . Note the space after if and (
=> The space is preferable, but not all the code of Phonon has been already updated..

Problem with indentation
=> I found this problem recently and I'll fix this. :/

Concerning renderOn: it can be an optional parameter. I am not sure to understand its purpose, is it for rendering the page content in another node than the main one contained in index.html?

[andreujuanc]

@qathom Sorry for the delay! Lots of work.
And also good news. Probably we going to start a project, and if we do, we will use phonon :)

Seriously, i just did a demo for ionic, and it failed with the blank template xD

Page nodes contained in the index.html file are considered like web pages (known resources). I think that lazy loaded data must be included inside of them. What do you think?

Concerning renderOn: it can be an optional parameter. I am not sure to understand its purpose, is it for rendering the page content in another node than the main one contained in index.html?

Both of those were kinda the same thing. one month ago or so I did this:
andreujuanc@a7b168a

I know its lots of "changes" but it was because of the formatting. I messed up and not only commited the big change, but also formatting , and now its hard to see.

What i did was this: (in pizza app)
On index.html:

<div id="maincontent" data-page="true">
</div>   

On app.js
app.on({page: 'pagethree', renderOn:'maincontent'});

The thing is that in this demo pagethree is not defined in index.html, but on the other side, you can see there is a div with id=maincontent. and in the js the page is configured to render there via renderOn.

So, the idea is to prevent double declaration of pages. I did some testing and it works fine.

Need to update my branch to latest, but still seems to work fine.

Let me know what you think, maybe it goes out of the "Ideals" of what your project is about.

Cheers mate!

[qathom]

Hi again @andreujuanc ;)

As always, thank you for your contributions and work!
If I correctly understood, you want to offer the possibility to add div elements as pages and using for example ids instead? In fact, the idea was to use <pagename> as page nodes.
According to me, the use of renderOn is useful if we want to render a template not as the unique child for the page like so:

<mypage data-page="true">[page content is added here]</mypage>

renderOn can be useful for this case:

<mypage data-page="true">
    <header></header>
    <div class="content">
        <div class="my-data">[page content is added here]</div>
    </div>
</mypage>

Did I miss something?

[andreujuanc]

More or less !

Lets say i have 20 pages, i would have to add 20 pages tags and also would need to make the reference in javascript before init() right?

So my idea was to allow pages to be rendered by phonon on a certain element marked by an ID.

That way I would have , in my personal case, 20 pages like this:

app.on({page: 'home', renderOn:'maincontent'});
app.on({page: 'pagetwo', renderOn:'maincontent'});
app.on({page: 'pagethree', renderOn:'maincontent'});
//and so on..

And just one element to render on:

<div id="maincontent" data-page="true">
</div> 

Probably this wont let you have transition animations and other stuff i haven't thought about. or would require more work to get them right. Also would make this hard to cache.

But there is one benefit from this, each page would be created only in js, and this would be completely optional for those who have projects with too many pages.

For a nice compact app, having pages as tags its nice and fast, but if you have a team and there are lots of pages, then without this it would need to double check everything.

[qathom]

Hi @andreujuanc,

Okay I see! Thank you for your explanation.
In this case, the renderOn feature is indeed interesting :)

[andreujuanc]

Yea, more or less.
There are two things here:

1. Adding a renderOn should work fine, and make page lighter (less loaded stuff)
2. but also we can just provide a way to add the page to the body and then just leave it there without content when un-mounting the page?

I don't know which one would have better performance.

What do you think?

[qathom]

@andreujuanc,

I think that renderOn is more interesting than adding a page to the body tag because the unmounted state is more linked to a framework such as Riot or Vue, no? I don't see a scenario where we'd like to remove a node.

[John-Henrique]

This is a great idea, man I needed create an app and this feature would have been very useful.