General code structure

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

General code structure

Frédéric
Hi!

As I'm plannning to write a client application, in order to drive my KNX¹
installation, I was searching for a high-level javascript framework, and
found qooxdoo, which fits all my needs:

- great OO implementation
- python/java-like dev. approach
- lots and nice widgets
- very good documentation

Congratulation to the dev. team, this is great work!

A few years ago, I also wrote a small javascript application for a photo
club, which allows our members to upload, then select/vote for the best
photos; we still use this application each time we want to make a
selection, for national contests. Js part of the code is here:

    http://www.gbiloba.org/download/vote/

This small app. is very basic, and lacks some admin features (I often have
to use phpmyadmin to modify datas!). It was written using 'prototype'
framework, which only provides basic OO pattern. When I see qooxdoo, I
think I could reduce the code size by a order of magnitude!

So, as an exercice, I want to migrate this app.

My question is: how should I organise my code, in order to have robust
design? I want to use MVC pattern, and split things. In my codes (I also
wrote a panoramic control software, using PyQt²), for each screen/window, I
write a model, a view and a controller. The controller handles all the
logic between the model and the view (signal handlings, data
modifications and so).

How to do that with qooxdoo? I read the documentation, and
examples/tutorials, but I don't have yet an overall view of all
tools/features. For example, I don't see yet how to integrate provided
controllers and models with mines...

Do you have some example code of a more complete application than the
tutorial 'tweets' one, showing a robust structure (what dirs/files to
use...)?

Thanks,

¹ http://www.knx.org
² http://www.papywizard.org (I first wrote it using PyGtk, and
  later switched to PyQt; it was very easy, because of MVC pattern usage).

--
    Frédéric

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

MartinWittemann
Administrator
Hey,
Hi!

As I'm plannning to write a client application, in order to drive my KNX¹
installation, I was searching for a high-level javascript framework, and
found qooxdoo, which fits all my needs:

- great OO implementation
- python/java-like dev. approach
- lots and nice widgets
- very good documentation

Congratulation to the dev. team, this is great work!
Thanks. :)

A few years ago, I also wrote a small javascript application for a photo
club, which allows our members to upload, then select/vote for the best
photos; we still use this application each time we want to make a
selection, for national contests. Js part of the code is here:

   http://www.gbiloba.org/download/vote/

This small app. is very basic, and lacks some admin features (I often have
to use phpmyadmin to modify datas!). It was written using 'prototype'
framework, which only provides basic OO pattern. When I see qooxdoo, I
think I could reduce the code size by a order of magnitude!

So, as an exercice, I want to migrate this app.
Sounds like a good idea!

My question is: how should I organise my code, in order to have robust
design? I want to use MVC pattern, and split things. In my codes (I also
wrote a panoramic control software, using PyQt²), for each screen/window, I
write a model, a view and a controller. The controller handles all the
logic between the model and the view (signal handlings, data
modifications and so).
qooxdoo does not force the developer to use any kind of MV* patter in their applications. So basically you can do whatever you like using the standard pattern based on OO principles. The tooling will take care of the dependencies between the classes!

How to do that with qooxdoo? I read the documentation, and
examples/tutorials, but I don't have yet an overall view of all
tools/features. For example, I don't see yet how to integrate provided
controllers and models with mines…

Do you have some example code of a more complete application than the
tutorial 'tweets' one, showing a robust structure (what dirs/files to
use...)?
Sure, just check out the feed reader demo app [1] which also uses data binding. This is a powerful feature which helps to keep the views up to date!

Regards,
Martin


------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Frédéric
In reply to this post by Frédéric
Le 10/12/2014, Frédéric a écrit :

> How to do that with qooxdoo? I read the documentation, and
> examples/tutorials, but I don't have yet an overall view of all
> tools/features. For example, I don't see yet how to integrate provided
> controllers and models with mines...

To be more specific, I'm a little lost with the data binding concept.

I understand it, and it seems powerfull, but as there are some automatic
things (like model creation for a view), I don't see how to integrate/use
it in my own code structure...

As real example, I would like to load json datas (from disk), and display
it in a table (with multiple columns).

The idea is to have a window containing the table, a toolbar with
buttons, and a few other things. Then, when I double-click on a table row,
I would like to open another window in order to edit the datas, save then
and go back to the table window.

How would you structure such code, splitting all parts so they can be
re-used easily from any other part of the code?

--
    Frédéric

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Frédéric
In reply to this post by MartinWittemann
Le 10/12/2014, Martin a écrit :

> Sure, just check out the feed reader demo app [1] which also uses data
> binding. This is a powerful feature which helps to keep the views up to
> date!

