Experiment with AngularJS and XWiki

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Experiment with AngularJS and XWiki

Ludovic Dubost
Hi,

I've been experimenting with AngularJS and XWiki and I find the two
technologies are a pretty good fit.

You can see a demo of some AngularJS taking to an XWiki backend:

The extension is here:
http://extensions.xwiki.org/xwiki/bin/view/Extension/AngularJSDemo

A demo is here:
http://www.ludovic.org/xwiki/bin/view/Phones/AngularSearch

What I like a lot about AngularJS is the template approach while still
being able to bind dynamic behavior and the fact that there is no backend
compile making it a great fit for integration in XWiki pages.

The demo is a angularJS screen right in an XWiki page. The controler could
have been written as a JS Extension but in the demo it is also in the same
page. The controler is calling both LiveTable JSON pages and REST pages to
retrieve individual documents.

XWiki's current REST apis are far from optimal to quickly retrieve the
needed information to display as I had to configure 3 requests to get the
page information, the main object and the attachment list. However with
AngularJS this was very transparent as you did not need to chain the
requests. Now if would be better if we improved our REST apis with that
type of framework in mind. I've long thought that our REST system lacks the
flexibility we have with XWiki pages. If we want to have the same
flexibility with AJAX development and use and improve our REST apis instead
of writing additional APIs in XWiki pages, then we need an easy way to
extend or override existing REST apis. This could be achieved using Groovy
Scripts that the REST api can dynamically load. These groovy script your
replace, add or extend existing APIs. The example of the LiveTable is a
very good example of the lack of flexibility/speed the development of
additional REST apis represent. If we had had that flexibility the
livetable backend code could be written as REST apis and not as an XWiki
page. This is something we need to fix in our development model if we want
to be a good Javascript UI citizen.

We could push this type of integration way further providing an XWiki
service for AngularJS which would simplify reading XWiki data and
transforming it to the right objects for using in AngularJS templates. We
could also provide additional filters and features for editing.

In any case I believe this is something we really need to look into more in
the future as the embedding works quite well and the angular JS development
model fits the XWiki one quite well. It has the same "visual" aspect as
velocity development but in Javascript with the additional dynamicity.

WDYT ?

Ludovic

--
Ludovic Dubost
Founder and CEO
Blog: http://blog.ludovic.org/
XWiki: http://www.xwiki.com
Skype: ldubost GTalk: ldubost
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs
Reply | Threaded
Open this post in threaded view
|

Re: Experiment with AngularJS and XWiki

vmassol
Administrator
Hi ludovic,

Nice that you took the time to experiment this. I've been wanting to do the same for several months now but didn't get/take the time to work on it. Actually I even proposed this as a talk for Devoxx France but it wasn't accepted :)

I had also noted that for this to work well we need to beef up/improve our REST APIs a lot. And yes we need users to be able to register new REST APIS too. We have talked a lot about this with Fabio and the issue so far was that it wasn't easy to provide this feature with RESTlet. I think it's possible to do it but it requires some heavy digging in RESTlet and communication with them. I'd still like to have that, just need someone to volunteer to work on it… ;)

Thanks
-Vincent

On Apr 16, 2013, at 7:25 PM, Ludovic Dubost <[hidden email]> wrote:

> Hi,
>
> I've been experimenting with AngularJS and XWiki and I find the two
> technologies are a pretty good fit.
>
> You can see a demo of some AngularJS taking to an XWiki backend:
>
> The extension is here:
> http://extensions.xwiki.org/xwiki/bin/view/Extension/AngularJSDemo
>
> A demo is here:
> http://www.ludovic.org/xwiki/bin/view/Phones/AngularSearch
>
> What I like a lot about AngularJS is the template approach while still
> being able to bind dynamic behavior and the fact that there is no backend
> compile making it a great fit for integration in XWiki pages.
>
> The demo is a angularJS screen right in an XWiki page. The controler could
> have been written as a JS Extension but in the demo it is also in the same
> page. The controler is calling both LiveTable JSON pages and REST pages to
> retrieve individual documents.
>
> XWiki's current REST apis are far from optimal to quickly retrieve the
> needed information to display as I had to configure 3 requests to get the
> page information, the main object and the attachment list. However with
> AngularJS this was very transparent as you did not need to chain the
> requests. Now if would be better if we improved our REST apis with that
> type of framework in mind. I've long thought that our REST system lacks the
> flexibility we have with XWiki pages. If we want to have the same
> flexibility with AJAX development and use and improve our REST apis instead
> of writing additional APIs in XWiki pages, then we need an easy way to
> extend or override existing REST apis. This could be achieved using Groovy
> Scripts that the REST api can dynamically load. These groovy script your
> replace, add or extend existing APIs. The example of the LiveTable is a
> very good example of the lack of flexibility/speed the development of
> additional REST apis represent. If we had had that flexibility the
> livetable backend code could be written as REST apis and not as an XWiki
> page. This is something we need to fix in our development model if we want
> to be a good Javascript UI citizen.
>
> We could push this type of integration way further providing an XWiki
> service for AngularJS which would simplify reading XWiki data and
> transforming it to the right objects for using in AngularJS templates. We
> could also provide additional filters and features for editing.
>
> In any case I believe this is something we really need to look into more in
> the future as the embedding works quite well and the angular JS development
> model fits the XWiki one quite well. It has the same "visual" aspect as
> velocity development but in Javascript with the additional dynamicity.
>
> WDYT ?
>
> Ludovic
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs
Reply | Threaded
Open this post in threaded view
|

