Nitrogen and Jquery Mobile

[Mattias Holmlund]

As I have mentioned earlier, I have started working on integrating Nitrogen and Jquery Mobile. I have now finished a small sample application where Nitrogen is serving pages based on jquery mobile. The code is available on

https://github.com/mattiash/nitrogen_jqm_sample

and the patches for Nitrogen can be found at 

https://github.com/mattiash/nitrogen_core

I have only added a few of the elements necessary for complete jquery mobile support, but it is enough for my purposes.

There is however one aspect of jquery mobile that I haven't been able to use. Jquery Mobile by default uses ajax to follow links. This allows it to load pages in the background and then use pretty transitions to switch to the next page. This looks very good and makes the website look more like an application. However, when pages are loaded via ajax, the javascript code found in the page is not executed. For this to work, all the javascript code for the entire site must be referenced from the first page the user loads. This makes it impractical (impossible?) to generate javascript code dynamically on the server like Nitrogen does.

See http://jquerymobile.com/demos/1.0rc1/docs/pages/page-scripting.html for more info on the jquery mobile model.

I can't see an easy way around this problem for Nitrogen. What I have done in my sample application is to disable loading via ajax. This means that there are no transitions between pages.

/Mattias

--
Mattias Holmlund
http://www.holmlund.se/mattias/

[Jesse Gumm]

Great work Mattias!

I'll admit my ignorance of jquery mobile, but your description of the main issue makes sense.

I don't have an easy or quick answer.  I wonder what it would take to modify jquery mobile to actually execute the javascript on the executed page.  That seems like probably the easiest solution.

-Jesse

--
You received this message because you are subscribed to the Google Groups "Nitrogen Project / The Nitrogen Web Framework for Erlang" group.
To post to this group, send email to nitro...@googlegroups.com.
To unsubscribe from this group, send email to nitrogenweb...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/nitrogenweb?hl=en.

--
Jesse Gumm
Sigma Star Systems
414.940.4866
gu...@sigma-star.com
http://www.sigma-star.com

[Mattias Holmlund]

On Tue, Oct 4, 2011 at 4:20 AM, Jesse Gumm <gu...@sigma-star.com> wrote:

Great work Mattias!

I'll admit my ignorance of jquery mobile, but your description of the main issue makes sense.

I don't have an easy or quick answer.  I wonder what it would take to modify jquery mobile to actually execute the javascript on the executed page.  That seems like probably the easiest solution.

I don't know about that. In a normal nitrogen application (and any traditional web-page) the browser can make a "fresh start" each time you load a new page. The entire dom is thrown out and all running javascript code, event handlers and so on can be discarded. If I let jquery mobile load all pages via ajax, it means that to the browser, the user stays on the same page all the time. If jquery mobile were to execute the javascript code on each page that it loaded via ajax, there would be more and more javascript loaded each time a new page was loaded. Jquery mobile contains logic to remove old pages from the dom to make sure that the dom doesn't grow with each loaded page, but I don't even know if it is possible to do the same thing for javascript code.

I haven't looked at the code for jquery mobile, but I think that there is a good reason why they don't execute javascript when they load pages via ajax.

/Mattias

[Jesse Gumm]

That makes sense, and was something I was definitely considering.
Perhaps we could find a way to reset the global state without loading
the page, for example, by taking a snapshot of the window object, or
manually clearing some kind of state information like

$("*").unbind()
Nitrogen=new NitrogenClass();

And then recommending that users who wish to set global variables do
it on a page-by-page basis do it as Nitrogen.variable rather than var
variable.

That COULD solve some pretty siginificant problems and allow us to
effectively reset the state altogether

What do you think?

-Jesse

PS. sorry for the really delayed response, unlike Erlang, I'm not
built for multitasking :)

[Mattias Holmlund]

On Tue, Oct 25, 2011 at 10:47 PM, Jesse Gumm <gu...@sigma-star.com> wrote:

That makes sense, and was something I was definitely considering.
Perhaps we could find a way to reset the global state without loading
the page, for example, by taking a snapshot of the window object, or
manually clearing some kind of state information like

$("*").unbind()
Nitrogen=new NitrogenClass();

$("*").unbind() is perhaps a bit drastic and it will probably interfere with Jquery Mobile. It might also be expensive. I wonder if we need to do this at all? As long as all the elements of the previous page are hidden they should never fire any events. Jquery mobile also contains code to remove the elements completely after a while and if you remove the element that the event is bound to, I would assume that the code for the event will be garbage collected and go away. The only exception would be .live()-events, but I don't think jquery uses them.

Jquery Mobile fires explicit events before an ajax-page is shown and after it has been hidden, which provide natural places to do the above.

We also need to get rid of the javascript code that jquery inserts into the page via the template. Perhaps this code could be run as if wire() was used to insert the code?

How about timers and comet requests? We need to cancel them somehow when we switch to a different page. Is it really enough to create a new Nitrogen object?

And then recommending that users who wish to set global variables do
it on a page-by-page basis do it as Nitrogen.variable rather than var
variable.

That makes sense.

 

That COULD solve some pretty siginificant problems and allow us to
effectively reset the state altogether

What do you think?

I think this is doable. I honestly don't know if I will do it myself though. I had already resigned to living without the page transitions in my application. I will have a look at the Nitrogen javascript code to see how hard it is, but I can't promise anything.

