Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS

50 %
50 %
Information about Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS
Education

Published on November 18, 2013

Author: fitc_slideshare

Source: slideshare.net

Description

with Ryan Canulla
Presented live on Nov 7-8, 2013 in Boston at FITC's Web Unleashed 2013 conference.

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.

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

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

Sencha CMD • • • Cross-platform Command line tool Provides automated tasks around the full life-cycle of your applications ryancanulla.com | @ryancanulla

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 # Workspace-specific content # Workspace config file # Workspace-level plugin # Senchabuildpackagesis placed # Where Cmd output # Application # Application ryancanulla.com | @ryancanulla

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

$ 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

$ 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 refresh $ sencha app build ryancanulla.com | @ryancanulla

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 userService: ‘SampleApp.service.UserService’ inject[ ‘userService’ ] 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.) ryancanulla.com | @ryancanulla

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

Configure DeftJS IOC Container and create a login view https://github.com/ryancanulla/sencha-deft-sample/tree/step-one ryancanulla.com | @ryancanulla

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 IOC container Define events Define constants ryancanulla.com | @ryancanulla

View Controllers • • Configure view data - Listen for events View: user interaction Services, stores, models (data changes) ryancanulla.com | @ryancanulla

Business Services • • • • Business specific logic Build the data to power your view Available for injection Fire events ryancanulla.com | @ryancanulla

Custom Proxy ryancanulla.com | @ryancanulla

Add viewController/businessService https://github.com/ryancanulla/sencha-deft-sample/tree/step-three ryancanulla.com | @ryancanulla

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 | @ryancanulla

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

Add a comment

Related presentations

Related pages

Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS

1.Building Enterprise Apps with Sencha & DeftJS ryan canulla | @ryancanulla. 2. Our Roadmap• • • • • •Create workspace/apps Configure deft and ...
Read more

Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS ...

Learn how to build enterprise applications with Sencha & DeftJS. This session will discuss the build process, application architecture, as well as DeftJS ...
Read more

Building Enterprise Apps with Sencha ExtJS/Touch ... - FITC

Slideshare file. Overview. Learn how to build enterprise applications with Sencha & DeftJS. This session will discuss the build process and application ...
Read more

Ext JS - JavaScript framework for cross-platform web apps ...

Sencha Ext JS. Ext JS helps you ... Building Ext JS Apps with ECMAScript 2015 Using Sencha Visual Studio Code Plugin ... Introduction to Enterprise Mobile ...
Read more

Building Desktop & Mobile Apps with Sencha and Force.com

1.Building Desktop & Mobile Appswith Sencha and Force.comTed Patrick, Sencha Inc., ... Download Building Desktop & Mobile Apps with Sencha and Force.com.
Read more

Building HTML5 mobile apps with Sencha Touch - Documents

Download Building HTML5 mobile apps with Sencha Touch. Transcript. 1. Building HTML5 mobile appswith Sencha Touch10 min Talking@steffenhiller10 min Coding.
Read more

Consuming RESTful Services with Sencha Touch & Ext JS - FITC

Consuming RESTful Services with Sencha Touch & Ext JS ... Sencha creates development frameworks and ... Building Enterprise Apps with Sencha ExtJS/Touch ...
Read more

#CNX14 - Building Enterprise Mobile Apps With Salesforce1 ...

... Building Enterprise Mobile Apps With Salesforce1. Transcript. 1. Track: Developers#CNX14#CNX14Building Enterprise Mobile Apps withSalesforce1James ...
Read more