An introduction to ExtJS 5 for the Zarafa community. This talk was part of the zarafatour 2014.

1. ExtJS 5
Future Opportunities
for
Zarafa WebApp
with ExtJS 5

2. ExtJS 5
● Thorsten Suckow-Homberg, Year 1976
PHP & Javascript since 1999
Sencha since 2007
Author of conjoon (http://conjoon.org), Ext.ux.Livegrid
(ExtJS 3)
@thorstensuckow

3. ExtJS 5
What is this talk about?
● ExtJS 5 – Javascript Framework for creating web-based
Applications
● What's new in ExtJS5
● How can Zarafa WebApp benefit from its
features
● Getting started with ExtJS 5

4. ExtJS 5
ExtJS 5
What can ExtJS5 do for you?

5. ExtJS 5
What is ExtJS 5?
● Javascript library providing
robust user interface library
→ more than 150 user interface components
powerful application development platform
leveraging HTML5 features
source: http://sencha.com

6. ExtJS 5

7. ExtJS 5
ExtJS 5 - Features
● class based architecture
● declarative component
configurations
● rich data package
● MVC, VC, MVVM support
● over 1000 documented APIs
● large collection of themes
● tablet compatible

8. ExtJS 5
Separation of Concerns in ExtJS 5
source: http://sencha.com
ViewControllers
ViewModels
… combined
● MVC already introduced in
ExtJS4 (application based
controllers)
● Great demand to provide SoC
principles out of the box

9. ExtJS 5
Tablet Support in ExtJS 5
● different devices → different
frameworks: ExtJS vs Sencha
Touch
● they are sharing the same
core library
→ no compatibility when it
comes to user interfaces and
architecture
ExtJS 5:
● Shares code across
frameworks (e.g. data
package)
● Does also run on tablets (with
no or minor adjustments)
● Event Normalization
→ Revamped Event Implementation
source: http://sencha.com

10. ExtJS 5
Zarafa WebApp
Declarative apporach
simplifies configuration of
WebApp
provide configuration in
declarative json structure
load meta-information
from server and use
factories for a generic
approach
{
meta : {
search : {
base : 'com.zarafa.ext.Search',
enabled : true,
singleton : true,
target : '#mainTab',
overrides : {
form : {
fields : {
searchphrase : {
xtype : 'textfield',
allowBlank : false,
fieldLabel : WebApp.I18n.Search
}
},
controls : {
startSearch : {
xtype : 'button',
text : WebApp.I18n.StartSearch
}
}
}}}}}

11. Zarafa WebApp MVVM, VC makes it easy to
share already existing
components among plugins
observe components by
registering plugins to
existing ViewControllers
ExtJS 5
streamlined API
bind extensions to existing
models by utilizing data
binding
sharing data
information and
formulas reduces cost
of maintenance
ViewController
Plugin 1
Plugin n
Component
...
broadcasts to
controls
Default Impl
ViewModel Extension A
Extension B
provides data formulas

12. ExtJS 5
Zarafa WebApp
● New Plain LAF Themes for
ExtJS5, optimized for Tablets
feel right at home on
Desktop and Tablet
production time
reduced – write once, run
everywhere
● SASS- and Compass-supported
Themebuilder
adjust WebApp to the
CI-needs of a client's
company
source: http://sencha.com

13. ExtJS 5
Challenges for a Developer
● Rather steep learning curve
● strong knowledge of
Vanilla JS
application architecture and patterns needed
● version FUDs made it hard to keep track of API
changes in the past
● It's an Application Framework, not just a
collection of UI controls
→ A good API documentation is the key to
success!