1.
Einführung in Ext JS 4
conjoon
The Open Source Webmail Client
2014-04-11 Zarafa HQ, Delft, NL

2.
●
Thorsten Suckow-Homberg, Year 1976
●
PHP & Javascript since 1999
●
ExtJS since 2007
●
Author of the conjoon Open Source Project (conjoon.org)
●
Software Developer, Trainer, Speaker
@thorstensuckow

3.
What is this talk about
●
Introduction to conjoon
●
Some history
●
For the Developer:
●
Technology
●
Architecture
●
Challenges
●
For the User:
●
Features
●
Live Demo

4.
Historical Background
(or: Let there be POP)

5.
conjoon
●
Started around 2005 as „Intrabuild“, a Groupware (better: PIM)
written in PHP
●
The goal:
●
Develop a top notch websoftware that mimics a desktop
application
●
Huge degree of interaction
●
No page loads
●
Controls known from desktop applications
●
Fast response times
●
Easy to install and maintain
●
Integrate a webmail client that beats the functionality of the
webmail software used by my provider (thus POP)!

6.
conjoon
●
Shared a huge passion for OO and Design Patterns to this time
●
Lots of experimenting with:
●
Java API 2 PHP (cucua.tigris.org)
„Cucua is a oo class library for PHP5 with a strict and binding API. It's goal is to
provide a rock-solid, extendable programming interface which is loosely based
on the public Java API implemented by the GNU Classpath Project.“
●
Java Swing library 2 javascript cudgets.tigris.org→
„cudgets is a Javascript library that extends and simulates OOP behaviour
(interfaces, abstract classes) and provides a set of (AJAX driven) widgets which
are easy to set up[...]“
●
Early 2007: A rational thought process and the quality of the
implementation makes ExtJS the first choice JS framework for
ongoing projects

7.
conjoon – first draft

8.
conjoon – Ext.ux.Livegrid
●
First iterations very promising, but:
ExtJS lacks a very important component – a table view that does
not use paging, but instead „virtual“ scrolling
●
Leads to Ext.ux.Livegrid

9.
conjoon – Ext.ux.Livegrid
●
roughly 4 months spent of free time to get the component
running
●
lots of positive feedback from the ExtJS community
→ leads to „open source“ more components used in
conjoon
… late 2008: First Alpha release of conjoon! (0.1a2)

10.
META

11.
conjoon – The Meta
●
Software used in this project:
●
Atlassian SW Suite: Jira, Confluence, Fisheye
●
IDE: IntelliJ PHPStorm
→ all of this sponsored by an Open Source license (thank
you guys!)
●
Software versioning: SVN
●
Unit Tests: PHPUnit
●
Build Process: Phing

12.
conjoon – loc*
* All metrics based on 0.1.6EAP1, excluding vendor code

13.
conjoon – Unit Tests*
* All metrics based on 0.1.6EAP1, excluding vendor code

14.
The Backend

15.
conjoon – Backend
●
3rd
party libraries used:
●
Backed by ZF 1.12
●
Doctrine as ORM
●
HtmlPurifier for sanitizing external HTML
●
Backend and Vendor code configurable using global
configuration file
●
Application specific settings
●
Cache settings
●
LOB storage settings
etc...

16.
conjoon – Application Controller
●
Heavy use of ZF Application Controllers
●
Mapping urls to actions
●
Backend is context aware, i.e. delivers output in different
formats as requested (json/xml/html...)
●
Authentication Plugin guards every action and rewrites routes
if necessary
●
Ext.Direct and Zend Framework understand each other (talk at
sourcedevcon 2011 in Split, Croatia)
●
What's changing?
●
The past: Following ZF best practices
●
The future: Even thinner controllers, lots of
facades/services to keep the software pluggable and to
decouple functionality
→ plugin based architecture

17.
conjoon – browsing Local/Remote Mail storages
●
Server centric architecture
●
Backend uses its own Server/Protocol abstraction
●
Protocol Adaptees take care of talking to Local/Remote
Storages (local: POP; remote: IMAP/Exchange/younameit)

18.
conjoon – browsing Local/Remote Mail storages
read email!
groupware/email.item/get.email/format/json
Application Action
Set up strategies based on configuration
* Cache
* Decorators
* Security manager
* Formatter
* ...
→ Service
Server
Protocol Impl
„getMessage“
SecurityService FolderService
RepositoryImpl
Doctrine RemoteImpl
LocalStorage
SQL IMAP
RemoteServer

19.
The Frontend

20.
conjoon – Frontend
●
Built using ExtJS
●
Vendor: Soundmanager for playing System Sounds
●
Uses Components for the UI but strives away from ExtJS when
implementing logic
→ decoupling frontend framework from ExtJS
●
Focus on performance by re-using components as often as
possible (Tabbed Navigation, EmailEditor)
●
HTML5 features by utilizing Application Storage
→ Frontend designed to replace the client's desktop mail client
(e.g. Stateful, feature-wise)

21.
conjoon – Client Features
●
POP/IMAP support
●
Tabbed Navigation
●
Integrated Twitter Client
●
Feed Reader
●
Youtube Player
●
Account management via folders
●
Plain/Html Email Viewer, HTML Email composer
●
Send/Receive Email Attachments
●
Stateful UI
●
Utilizing HTML5 Application Cache for faster load times
●
Low memory footprint by reusing components boosts UI
performance

22.
conjoon – public interest
●
***.com offers ~ ******* € in early 2009 – project has more
potential in my eyes, decide against it
●
Ministry for ************************ shows interest, but
decides to use competitor (support and manpower
guaranteed!)
●
Frequent requests by hosting companies asking for
●
admin panel
●
integration in hosting environment (e.g. let the client
choose their preferred webmail client – Horde, Roundcube
and such)

23.
conjoon – Client Features
What follows is a live presentation. Fellow readers can get an
overview of the presented features here:
Feature and Functionality Overview:
●
http://conjoon.org/wiki
Demo (based on 0.1.5)
●
http://demo.conjoon.org

24.
Questions?

25.
http://conjoon.com
http://conjoon.org - project home (devs)
http://conjoon.org/issues - bugtracker
http://conjoon.org/wiki - documentation
http://conjoon.org/source – repository browser
https://www.ohloh.net/p/conjoon - some metrics provided by ohloh
Thank you!