/Mattias

[Jesse Gumm]

> $("*").unbind() is perhaps a bit drastic and it will probably interfere with
> Jquery Mobile. It might also be expensive.

True. It's probably not necessary to unbind everything.

> Jquery mobile also contains code to remove the
> elements completely after a while and if you remove the element that the
> event is bound to, I would assume that the code for the event will be
> garbage collected and go away. The only exception would be .live()-events,
> but I don't think jquery uses them.

This makes me think there might be another issue here with the jquery
mobile stuff. While it loads the page, it doesn't insert any of the
elements into the dom until the transition begins, correct? If it
inserts the elements into the dom before the transition, that could be
a serious problem if you have form elements with the same nitrogen ids
on each page, and wf:q/1 would throw a too_many_elements error. If my
suspicion is unfounded, then awesome, I'm worrying about nothing :)

> Jquery Mobile fires explicit events before an ajax-page is shown and after
> it has been hidden, which provide natural places to do the above.

Very much so.

> We also need to get rid of the javascript code that jquery inserts into the
> page via the template. Perhaps this code could be run as if wire() was used
> to insert the code?

That [[[script]]] section in the template is where it puts the wf:wire
on normal pageloads. As you said, it doesn't evaluate js on ajax
pageload and dom insertion. What could be the solution for that? We
might need to introduce some kind of ajax request to be fired for each
jquery mobile transition that would fetch the pagestate to
re-initialize the Nitrogen element, but we'd need some kind of state
to track so Nitrogen knows which state to fetch. I'm not seeing an
obvious way of doing this.

> How about timers and comet requests? We need to cancel them somehow when we
> switch to a different page. Is it really enough to create a new Nitrogen
> object?

Probably not. I'm not sure how much is tracked (in order to be
cancelled) when resetting the Nitrogen object.

> I think this is doable. I honestly don't know if I will do it myself though.
> I had already resigned to living without the page transitions in my
> application. I will have a look at the Nitrogen javascript code to see how
> hard it is, but I can't promise anything.

Rock on! Thanks man. Anything you can and want to do is appreciated!
Do you have a live version of your mobile site I could look at or play
with? I'd like to check it out on my phone to see how it acts.

-Jesse

[Mattias Holmlund]

On Wed, Nov 2, 2011 at 8:17 PM, Jesse Gumm <gu...@sigma-star.com> wrote:

<lots of stuff that I will deal with later> 

Do you have a live version of your mobile site I could look at or play

with?  I'd like to check it out on my phone to see how it acts.

I have a testsite up on a temporary server now. Feel free to test it. I might close it down at any time though.

http://sto.holmlund.se:8000/

/Mattias

[Jesse Gumm]

Very nice! Thank you :)

-Jesse

> --
> You received this message because you are subscribed to the Google Groups
> "Nitrogen Project / The Nitrogen Web Framework for Erlang" group.
> To post to this group, send email to nitro...@googlegroups.com.
> To unsubscribe from this group, send email to
> nitrogenweb...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/nitrogenweb?hl=en.
>

--

[Mattias Holmlund]

I have now finished a proper nitrogen and jquery mobile integration. The page transitions work as they should and the I have made a version of the comet1 demo page that also seems to work. The changes to Nitrogen ended up being fairly small and I don't think I have broken anything in "normal" nitrogen. 

I have only tested this on Google Chrome, Firefox, a Nokia N900 and a ZTE Blade with Android 2.1. It needs testing on at least an ipad/iphone and a more recent Android device. Unfortunately, I don't have access to any other devices.

My changes include the following commits:

- Look for elements under page root

  To avoid the problem that Jesse identified, where wf:q could find several form elements with the same id if several pages are in the dom at the same time, I have modified the element matching code to look for elements only under the <div data-role="page"> tag that contains each page.

- Moved javascript code to a data-code property of the data-role="page" tag. This code is then eval()'d when the page is shown. This means that the nitrogen code for each page is executed when the page is loaded.

- Added a $destroy method to NitrogenClass. When $destroy is called, any pending system_events are cancelled and as soon as the queued events have been executed, the event loop is stopped. $destroy is called when a page is hidden and then a new Nitrogen object is created when the next page is shown. This does however mean that for a short period of time, there may be more than one Nitrogen eventloop running. To handle this case, I had to modify $event_loop to always refer to "this" instead of the global Nitrogen variable.

All the code is in

https://github.com/mattiash/nitrogen_core

A demo application can be found in

https://github.com/mattiash/nitrogen_jqm_sample

I have two outstanding issues:

1. The change event is fired several times with identical values when you move a slider.

2. The first jqm page (the one that you entered the application via) is never reloaded.

I think that these are jqm issues that have nothing to do with Nitrogen.

/Mattias

--
You received this message because you are subscribed to the Google Groups "Nitrogen Project / The Nitrogen Web Framework for Erlang" group.
To post to this group, send email to nitro...@googlegroups.com.
To unsubscribe from this group, send email to nitrogenweb...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/nitrogenweb?hl=en.

[Jesse Gumm]

Kudos to you Mattias!

This will definitely be part of the upcoming 2.1.0 release, properly
attributed, of course :)

I can do some testing with my own devices (HP Touchpad and my Android
2.3 phone, next week thursday I can experiement a bit with a friend's
iPad2 and iPod).

Thanks,

-Jesse