Tuesday, February 11, 2014

A new interface for Group-Office

First I will share something about the history of the Group-Office interface.

2003
When I first started with an interface for Group-Office back in 2003, life was easy. I just had to worry about the desktop. There were no smart phones and tablets yet! I built my own interface library in pure PHP 4.4 and these rendered HTML tables, treeviews etc. Javascript was not really evolved yet so all rendering was done with PHP. Every page was a separate PHP file that used various classes to render different widgets.

2007
Javascript evolved and it became possible to build very rich interfaces. I decided to make a complete rewrite of Group-Office using Sencha ExtJS 2! ExtJS is a very rich javascript library that has many widgets. The interface was now completely javascript driven and Group-Office had the most sophisticated web interface around. The whole interface was one PHP page that loaded the javascripts. All data is loaded with AJAX calls.

Today...
We still use ExtJS 3.4. This version is outdated but upgrading is a pain. Group-Office has become a big application and upgrading to ExtJS 4.x would in fact mean a complete rewrite of the interface. This is in my humble opinion a major drawback of ExtJS. They tend to completely change their API making it very backwards incompatible. The 2 to 3 upgrade was doable since we didn't even complete the ExtJS 2 version of Group-Office.

Another approach to take in consideration is responsive design. ExtJS is intended for the desktop and the desktop only. It doesn't work well on tablets and smart phones. Today tablets and smart phones can't be ruled out anymore. So if we want to keep up to date we have two options:

  1. Build a new Extjs 4 interface and a Sencha Touch application for tablets and smart phones
  2. Move away from Sencha and build a new responsive framework that works on the Desktop, Tablet and smartphone.

Option 1: Upgrade ExtJS and use Sencha Touch

Pro's:
  1. ExtJS is mature and has all the widgets we would ever need.
  2. The interface looks consistent throughout all modules.
Con's
  1. Upgrading to new major releases of ExtJS has proven to be difficult
  2. We need to maintain two applications. The desktop (ExtJS) and mobile version (Sencha Touch)
  3. The learning curve for ExtJS is steep. It's hard for new developers to start with Group-Office development.
  4. Theming is tough

Option 2: Build a completely new responsive interface framework

Pro's:
  1. One application for both desktop and mobile devices
  2. Flexibility, we can build it anyway we like. We can make it easy to theme.
  3. It will be fun to create your own framework and our developers will get more satisfaction with their own creations.
Con's
  1. We have to develop a lot of widgets that ExtJS already has.
  2. More testing to be done with cross browser support.
  3. More documentation to be written


Conclusion

I don't have a conclusion yet. I hope this article will bring some discussion here and in our company.

I will also start to experiment with alternatives to ExtJS and build a simple responsive interface.
Posted by at

