Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS
description
Transcript of Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS
![Page 1: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/1.jpg)
Building Enterprise Apps withSencha & DeftJSryan canulla | @ryancanulla
![Page 2: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/2.jpg)
ryancanulla.com | @ryancanulla
Our Roadmap
Create workspace/apps
Configure deft and create login views
Add localization
Add viewController/businessService
Reorganize workspace & add unittesting
Add documentation
•••••
•
![Page 3: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/3.jpg)
ryancanulla.com | @ryancanulla
Sencha CMD
Cross-platform
Command line tool
Provides automated tasks around the fulllife-cycle of your applications
•••
![Page 4: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/4.jpg)
ryancanulla.com | @ryancanulla
Sencha CMD
Code generators
Application management
Web server
•••
![Page 5: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/5.jpg)
ryancanulla.com | @ryancanulla
$ sencha generate [command]
workspace
app
•
•
![Page 6: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/6.jpg)
ryancanulla.com | @ryancanulla
Workspace Overview
.sencha/ # Sencha-specific files workspace/ # Workspace-specific content sencha.cfg # Workspace config file plugin.xml # Workspace-level pluginpackages/ # Sencha Cmd packagesbuild/ # Where build output is placedweb/ # Applicationmobile/ # Application
![Page 7: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/7.jpg)
ryancanulla.com | @ryancanulla
App Overview
.sencha/ # Sencha-specific files app/ # App-specific content sencha.cfg # App config file build-impl.xml # Standard app build script plugin.xml # App-level pluginindex.html # Entry point to your appapp.json # App configurationapp.js # Initialization logicapp/ # MVC structure
![Page 8: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/8.jpg)
ryancanulla.com | @ryancanulla
$ sencha app [command]
build - Executes the build process for an application
refresh - Updates the application metadata file
upgrade -Upgrade the application SDK
•
•
•
![Page 9: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/9.jpg)
ryancanulla.com | @ryancanulla
$ sencha web [options] [command]
--port, -p
start
stop
•
•
•
![Page 10: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/10.jpg)
ryancanulla.com | @ryancanulla
Create workspace/apps withSencha CMD
![Page 11: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/11.jpg)
ryancanulla.com | @ryancanulla
Integrating DeftJS
Add Deft to your app.json
"requires": [ "[email protected]" ]
Refresh & build your app
$ sencha app refresh$ sencha app build
•
•
![Page 12: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/12.jpg)
ryancanulla.com | @ryancanulla
DeftJS Features
IoC Container
MVC with ViewControllers
Promises and Deferreds
•••
![Page 13: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/13.jpg)
ryancanulla.com | @ryancanulla
IoC Container
Eager and lazy instantiation
Injects dependencies before the class constructor isexecuted
userService: ‘SampleApp.service.UserService’
inject[ ‘userService’ ]
••
••
![Page 14: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/14.jpg)
ryancanulla.com | @ryancanulla
MVC with ViewControllers
Class annotation-driven
Supports multiple view instances
Integrates with destruction lifecycle
Automatically cleans up listeners
Control a view and delegate work to injected business service (service classes, Stores, etc.)
•••••
![Page 15: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/15.jpg)
ryancanulla.com | @ryancanulla
Promises and Deferreds
Provides an elegant way to deal with async calls
Register success, failure, cancellation orprogress callbacks
Allows chaining
Implements the CommonJS Promises/Aspecification
••
••
![Page 16: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/16.jpg)
ryancanulla.com | @ryancanulla
Configure DeftJS IOC Containerand create a login view
https://github.com/ryancanulla/sencha-deft-sample/tree/step-one
![Page 17: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/17.jpg)
ryancanulla.com | @ryancanulla
Add localization
https://github.com/ryancanulla/sencha-deft-sample/tree/step-two
![Page 18: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/18.jpg)
ryancanulla.com | @ryancanulla
Architecture Overview
![Page 19: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/19.jpg)
ryancanulla.com | @ryancanulla
Modular Directory Structure
Organized by functionality
Essential for large applications
module.js
Configure IOC container Define events Define constants
•••
---
![Page 20: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/20.jpg)
ryancanulla.com | @ryancanulla
View Controllers
Configure view data
Listen for events
View: user interaction
Services, stores, models (data changes)
••
--
![Page 21: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/21.jpg)
ryancanulla.com | @ryancanulla
Business Services
Business specific logic
Build the data to power your view
Available for injection
Fire events
••••
![Page 22: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/22.jpg)
ryancanulla.com | @ryancanulla
Custom Proxy
![Page 23: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/23.jpg)
ryancanulla.com | @ryancanulla
Add viewController/businessService
https://github.com/ryancanulla/sencha-deft-sample/tree/step-three
![Page 24: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/24.jpg)
ryancanulla.com | @ryancanulla
Unit Testing
![Page 25: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/25.jpg)
ryancanulla.com | @ryancanulla
Unit Testing
Jasmine
Karma Runner
••
![Page 26: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/26.jpg)
ryancanulla.com | @ryancanulla
Reorganize workspace & add unittesting
https://github.com/ryancanulla/sencha-deft-sample/tree/step-four
![Page 27: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/27.jpg)
ryancanulla.com | @ryancanulla
JSDuck Documentation
$ [sudo] gem install jsduck$ jsduck --config jsduck-conf.json
![Page 28: Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS](https://reader033.fdocuments.net/reader033/viewer/2022042502/554f91f3b4c905d25b8b524a/html5/thumbnails/28.jpg)
ryancanulla.com | @ryancanulla
Add documentation
https://github.com/ryancanulla/sencha-deft-sample/tree/step-five