Building Enterprise Apps with
Sencha & DeftJS
ryan canulla | @ryancanulla
Our Roadmap

•
•
•
•
•
•

Create workspace/apps
Configure deft and create login views
Add localization
Add viewController/b...
Sencha CMD

•
•
•

Cross-platform
Command line tool
Provides automated tasks around the full
life-cycle of your applicatio...
Sencha CMD

•
•
•

Code generators
Application management
Web server

ryancanulla.com | @ryancanulla
$ sencha generate [command]

•

workspace

•

app

ryancanulla.com | @ryancanulla
Workspace Overview

.sencha/
workspace/
sencha.cfg
plugin.xml
packages/
build/
web/
mobile/

# Sencha-specific files
# Wor...
App Overview

.sencha/
app/
sencha.cfg
build-impl.xml
plugin.xml
index.html
app.json
app.js
app/

# Sencha-specific files
...
$ sencha app [command]

•

build

•

refresh

•

upgrade

- Executes the build process for an application
- Updates the ap...
$ sencha web [options] [command]

•

--port, -p

•

start

•

stop

ryancanulla.com | @ryancanulla
Create workspace/apps with
Sencha CMD

ryancanulla.com | @ryancanulla
Integrating DeftJS

•

Add Deft to your app.json
"requires": [ "deft@0.9.0" ]

•

Refresh & build your app
$ sencha app re...
DeftJS Features

•
•
•

IoC Container
MVC with ViewControllers
Promises and Deferreds

ryancanulla.com | @ryancanulla
IoC Container

•
•
•
•

Eager and lazy instantiation
Injects dependencies before the class constructor is
executed
userSer...
MVC with ViewControllers

•
•
•
•
•

Class annotation-driven
Supports multiple view instances
Integrates with destruction ...
Promises and Deferreds

•
•
•
•

Provides an elegant way to deal with async calls
Register success, failure, cancellation ...
Configure DeftJS IOC Container
and create a login view

https://github.com/ryancanulla/sencha-deft-sample/tree/step-one

ry...
Add localization

https://github.com/ryancanulla/sencha-deft-sample/tree/step-two

ryancanulla.com | @ryancanulla
Architecture Overview

ryancanulla.com | @ryancanulla
Modular Directory Structure

•
•
•

Organized by functionality
Essential for large applications

-

module.js

Configure IO...
View Controllers

•
•

Configure view data

-

Listen for events

View: user interaction
Services, stores, models

