Tweet
Tweet

Slide 1

Slide 1 text

ExtJS 5 javascript UI framework

Slide 2

Slide 2 text

What is ExtJS ? - Full featured client* Javascript framework - Become Industry standard - 60% of Fortune 100 uses it - Supports ALL browsers ?

Slide 3

Slide 3 text

History of ExtJS

Slide 4

Slide 4 text

Core concepts Core concepts

Slide 5

Slide 5 text

Accessibility AIRA ( http://www.w3.org/WAI/intro/aria ) Section 508 ( http://www.section508.gov/ )

Slide 6

Slide 6 text

Class system Dot notation (“.”) MyApp.util.Base64 MyApp.util.Base64 => /MyApp/util/Base64.js

Slide 7

Slide 7 text

Components

Slide 8

Slide 8 text

Data package

Slide 9

Slide 9 text

Data package: Examples Associations: https://gist.github.com/noroot/7764926571bd466fc400 Validation: https://gist.github.com/noroot/212d8b8251bcdac0d27b

Slide 10

Slide 10 text

Drag and Drop

Slide 11

Slide 11 text

Events Event Normalization for touch devices

Slide 12

Slide 12 text

Layouts and containers

Slide 13

Slide 13 text

Localization Json storage for strings Supports RTL (Right to left languages)

Slide 14

Slide 14 text

Memory management Memory leaks

Slide 15

Slide 15 text

Theming

Slide 16

Slide 16 text

Drawing library

Slide 17

Slide 17 text

Application structure MVVM (M+VC) based application Sencha CMD (console based framework management tool) sencha generate app -ext MyApp ./app cd app sencha app watch

Slide 18

Slide 18 text

Application structure ViewControllers Models Storages (or Stores) Routes

Slide 19

Slide 19 text

ViewController

Slide 20

Slide 20 text

ViewModel ViewModel example: https://gist.github.com/noroot/f094258eaa80e26a5ae3

Slide 21

Slide 21 text

Routes

Slide 22

Slide 22 text

Store AJAX REST LocalStorage JSON

Slide 23

Slide 23 text

Store JSON example

Slide 24

Slide 24 text

Application development order 1) Describe Layout and components 2) Define Models structure 3) Define Storages for models 4) Define Models bindings for models structure 5) Define behaviors for components and models

Slide 25

Slide 25 text

MVVM MVVM - Model-View-ViewModel

Slide 26

Slide 26 text

Examples Dashboard http://dev.sencha.com/ext/5.0.1/examples/index.html REST Grid: http://dev.sencha.com/ext/5.0.1/examples/restful/restful.html Organizer: http://dev.sencha.com/ext/5.0.1/examples/organizer/organizer.html Themes: http://dev.sencha.com/ext/5.0.1/examples/themes/index.html WebDesktop: http://dev.sencha.com/ext/5.0.1/examples/desktop/index.html Executive Dashboard: http://dev.sencha.com/ext/5.0.1/examples/executive- dashboard/index.html#!kpi/clicks Trees: http://dev.sencha.com/ext/5.0.1/examples/tree/locking-treegrid.html Soap: http://docs.sencha.com/extjs/5.0/enterprise/soap.html

Slide 27

Slide 27 text

Communities and collaboration Official site http://www.sencha.com/ Market: https://market.sencha.com/ Seek for answers: http://www.sencha.com/forum/index.php Lack of russian community

Slide 28

Slide 28 text

Credits Dmitriy Rodichev twitter: @noroot github.com/noroot Enterprise is fine, people are fucked.