subject:"\[web2py\] Re\: Ractive and Single Page Apps"

Re: [web2py] Re: Ractive and Single Page Apps

2015-10-22 Thread Michele Comitini

This ractive extension could be of interest to you IMHO:

http://ractive-require.codecorico.com/

2015-10-22 10:11 GMT+02:00 p a :

> Two more comments:
>
> - I don't intend to push all logic to the server, but only the "view" part
> in web2py. My long term goal is to have a working API, and many ractive
> components that can be combined in different ways, and allow to show data
> and/or interact with it independently. Then a person joining the team will
> have an easier job if she wants to work only on the front, in javascript,
> or only on the server, in python. The work I'm doing right now is also
> trying to fix all the routes that did not work well in json, for one reason
> or another. Maybe it will open new chances for interoperability with other
> software. Before I started to do this transformation, returning a dict with
> only raw data from every controller was only a question of
> discipline/aestetics, but now it's for real.
>
> - There's another issue that you may run into, Rod, and it's redirections.
> The solution is bytesize, if you can find it. My solution was to modify
> web2py.js, from:
>
> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>
> if(redirect !== null) {
>   window.location = redirect;
>
>
> to:
>
> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>
> if(redirect !== null) {
>   YourRouter.navTo(redirect);
>
>
> and use client_side=True on web2py so that it returns a 200 code instead
> of a 303 code. That way redirections work fine with page.js. Maybe in
> crossroads.js you can find other solutions, page.js seems simpler to use
> but more constrained.
>
> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to web2py+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [web2py] Re: Ractive and Single Page Apps

2015-10-22 Thread Rod Watkins

This looks cool. I had not found this. I plan to study it today.
Rod

On Thursday, October 22, 2015 at 3:17:00 AM UTC-7, mcm wrote:
>
> This ractive extension could be of interest to you IMHO:
>
> http://ractive-require.codecorico.com/
>
> 2015-10-22 10:11 GMT+02:00 p a :
>
>> Two more comments:
>>
>> - I don't intend to push all logic to the server, but only the "view" 
>> part in web2py. My long term goal is to have a working API, and many 
>> ractive components that can be combined in different ways, and allow to 
>> show data and/or interact with it independently. Then a person joining the 
>> team will have an easier job if she wants to work only on the front, in 
>> javascript, or only on the server, in python. The work I'm doing right now 
>> is also trying to fix all the routes that did not work well in json, for 
>> one reason or another. Maybe it will open new chances for interoperability 
>> with other software. Before I started to do this transformation, returning 
>> a dict with only raw data from every controller was only a question of 
>> discipline/aestetics, but now it's for real.
>>
>> - There's another issue that you may run into, Rod, and it's 
>> redirections. The solution is bytesize, if you can find it. My solution was 
>> to modify web2py.js, from:
>>
>> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>>
>> if(redirect !== null) {
>>   window.location = redirect;
>>
>>
>> to:
>>
>> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>>
>> if(redirect !== null) {
>>   YourRouter.navTo(redirect);
>>
>>
>> and use client_side=True on web2py so that it returns a 200 code instead 
>> of a 303 code. That way redirections work fine with page.js. Maybe in 
>> crossroads.js you can find other solutions, page.js seems simpler to use 
>> but more constrained.
>>
>> -- 
>> Resources:
>> - http://web2py.com
>> - http://web2py.com/book (Documentation)
>> - http://github.com/web2py/web2py (Source code)
>> - https://code.google.com/p/web2py/issues/list (Report Issues)
>> --- 
>> You received this message because you are subscribed to the Google Groups 
>> "web2py-users" group.
>> To unsubscribe from this group and stop receiving emails from it, send an 
>> email to web2py+un...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-22 Thread Rod Watkins

The redirection trick is good to know. Little gotchas like that can drive 
you nuts.  I'll put this in my vault for later when I try to learn how to 
use ractive for my app.

On Thursday, October 22, 2015 at 1:11:13 AM UTC-7, p a wrote:
>
> Two more comments:
>
> - I don't intend to push all logic to the server, but only the "view" part 
> in web2py. My long term goal is to have a working API, and many ractive 
> components that can be combined in different ways, and allow to show data 
> and/or interact with it independently. Then a person joining the team will 
> have an easier job if she wants to work only on the front, in javascript, 
> or only on the server, in python. The work I'm doing right now is also 
> trying to fix all the routes that did not work well in json, for one reason 
> or another. Maybe it will open new chances for interoperability with other 
> software. Before I started to do this transformation, returning a dict with 
> only raw data from every controller was only a question of 
> discipline/aestetics, but now it's for real.
>
> - There's another issue that you may run into, Rod, and it's redirections. 
> The solution is bytesize, if you can find it. My solution was to modify 
> web2py.js, from:
>
> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>
> if(redirect !== null) {
>   window.location = redirect;
>
>
> to:
>
> var redirect = xhr.getResponseHeader('web2py-redirect-location');
>
> if(redirect !== null) {
>   YourRouter.navTo(redirect);
>
>
> and use client_side=True on web2py so that it returns a 200 code instead 
> of a 303 code. That way redirections work fine with page.js. Maybe in 
> crossroads.js you can find other solutions, page.js seems simpler to use 
> but more constrained.
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-22 Thread p a

Two more comments:

- I don't intend to push all logic to the server, but only the "view" part 
in web2py. My long term goal is to have a working API, and many ractive 
components that can be combined in different ways, and allow to show data 
and/or interact with it independently. Then a person joining the team will 
have an easier job if she wants to work only on the front, in javascript, 
or only on the server, in python. The work I'm doing right now is also 
trying to fix all the routes that did not work well in json, for one reason 
or another. Maybe it will open new chances for interoperability with other 
software. Before I started to do this transformation, returning a dict with 
only raw data from every controller was only a question of 
discipline/aestetics, but now it's for real.

- There's another issue that you may run into, Rod, and it's redirections. 
The solution is bytesize, if you can find it. My solution was to modify 
web2py.js, from:

var redirect = xhr.getResponseHeader('web2py-redirect-location');

if(redirect !== null) {
  window.location = redirect;


to:

var redirect = xhr.getResponseHeader('web2py-redirect-location');

if(redirect !== null) {
  YourRouter.navTo(redirect);


and use client_side=True on web2py so that it returns a 200 code instead of 
a 303 code. That way redirections work fine with page.js. Maybe in 
crossroads.js you can find other solutions, page.js seems simpler to use 
but more constrained.

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-21 Thread Niphlod

if all you want is not reloading the entire page (before going to "full 
logic pushed on the client, server just sends the data over") pjax takes 
maybe 4 lines of code.

On Wednesday, October 21, 2015 at 8:14:37 AM UTC+2, p a wrote:
>
> El miércoles, 21 de octubre de 2015, 3:39:34 (UTC+2), Rod Watkins escribió:
>>
>> So let me ask, was the conversion to a client side SPA worth it? Also, 
>> can I use just ractive and let web2py do the routing and some of the 
>> templating (I guess that sort of how Massimo did it in the estore project)? 
>>
>
> The conversion is still WIP, so I can't really tell. But my feelings are:
>
> - It feels faster and more professional as a user. Then menus and footer 
> are not reloaded, but above all, each ilbrary is run only once. Change page 
> in a multi page app, and you sure get the js libraries from the cache, but 
> they need to be run again. Do it in a SPA, and you run only the bare 
> minimum javascript code.
> - In the mid term, you will tend to write lighter ajax json calls. That's 
> more efficient for small requests, and from the client side it looks more 
> modern.
> - In the long term, you will see other chances for improving efficiency 
> with many nice frontend tools like webpack and gulp, like for example 
> translating the strings and preparing a bundle with all your minified 
> javascript, and your translations, in one file that you can gzip.
>
> On the downside, my app has several complex views that use heavy js 
> libraries: ckeditor, handsontable, jqplot, corefive filemanager and others 
> that most users don't need all the time. So I decided not to bundle 
> everything into a big webpack bundle. webpack apparently allows to break 
> your code into several bundles, but AFAIK if you load a web2py component, 
> your code is not run inside webpack, and you can't "require" libraries 
> using the normal mechanism. Furthermore, some libraries like CKEDITOR do 
> not work with webpack (neither require.js nor browserify), so I'm not using 
> ewbpack for everything. Instead, I load non-essential libraries with 
> jQuery.getScript, till the day comes when I have moved all views from 
> web2py into ractive views, and I can use webpack's "code splits".
>
> It has taken a lot of research to find and choose the libraries I like. As 
> Niphlod says, you either use a monster framework, or cherry pick one 
> library for each task. If you decide to go this way, I really like jquery 
> (it really pays to read the docs, it's even more useful that it first 
> seems), bootstrap (a time saver if you're not into UX and design), ractive 
> (using components) and jquery.form (you need it to send files through 
> ajax). I'm not so happy with CKEDITOR or page.js. webpack is super-pro, but 
> it may or may not be the best fit for your goal.
>
> See, I can't really compare the benefits of this approach versus Massimo's 
> store. I had one idea when I started and changed my mind since I started. 
> Look, I'm not a pro and I'm a first timer with front end frameworks (or not 
> frameworks), so if you can get an opinion from Massimo or Niphlod, you 
> should give that more weigth.
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-21 Thread p a

El miércoles, 21 de octubre de 2015, 3:39:34 (UTC+2), Rod Watkins escribió:
>
> So let me ask, was the conversion to a client side SPA worth it? Also, can 
> I use just ractive and let web2py do the routing and some of the templating 
> (I guess that sort of how Massimo did it in the estore project)? 
>

The conversion is still WIP, so I can't really tell. But my feelings are:

- It feels faster and more professional as a user. Then menus and footer 
are not reloaded, but above all, each ilbrary is run only once. Change page 
in a multi page app, and you sure get the js libraries from the cache, but 
they need to be run again. Do it in a SPA, and you run only the bare 
minimum javascript code.
- In the mid term, you will tend to write lighter ajax json calls. That's 
more efficient for small requests, and from the client side it looks more 
modern.
- In the long term, you will see other chances for improving efficiency 
with many nice frontend tools like webpack and gulp, like for example 
translating the strings and preparing a bundle with all your minified 
javascript, and your translations, in one file that you can gzip.

On the downside, my app has several complex views that use heavy js 
libraries: ckeditor, handsontable, jqplot, corefive filemanager and others 
that most users don't need all the time. So I decided not to bundle 
everything into a big webpack bundle. webpack apparently allows to break 
your code into several bundles, but AFAIK if you load a web2py component, 
your code is not run inside webpack, and you can't "require" libraries 
using the normal mechanism. Furthermore, some libraries like CKEDITOR do 
not work with webpack (neither require.js nor browserify), so I'm not using 
ewbpack for everything. Instead, I load non-essential libraries with 
jQuery.getScript, till the day comes when I have moved all views from 
web2py into ractive views, and I can use webpack's "code splits".

It has taken a lot of research to find and choose the libraries I like. As 
Niphlod says, you either use a monster framework, or cherry pick one 
library for each task. If you decide to go this way, I really like jquery 
(it really pays to read the docs, it's even more useful that it first 
seems), bootstrap (a time saver if you're not into UX and design), ractive 
(using components) and jquery.form (you need it to send files through 
ajax). I'm not so happy with CKEDITOR or page.js. webpack is super-pro, but 
it may or may not be the best fit for your goal.

See, I can't really compare the benefits of this approach versus Massimo's 
store. I had one idea when I started and changed my mind since I started. 
Look, I'm not a pro and I'm a first timer with front end frameworks (or not 
frameworks), so if you can get an opinion from Massimo or Niphlod, you 
should give that more weigth.

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-21 Thread p a

On Wednesday, October 21, 2015 at 8:33:09 AM UTC+2, Niphlod wrote:
>
> if all you want is not reloading the entire page (before going to "full 
> logic pushed on the client, server just sends the data over") pjax takes 
> maybe 4 lines of code.
>

That was not my experience. I had been using (or abusing) some things that 
work well in standard web2py multi page but not in single page. Some 
examples:
- CKEDITOR needs proper cleanup before you remove the textarea from the 
DOM. Other libraries don't have that problem.
- You have to be careful with the jquery selectors, and/or do cleanup if 
you don't want to pile callbacks to common events. You must understand the 
difference between

$(document).on('click', 'input', callback)
$(#my_form).on('click', 'input', callback)
$('input').on('click', callback)

which is not essential in multi-page, when you are "restarting your app" on 
every call.

- If you don't want to load heavy non-essential libraries many times, you 
want to load them in the proper order, you want some code to run only after 
its dependencies are loaded, but inmediately if they are already loaded, 
etcetera, some work is needed. I trigger a custom jquery event, and attach 
callbacks using $().one('scripts_loaded', callback).

- For some reason, I do have to reload the css files: if I don't remove a 
css link that I added dinamically to head, and reattach it again, most 
libraries don't work. I could research more, for sure.

- You can't upload files via ajax, you can solve it using jquery.form.

- Some ajax callbacks should update the title of the page, and add an entry 
to the browser history, while others don't. Thus the need for crossroads.js 
or page.js

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-20 Thread Niphlod

ractive does just templating and data binding. nothing else. If you need a 
routing system, use a routing library. One of the best/worst things of 
javascript (node too) is that the world is littered by thousands of small 
little libraries that you can mix and match. There's no clear path, nor a 
clear opinionated "recipe" that puts together the best libraries  you 
have to choose for yourself.

That being said, if in need of client side routing I leverage crossroads.js

On Tuesday, October 20, 2015 at 5:38:51 AM UTC+2, Rod Watkins wrote:
>
> Hello everyone,
>
> I am hoping some of you who have already been using ractive.js may be able 
> to help me. I'd like to create a single page app. The usual frameworks for 
> doing so, from what I've read, are angular, backbone (+ marionette) and 
> ember. I've studied angular and ember and each seems to be doing way more 
> than I want it to. Let me explain. I hate javascript. I think its an ugly, 
> nigh unreadable language. Python by contrast... oh the beauty. So I would 
> rather not use a js framework that takes over functions I rather have 
> web2py perform. That's why I am attracted to ractive. I understand the 
> value of two-way data-binding and client side views. And that's ractive's 
> game and no more. Besides, its dead simple to use--not at all like angular 
> or ember, as far as I can see.
>
> But that leaves me with a question. Angular/ember/backbone have routing 
> systems. Ractive does not. So how do you handle routing for a single page 
> app from web2py. How have others implemented this with ractive? I am very 
> new to the single page app paradigm and it just isn't clicking for me. By 
> the way, I have tried to study the w3 example from Massimo, but it's not 
> been a lot of help. I think I just need a bit of a walk through. Maybe this 
> could be the start of a new section for the web2py book??
>
> Cheers
> Rod
>
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-20 Thread p a

A few months ago I decided to turn my existing, rather big and complex 
multi-page web2py app into a single page app. The plan is to load all the 
existing pages using web2py_component into the div#main_region, so that I 
get a working application as soon as possible, but then start to move view 
logic to the client, eventually calling web2py only for json data, and 
building the client pages using some kind of library of framework.

I was already using jquery and bootstrap a lot (plus handsontable, 
ckeditor, jqplot...), so I had to use a library/framework compatible with 
that, and I didn't even consider angular and ember, since they seem to have 
their own way for doing everything.

I did consider backbone+marionette, but I felt I was back to the Java days, 
writing a lot of code and getting nothing in return. I also felt like I had 
to duplicate work that was already done in web2py. Ractive definitely seems 
a better match fo web2py+jquery, to my limited experience, if you find a 
good way to organize your code.

I found the following tutorial extremely helpful (it has 6 parts, I 
recommend you read at least the first 4 parts):

http://paquitosoftware.com/ractive-js-tutorial-setting-up-your-environment/

It shows how to use ractive, webpack, page.js for routing, and proposes a 
nice folder structure for your code. It also shows you how to take 
advantage of webpack to compile ES6 into javascript real time, and you 
could use a similar trick for coffescript or something you like better than 
plain old javascript.

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[web2py] Re: Ractive and Single Page Apps

2015-10-20 Thread Rod Watkins

Hi p a,

What you have described is basically where I am at. I have a large 
multi-page app. My plan is to start as you did and "component-ize" it and 
convert the bulk of the views to components I can then load with ajax. To 
convert it to a full-fledged SPA, I'd then start using ractive to move the 
view logic to the client side. I guess at this point, I'm trying to decide 
if going that further step is really worth it. (Besides the value of 
learning how to do it. That's always something I can do in another 
project). Ember, angular and backbone all seems to be overkill and involve 
a steep learning curve.  That's why I was attracted to ractive--it's easy 
to learn. But even then, I am not sure how much is gained. As Niphold likes 
to point out, if it is about efficiency, the bottlneck in my app is db 
access and not generation of the views--that won't change no matter how 
much the view logic is pushed client side.

So let me ask, was the conversion to a client side SPA worth it? Also, can 
I use just ractive and let web2py do the routing and some of the templating 
(I guess that sort of how Massimo did it in the estore project)? 

Thanks for the help!!

Rod

P.S. Thanks Niphold, crossroads.js looks simple enough. If I go the whole 
SPA route, I'll likely either use that or pages.js.

On Tuesday, October 20, 2015 at 2:44:26 PM UTC-7, p a wrote:
>
> A few months ago I decided to turn my existing, rather big and complex 
> multi-page web2py app into a single page app. The plan is to load all the 
> existing pages using web2py_component into the div#main_region, so that I 
> get a working application as soon as possible, but then start to move view 
> logic to the client, eventually calling web2py only for json data, and 
> building the client pages using some kind of library of framework.
>
> I was already using jquery and bootstrap a lot (plus handsontable, 
> ckeditor, jqplot...), so I had to use a library/framework compatible with 
> that, and I didn't even consider angular and ember, since they seem to have 
> their own way for doing everything.
>
> I did consider backbone+marionette, but I felt I was back to the Java 
> days, writing a lot of code and getting nothing in return. I also felt like 
> I had to duplicate work that was already done in web2py. Ractive definitely 
> seems a better match fo web2py+jquery, to my limited experience, if you 
> find a good way to organize your code.
>
> I found the following tutorial extremely helpful (it has 6 parts, I 
> recommend you read at least the first 4 parts):
>
> http://paquitosoftware.com/ractive-js-tutorial-setting-up-your-environment/
>
> It shows how to use ractive, webpack, page.js for routing, and proposes a 
> nice folder structure for your code. It also shows you how to take 
> advantage of webpack to compile ES6 into javascript real time, and you 
> could use a similar trick for coffescript or something you like better than 
> plain old javascript.
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [web2py] Re: Ractive and Single Page Apps

Re: [web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

[web2py] Re: Ractive and Single Page Apps

10 matches

Site Navigation

Mail list logo

Footer information