(data ch...
Business Services

•
•
•
•

Business specific logic
Build the data to power your view
Available for injection
Fire events
r...
Custom Proxy

ryancanulla.com | @ryancanulla
Add viewController/businessService

https://github.com/ryancanulla/sencha-deft-sample/tree/step-three

ryancanulla.com | @...
Unit Testing

ryancanulla.com | @ryancanulla
Unit Testing

•
•

Jasmine
Karma Runner

ryancanulla.com | @ryancanulla
Reorganize workspace & add unit
testing

https://github.com/ryancanulla/sencha-deft-sample/tree/step-four

ryancanulla.com...
JSDuck Documentation

$ [sudo] gem install jsduck
$ jsduck --config jsduck-conf.json

ryancanulla.com | @ryancanulla
Add documentation

https://github.com/ryancanulla/sencha-deft-sample/tree/step-five

ryancanulla.com | @ryancanulla
Upcoming SlideShare
Loading in …5
×

Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS

1,963 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

Learn how to build enterprise applications with Sencha & DeftJS. This session will discuss the build process and application architecture, as well as DeftJS integration — leave with all of the tools needed to begin writing scalable, maintainable and testable Sencha applications.

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,963
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS

  1. 1. Building Enterprise Apps with Sencha & DeftJS ryan canulla | @ryancanulla
  2. 2. Our Roadmap • • • • • • Create workspace/apps Configure deft and create login views Add localization Add viewController/businessService Reorganize workspace & add unit testing ryancanulla.com | @ryancanulla Add documentation
  3. 3. Sencha CMD • • • Cross-platform Command line tool Provides automated tasks around the full life-cycle of your applications ryancanulla.com | @ryancanulla
  4. 4. Sencha CMD • • • Code generators Application management Web server ryancanulla.com | @ryancanulla
  5. 5. $ sencha generate [command] • workspace • app ryancanulla.com | @ryancanulla
  6. 6. Workspace Overview .sencha/ workspace/ sencha.cfg plugin.xml packages/ build/ web/ mobile/ # Sencha-specific files # Workspace-specific content # Workspace config file # Workspace-level plugin # Senchabuildpackagesis placed # Where Cmd output # Application # Application ryancanulla.com | @ryancanulla
  7. 7. App Overview .sencha/ app/ sencha.cfg build-impl.xml plugin.xml index.html app.json app.js app/ # Sencha-specific files # App-specific content # App config file # Standard app build script # App-level plugin # Entry point to your app # App configuration # Initialization logic # MVC structure ryancanulla.com | @ryancanulla
  8. 8. $ sencha app [command] • build • refresh • upgrade - Executes the build process for an application - Updates the application metadata file -Upgrade the application SDK ryancanulla.com | @ryancanulla
  9. 9. $ sencha web [options] [command] • --port, -p • start • stop ryancanulla.com | @ryancanulla
  10. 10. Create workspace/apps with Sencha CMD ryancanulla.com | @ryancanulla
  11. 11. Integrating DeftJS • Add Deft to your app.json "requires": [ "deft@0.9.0" ] • Refresh & build your app $ sencha app refresh $ sencha app build ryancanulla.com | @ryancanulla
  12. 12. DeftJS Features • • • IoC Container MVC with ViewControllers Promises and Deferreds ryancanulla.com | @ryancanulla
  13. 13. IoC Container • • • • Eager and lazy instantiation Injects dependencies before the class constructor is executed userService: ‘SampleApp.service.UserService’ inject[ ‘userService’ ] ryancanulla.com | @ryancanulla
  14. 14. 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.) ryancanulla.com | @ryancanulla
  15. 15. Promises and Deferreds • • • • Provides an elegant way to deal with async calls Register success, failure, cancellation or progress callbacks Allows chaining Implements the CommonJS Promises/A specification ryancanulla.com | @ryancanulla
  16. 16. Configure DeftJS IOC Container and create a login view https://github.com/ryancanulla/sencha-deft-sample/tree/step-one ryancanulla.com | @ryancanulla
  17. 17. Add localization https://github.com/ryancanulla/sencha-deft-sample/tree/step-two ryancanulla.com | @ryancanulla
  18. 18. Architecture Overview ryancanulla.com | @ryancanulla
  19. 19. Modular Directory Structure • • • Organized by functionality Essential for large applications - module.js Configure IOC container Define events Define constants ryancanulla.com | @ryancanulla
  20. 20. View Controllers • • Configure view data - Listen for events View: user interaction Services, stores, models (data changes) ryancanulla.com | @ryancanulla
  21. 21. Business Services • • • • Business specific logic Build the data to power your view Available for injection Fire events ryancanulla.com | @ryancanulla
  22. 22. Custom Proxy ryancanulla.com | @ryancanulla
  23. 23. Add viewController/businessService https://github.com/ryancanulla/sencha-deft-sample/tree/step-three ryancanulla.com | @ryancanulla
  24. 24. Unit Testing ryancanulla.com | @ryancanulla
  25. 25. Unit Testing • • Jasmine Karma Runner ryancanulla.com | @ryancanulla
  26. 26. Reorganize workspace & add unit testing https://github.com/ryancanulla/sencha-deft-sample/tree/step-four ryancanulla.com | @ryancanulla
  27. 27. JSDuck Documentation $ [sudo] gem install jsduck $ jsduck --config jsduck-conf.json ryancanulla.com | @ryancanulla
  28. 28. Add documentation https://github.com/ryancanulla/sencha-deft-sample/tree/step-five ryancanulla.com | @ryancanulla

×