Re: Experiment with AngularJS and XWiki

Paul Libbrecht-2


On 17 avr. 2013, at 09:12, Vincent Massol wrote:

> And yes we need users to be able to register new REST APIS too. We have talked a lot about this with Fabio and the issue so far was that it wasn't easy to provide this feature with RESTlet. I think it's possible to do it but it requires some heavy digging in RESTlet and communication with them. I'd still like to have that, just need someone to volunteer to work on it… ;)

What is in XCLAMS' servlet plugin is based on restlets, probably an old one, and sounded pretty easily extensible based on the "router".

paul
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs
Reply | Threaded
Open this post in threaded view
|

Re: Experiment with AngularJS and XWiki

Ludovic Dubost
The extensibility here is only in Java.

What I mean by extensibility is also outside of Java (Groovy for instance).
Right now if you have a bug in your rest API it's a nightmare to fix it.

Ludovic


2013/4/17 Paul Libbrecht <[hidden email]>

>
>
> On 17 avr. 2013, at 09:12, Vincent Massol wrote:
>
> > And yes we need users to be able to register new REST APIS too. We have
> talked a lot about this with Fabio and the issue so far was that it wasn't
> easy to provide this feature with RESTlet. I think it's possible to do it
> but it requires some heavy digging in RESTlet and communication with them.
> I'd still like to have that, just need someone to volunteer to work on it…
> ;)
>
> What is in XCLAMS' servlet plugin is based on restlets, probably an old
> one, and sounded pretty easily extensible based on the "router".
>
> paul
> _______________________________________________
> devs mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/devs
>



--
Ludovic Dubost
Founder and CEO
Blog: http://blog.ludovic.org/
XWiki: http://www.xwiki.com
Skype: ldubost GTalk: ldubost
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs
Reply | Threaded
Open this post in threaded view
|

Re: Experiment with AngularJS and XWiki

Jérôme Velociter
In reply to this post by Ludovic Dubost
Hi,

I concur, I think a key improvement would be to have access to all
document information when accessing a document resource ; including
objects, objects properties, tags, etc.
This could be implemented with a resource expansion like
"/rest/[...]/documents/Foo?expand=objects,tags" but could be as well be
the default behavior, there is no extra cost since the document is fully
"loaded" when accessed.

Jerome

On 04/16/2013 07:25 PM, Ludovic Dubost wrote:

> Hi,
>
> I've been experimenting with AngularJS and XWiki and I find the two
> technologies are a pretty good fit.
>
> You can see a demo of some AngularJS taking to an XWiki backend:
>
> The extension is here:
> http://extensions.xwiki.org/xwiki/bin/view/Extension/AngularJSDemo
>
> A demo is here:
> http://www.ludovic.org/xwiki/bin/view/Phones/AngularSearch
>
> What I like a lot about AngularJS is the template approach while still
> being able to bind dynamic behavior and the fact that there is no backend
> compile making it a great fit for integration in XWiki pages.
>
> The demo is a angularJS screen right in an XWiki page. The controler could
> have been written as a JS Extension but in the demo it is also in the same
> page. The controler is calling both LiveTable JSON pages and REST pages to
> retrieve individual documents.
>
> XWiki's current REST apis are far from optimal to quickly retrieve the
> needed information to display as I had to configure 3 requests to get the
> page information, the main object and the attachment list. However with
> AngularJS this was very transparent as you did not need to chain the
> requests. Now if would be better if we improved our REST apis with that
> type of framework in mind. I've long thought that our REST system lacks the
> flexibility we have with XWiki pages. If we want to have the same
> flexibility with AJAX development and use and improve our REST apis instead
> of writing additional APIs in XWiki pages, then we need an easy way to
> extend or override existing REST apis. This could be achieved using Groovy
> Scripts that the REST api can dynamically load. These groovy script your
> replace, add or extend existing APIs. The example of the LiveTable is a
> very good example of the lack of flexibility/speed the development of
> additional REST apis represent. If we had had that flexibility the
> livetable backend code could be written as REST apis and not as an XWiki
> page. This is something we need to fix in our development model if we want
> to be a good Javascript UI citizen.
>
> We could push this type of integration way further providing an XWiki
> service for AngularJS which would simplify reading XWiki data and
> transforming it to the right objects for using in AngularJS templates. We
> could also provide additional filters and features for editing.
>
> In any case I believe this is something we really need to look into more in
> the future as the embedding works quite well and the angular JS development
> model fits the XWiki one quite well. It has the same "visual" aspect as
> velocity development but in Javascript with the additional dynamicity.
>
> WDYT ?
>
> Ludovic
>

_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs