Introduction to ExtJs 5

ExtJS 5

Future Opportunities for

Zarafa WebApp with ExtJS 5

ExtJS 5

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

@thorstensuckow

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

ExtJS 5

ExtJS 5

What can ExtJS5 do for you?

ExtJS 5

What is ExtJS 5?

● Javascript library providingrobust user interface library→ more than 150 user interface componentspowerful application development platform leveraging HTML5 features

source: http://sencha.com

ExtJS 5

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

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

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

ExtJS 5

Zarafa WebApp

Declarative apporach simplifies configuration of WebApp

provide configuration in declarative json structureload 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 } }}}}}}

ExtJS 5

Zarafa WebAppMVVM, VC makes it easy to share already existing components among plugins

observe components by registering plugins to existing ViewControllers

streamlined APIbind 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

ViewModel Extension A

Default Impl

Extension B

provides data formulas

ExtJS 5

Zarafa WebApp

● New Plain LAF Themes for ExtJS5, optimized for Tablets

feel right at home on Desktop and Tabletproduction timereduced – write once, run everywhere

● SASS- and Compass-supported Themebuilder

adjust WebApp to the CI-needs of a client's company

source: http://sencha.com

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!