18 comments:

  1. UnknownFebruary 11, 2014 at 4:29 PM

    I dont think new theming is tough. It is much easier with sass than change css rules. Perhaps ExtJS 5 or what it will be bring new theme which could be solution for tablets and smartphones. However the screen on smartphones is too small. Maybe in future they add profiles to ExtJS too so it will be much easier maintain one framework for all platforms. But who knows

    ReplyDelete
  2. Merijn ScheringFebruary 11, 2014 at 4:51 PM

    I don't think we can wait for extjs to be tablet ready.

    But perhaps we could start with a tablet interface along the extjs interface and see if it grows out to be a desktop replacement as well.

    ReplyDelete
    Replies
    1. UnknownFebruary 12, 2014 at 3:46 PM

      Next release will support tap events on ExtJS components. They add new theme but it isn't nothing else than bleach Neptune theme. Will see what they add to next release. Waiting for it with great expectations :) There will be only minor upgrade between 4.2 - 4.3/5.x or what number will have new release. So you can easily start with current version. I think neptune is simple enough for tablets but i didn't test it yet. I mostly use ST for mobile/tablet apps.

      You seen my ExtJS 4 GO version so you could get own opinion. Neptune theme is bigger than current Group-Office theme you created in last year. I like it however many ppl run GO on small screens and this theme take up a lot space and displays less information.

      Delete
  3. AnonymousFebruary 12, 2014 at 2:58 PM

    I want to get another thought into the game. GO is a business application. Therefore, one must also use appropriate hardware and not a toy. On my tablet (an already older Kupa X11 with Windows 8) GO runs flawlessly and without any restriction. Of course I use a high-resolution pen to work with.

    I would not imagine having to use the entire range of GO's functions on a small tablet with 10 inch (or smaller!) and sausage fingers suitable optics. How many windows are open before I come to a conclusion? How quickly will I lose track?

    Using the example of my hardware I wanted to show that GO can already used on a tablet, without limitation. Of course, with a pen — but would you edit an important spreadsheet with thick fingers? Seriously?

    A friend has access to my GO and uses an acer android on the way. This is not functionally, but this hardware is a toy, not for business.

    Well, I can imagine Apps for individual functions. You have already started with an app only for tickets and time recording. That's okay for the beginning. For cooperation with GO I can recommend Moxier Mail (I use it with an Android Smartphone). It works great with GO.

    Kind Regards, Carlos

    ReplyDelete
    Replies
    1. UnknownJanuary 29, 2017 at 2:01 PM

      Just my 2 cents, when I use GO on my phone it is just to look something up or to check a reminder. The real work is done on a laptop.
      For me if I could just navigate and read, that would be enough.

      PS, I vote for solution #2

      Delete
  4. AnonymousFebruary 17, 2014 at 9:34 AM

    Well, during the time working with GO, couple of times I faced some difficulties with UI customization, because almost everything is hardcoded, so as for me - it would be great, if you choose Option 2.
    Moreover, I think it will "open" GO for a many developers, f.x. if you choose some PHP + Apache base.

    According to Carlos's "toys" and "business", come on, you want to say, that everyone in the company has to be provided with top-newest gadgets, especially in-field-employees? I don't want to offend Merijn, but as for now, GO can't influence on a choise of hardware, on contrary - it has to work nice and smooth on the majority of devices.

    Best regards, Max.

    ReplyDelete
  5. RolandFebruary 17, 2014 at 10:53 PM

    Our co-operative members are happy with the new GO 5.0 interface on the desktop. Adapting some colors according to Corporate Design guidelines was easy.

    On the mobile phone our power users sync mails with IMAP (and recommend K9-mail) and sync calendars addresses with native apps on the smartphone. Access to files is done using Owncloud, now we can see even shared folders.

    Some less frequent users (who are not syncing) would like to have a responsive interface for their tablet or smartphone e.g. for checking mails, time tracking or tickets.

    Probably option 2 makes GroupOffice more independent and future proof. The community of active developers could grow faster.

    ReplyDelete
  6. Merijn ScheringFebruary 18, 2014 at 10:17 AM

    Thank you for all of your input! The opinions are very divided and I have to do more research on this topic. Therefore I've started an experimental Group-Office view based on bootstrap and jQuery. Just to get more experience with the responsive technology.
    I will post a new blog about that soon!

    ReplyDelete
  7. deependhullaFebruary 21, 2014 at 7:35 PM

    Hi Merijn,
    I have being observing your project more closely ..and have noted that by using Extjs you have got really improved interface.& More power & motivation to you & your team, I would suggest , that you work for mobile interface with Sencha touch or any other , but let the desktop explore continues with Extjs. My heavy recommended would be how to support offline features. ..as today Tablets & even the mobile are of High resolution with zoom. so Go Opens if need on go, but with Offline support it would turn to great apps on Tablet and phablet .
    Do let me know your view.

    ReplyDelete
  8. Neo256February 24, 2014 at 11:51 AM

    The company I work at also has been confronted by the same problem. ExtJs is a powerful framework, but where the promise 'a seamless integration with newer versions' they really dropped the ball.
    We have also attempted to continue development with a newer version of Ext, but in general everything needs to be rewritten. We have invested so much time in adding anything we needed to the framework that a change like that is not really feasable as so much needs to be rewritten.

    Moving away from Sencha (either ExtJs or Touch) is an option, but asks for a lot of commitment and will be a very large investment. As you mentioned all compatibility issues, bugs and other issues will arise. We choose ExtJs for a reason, to not be confronted by such problems constantly. And we stay by our decision, ExtJs really is a very good framework and fixes a lot of issues.

    For tablets however, I do not know if just integrating different events and maybe redesign interfaces for them would help enough to make your platform usable on a tablet. I have underestimated how popular they are, but still I can't imagin someone really running an office from his/her tablet.

    Looking up someones address or check out a report maybe check the mail and reply to someone sounds like a feasible use case.
    But really entering lots of data, working through contacts, writing lengthy reports... I feel the tablet should extend on the desktop experience. In my opinion a keyboard can not be replaced by a on-screen counter part as soon as you start writing more then 3 sentences.

    But that is just my opinion.

    ReplyDelete
  9. GünterFebruary 25, 2014 at 7:36 PM

    I think Option 1 could be the better way. Of course in the future it may be that extjs changes the version - and you have to change a lot - but other technologies could have the same problem.
    For smartphones and tablets it would be better to have a different theme.
    But I wonder, is there a mobile version available in the moment? I haven't seen this.

    ReplyDelete
  10. Merijn ScheringFebruary 26, 2014 at 8:52 AM

    There's an app in the play store. But it's still very limited. Only for tickets and time registration.

    ReplyDelete
  11. AnonymousMarch 27, 2014 at 1:15 PM

    Hi Merijn,
    first of all I'm not a developer, but I have been investigating php/js projects for another project I'm working around.

    It should be interesting to looks for solutions such as GluJS (http://glujs.com/), it's open source and available in GitHub. It consists in a specification to works with both ExtJs and Touch... I think that there are other similar projects, but I can't find it in my bookmarks at the moment (I'll give you later).

    Another way to works with the problem should be adapt GO to CRUD solutions such as https://github.com/tonysm/ExtjsCrud (PHP, ExtJS4) or http://www.grocerycrud.com/ (PHP, JQuery)...

    If interested I'll give you all my references.
    Hope will help.

    Regards, Marco (baux)

    P.S. Is there any GO forum where follow this discussion?

    ReplyDelete
  12. AnonymousApril 8, 2014 at 12:56 PM

    Delegated Events and Gestures in Ext JS 5
    **************************************************
    ExtJS 5 will have support for touch input; see the link

    http://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5?mkt_tok=3RkMMJWWfF9wsRoluqjBZKXonjHpfsX56%2BkvWqe0g4kz2EFye%2BLIHETpodcMTcBgMq%2BTFAwTG5toziV8R7PCKM1338YQWhPj

    ...so solutions such as GluJS should be unnecessary...

    Regards,
    baux

    ReplyDelete
  13. Merijn ScheringApril 8, 2014 at 1:17 PM

    Yes, thanks. ExtJS 5.0 looks promising!

    ReplyDelete
  14. AnonymousApril 8, 2014 at 2:09 PM

    a few more links:

    http://www.sencha.com/blog/announcing-public-beta-of-ext-js-5/
    http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html
    http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/apidocs
    http://cdn.sencha.com/ext/beta/ext-5.0.0.736.zip
    http://dev.sencha.com/ext/5.0.0/examples/index.html

    baux

    ReplyDelete
  15. AnonymousJune 17, 2015 at 2:25 PM

    Hi guys,are the any prospects for the responsive design in near future?

    ReplyDelete
  16. MerijnJune 18, 2015 at 8:29 AM

    Yes, we're currently working on a completely new responsive version from scratch!

    ReplyDelete

Subscribe to: Post Comments (Atom)