Merging Horde Groupware with jQuery Mobile
Transcript of Merging Horde Groupware with jQuery Mobile
![Page 1: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/1.jpg)
Merging Horde Groupwarewith jQuery Mobile
LinuxTag Berlin26.05.2012
Jan SchneiderHorde LLC
![Page 2: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/2.jpg)
I'm going to show
● How Horde evolved● How that helped us adding a jQuery Mobile
interface● What have been the key points for a success● Which problems we experienced● How we solved them
![Page 3: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/3.jpg)
A little bit of history
● Horde has a history of 14 years● 1998: IMP 1.0 – PHP 3 webmail client
![Page 4: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/4.jpg)
![Page 5: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/5.jpg)
A little bit of history
● 1999: Horde 1.0, IMP 2.0● PHP 3 application framework● First objects
![Page 6: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/6.jpg)
![Page 7: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/7.jpg)
A little bit of history
● 2002: Horde 2.0, IMP 3.0● PHP 4● First PHP OOP/MVC application framework● 20 libraries
![Page 8: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/8.jpg)
![Page 9: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/9.jpg)
A little bit of history
● 2004: Horde 3.0, IMP 4.0● 64 PHP libraries● PEAR involvement
![Page 10: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/10.jpg)
![Page 11: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/11.jpg)
A little bit of history
● 2008: Horde 3.2, IMP 4.2● New webmail interfaces: MIMP, DIMP
![Page 12: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/12.jpg)
![Page 13: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/13.jpg)
![Page 14: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/14.jpg)
![Page 15: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/15.jpg)
A little bit of history
● 2011: Horde 4, IMP 5● PHP 5● 91 libraries● PEAR distribution (modularization,
dependency management and injection)● Webmail interfaces „back home“● jQuery Mobile interfaces
![Page 16: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/16.jpg)
![Page 17: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/17.jpg)
A little bit of future
● 2012: Horde 5, IMP 6● Redesign of traditional and dynamic (AJAX)
interfaces
![Page 18: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/18.jpg)
![Page 19: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/19.jpg)
![Page 20: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/20.jpg)
Frameworks Timeline
1998 2000 2002 2004 2006 2008 2010 2012
IMP 1Horde 1Horde 2Horde 3Horde 3.2Horde 4DIMP CVSDIMP 1Smartphone UIPrototypejQueryjQuery Mobile
![Page 21: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/21.jpg)
How to create JQM applications
● HTML 5 page with CSS and JS from JQM● <div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<a href="#page2">Next page</a>
<a href="newpage.html">New page</a>
</div>
</div>
● External page loading via AJAX● URL hash updating
![Page 22: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/22.jpg)
We could have done that
● Single controller scripts for:– Application list
– Folder list
– Mailbox, message list
– Message
● Possible because of MVC (IMP, DIMP, MIMP)
![Page 23: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/23.jpg)
Advantages of traditional approach
● Browser degrading● Easier to implement (best case: exchanging
templates)
![Page 24: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/24.jpg)
Disadvantages of traditional approach
● Payload overhead (HTML fragments)● No client-side caching
– Going back == new request or:
– No server upates going back
● Already using AJAX in JQM
![Page 25: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/25.jpg)
How we created JQM application
● Skeletons of all pages in single document/request
● Horde 4:– Observe vclick event– Manual JQM page change$.mobile.changePage('#pageid');
– Manual AJAX request with callback$.ajax({...});
– Update skeletons with JSON response
![Page 26: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/26.jpg)
How we created JQM application
● Horde 5:– Real links: #message?view=SU5CT1g&uid=2115
– Observe pagebeforechange event$(document).bind('pagebeforechange', ImpMobile.toPage);
– Intercept page loadingtoPage: function(e, data){ var url = HordeMobile.parseUrl(data.toPage); switch (url.view) { case 'message': ImpMobile.toMessage(url, data.options); e.preventDefault(); break;}
![Page 27: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/27.jpg)
How we created JQM application
toMessage: function(url, options){ if (HordeMobile.currentPage('message')) { HordeMobile.updateHash(url); } else { options.dataUrl = url.parsed.href; $.mobile.changePage($('#message'), options); } $.mobile.showPageLoadingMsg(); HordeMobile.doAction( 'showMessage', {...}, ImpMobile.messageLoaded );}
![Page 28: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/28.jpg)
How we created JQM application
● Advantage: works with every page loading technique– Click– $.mobile.changePage()
– Deep links
![Page 29: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/29.jpg)
Reuse of existing AJAX API
● AJAX API existed for DIMP● API methods for anything needed
– Mailbox loading: viewPort(view, slice, requestid, sortby, sortdir)
– Message loading: showMessage(uid, view)
– Update polling: poll()
![Page 30: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/30.jpg)
Reuse of existing AJAX API
● API methods for anything needed– Message composition: getReplyData(format, imp_compose, type, uid)getForwardData()getRedirectData()getResumeData()
– Message building/sending: sendMessage(form)redirectMessage()saveDraft()addAttachment()
![Page 31: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/31.jpg)
Reuse of existing AJAX API
● API methods for anything needed– Message management:reportSpam()copyMessages()moveMessages()deleteMessages()
![Page 32: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/32.jpg)
Key items for success
● Modularity– Strict separation of views and logic
● Flexibility– Proved multi-view support
● APIs– JS application talking to PHP application via
AJAX/JSON
![Page 33: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/33.jpg)
Problems
● Conflicting frameworks– Existing JS/AJAX framework on Prototype
– New JS/AJAX/UI framework on jQuery Mobile
– $.hell
● No jQuery.noConflict()– Low resources on mobile devices
![Page 34: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/34.jpg)
● Workarounds– Port required JS code to jQuery
– Filter security token from AJAX response/*-secure-{"some":"json_object"}*/
● Merge Prototype with jQuery
Workarounds/Solutions
![Page 35: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/35.jpg)
Conclusion
● How Horde evolved– From monolithic app to very modular framework
● How that helped us adding a jQuery Mobile interface– Re-use of existing APIs and multi-view
architecture
● What have been the key points for a success– Modularity, flexibility, APIs
![Page 36: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/36.jpg)
Conclusion
● Which problems we experienced– JQM focused on „static“ page loading
– Conflicting frameworks
● How we solved them– Intercept „pagebeforechange“ event
– Minimal code duplication
![Page 37: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/37.jpg)
Questions?
![Page 38: Merging Horde Groupware with jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081622/613d2c33736caf36b75a2d3a/html5/thumbnails/38.jpg)
Thank you!
http://www.horde.org/http://demo.horde.org/