Upload
thorsten-suckow-homberg
View
363
Download
6
Tags:
Embed Size (px)
DESCRIPTION
An introduction to ExtJS 5 for the Zarafa community. This talk was part of the zarafatour 2014.
Citation preview
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!