Thanks! That's a very good starting point...

--
    Frédéric

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Tom Saddul
In reply to this post by Frédéric
Hello!  I'm a newcomer like you (barely a month) with Qooxdoo but I can say at this moment that I have already advanced to a point now that I'm already developing the next version of our software using Qooxdoo.  

You can check my application here (now in Alpha version):  http://www.digisoftph.com/sias/test/

To login as Admin, the login ID is ADMIN, the password is 208181  (Please do not reset)

To login as Student, the login ID is 03-10717 and password is 222 (Or you can activate a student account at Transactions - Activate Account)

I developed my own "MVC" style framework utilizing Qooxdoo as the V part and the Model parts have to be present in both Server and Client side though I have created my own framework for dealing with database tables which I essentially removed the need for 1 Model  = 1 Table style which I think is very redundant.

Here are the technologies I have used so far:

Server Side:  Visual Studio 2013, ASP.NET Web API 2 and C#.NET 4.5
Browser Side:  Visual Studio 2013, Microsoft TypeScript language and https://github.com/jbaron/qx-typed

(Visual Studio 2013 now has a FREE Professional grade Community Edition)

The advantage of using Visual Studio 2013 and the TypeScript version of QooxDoo (https://github.com/jbaron/qx-typed) is that there is no need to use generate.py to compile your QooxDoo application.  You also get Intellisense while typing your source program.  TypeScript has also gone a long way of automatically compiling your source program to Javascript so you don't even have to compile every time - just save your changes then refresh the Firefox page right away and you will see the updated Javascript with all the debugging enabled.

Initially, I though programming in TypeScript is just like JavaScript but to my surprise, it is very similar to C#.NET language so almost like the learning is simply reversing the declaration of type to postfix style.  You can immediately use Generics and Lambda expressions right away. Moreover, all your Javascript programs can work with it right away.  I'm using other Javascript libraries without or minimal changes.

I will be sharing one of my developed pluggable "Dialog" library to the community soon and here is the initial code:

http://www.digisoftph.com/test/qxtype/dialog.ts

where all dialogs in the "SIAS Online" application is used.  For now, you can use it to see how to code in Qx-typed.

Regarding communication with Server side, you will have to utilize qx.io.request.Xhr where working with a server side ASP.NET Web API 2 is a breeze.  Debugging and testing can be done on same machine where two (2) Visual Studio instances are run the first is a Server side in debugging mode while the 2nd instance is for TypeScript's Qooxdoo application also in debugging mode.  (I hope I can make a template for doing this in the future and share it to the community too).  

If you go this path, you can ask questions here or in Qx-typed: https://github.com/jbaron/qx-typed

Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Frédéric
Le 10/12/2014, Tom a écrit :

> Hello!  I'm a newcomer like you (barely a month) with Qooxdoo but I can
> say at this moment that I have already advanced to a point now that I'm
> already developing the next version of our software using Qooxdoo.  
> [...]

Nice app! Thanks for sharing.

--
    Frédéric

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

TheDude
This post has NOT been accepted by the mailing list yet.
In reply to this post by Tom Saddul
Hi.

it took me around 14 seconds to load your app. The app.mini.js is 1.55 mb in size and took 13.22 seconds to download. Why is the JS so big? Is it qooxdoo or TypeScript?

Regards,
TheDude
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Tom Saddul
This post was updated on .
Yes. even the minified qooxdoo.js (from https://github.com/jbaron/qx-typed)  itself is already around 1.5MB.  This size should load in a few seconds however. In my 3G mobile broadband it loads in less than 3 seconds so probably it is your internet connection or location since the cloud server is in Japan.

Typescript produces almost the same size as its Javascript equivalent.
Reply | Threaded
Open this post in threaded view
|

Re: General code structure

Frédéric
In reply to this post by MartinWittemann
Le 10/12/2014, Martin a écrit :

> Le 10/12/2014, Frédéric a écrit :
>
> > My question is: how should I organise my code, in order to have robust
> > design? I want to use MVC pattern, and split things. In my codes (I
> > also wrote a panoramic control software, using PyQt²), for each
> > screen/window, I write a model, a view and a controller. The controller
> > handles all the logic between the model and the view (signal handlings,
> > data modifications and so).
>
> qooxdoo does not force the developer to use any kind of MV* patter in
> their applications. So basically you can do whatever you like using the
> standard pattern based on OO principles. The tooling will take care of
> the dependencies between the classes!

Digging arround, I discovered the pattern Model-View-ViewModel.

According to qooxdoo structure and tools, do you think this is an
appropriate pattern to use? Does anyone use it, here?

--
    Frédéric

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel