Einführung in Ext JS 4

conjoon

The Open Source Webmail Client

2014-04-11 Zarafa HQ, Delft, NL

● 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

What is this talk about

● Introduction to conjoon

● Some history

● For the Developer:● Technology● Architecture● Challenges

● For the User:● Features● Live Demo

Historical Background(or: Let there be POP)

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)!

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

conjoon – first draft

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

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)

META

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

conjoon – loc*

* All metrics based on 0.1.6EAP1, excluding vendor code

conjoon – Unit Tests*

* All metrics based on 0.1.6EAP1, excluding vendor code

The Backend

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...

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

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)

conjoon – browsing Local/Remote Mail storages

read email!

groupware/email.item/get.email/format/json

Application ActionSet up strategies based on configuration* Cache* Decorators* Security manager* Formatter* ...

→ Service

Server

Protocol Impl

„getMessage“

SecurityService FolderService

RepositoryImpl

Doctrine RemoteImpl

LocalStorage

SQL IMAP

RemoteServer

The Frontend

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)

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

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)

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

Questions?

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!