sencha plugins & tools
TRANSCRIPT
Stefan Stölzle
Sr. Solutions Engineer, Asia Pacific
@me_stoe
Sencha Plugins & Tools
Sencha IDE Plugins
Supports Ext JS 4+ & Touch 2+ (non-minified versions)
Supports commercial JetBrains IDEs (IntelliJ 14.1, WebStorm 10, etc...)
No additional dependencies
Works with custom classes and overrides in addition to framework
No update required when upgrading the framework
JetBrains IDE Plugin
Code Completion
Code Inspection
Refactoring
Template Creation
Code Navigation
Code Generation
Spellchecking
JetBrains IDE Plugin – Features
Configs
Methods
Properties
Class Mames
xtypes
Event Names
CSS Classes
Stores
Models
View Controllers
View Models
Layouts
View References
Controller Methods
JetBrains IDE Plugin – Code Completion
Manages requires/uses arrays
Flags references to unknown classes and aliases
Flags classes when names do not match directory structure or file names
Flags references to missing controller methods referenced in view components
Provides quick fixes for all of the above
JetBrains IDE Plugin – Code Inspection
Move file/class – automatically keeps namespace in sync with directory structure
Rename file/class – automatically keeps class name in sync with file name
JetBrains IDE Plugin – Refactoring
Classes
Views
View Models
View Controllers
Models
Controllers
Stores
JetBrains IDE Plugin – Template Creation
Demo
One more thing …
One more thing …
Fashion
Accelerates building Ext JS 6 applications and themes
Near real-time WYSIWYG theming
Eliminates Ruby dependency
Fashion
JavaScript-based theme compiler based on Sass and Compass
JavaScript API for writing custom functions
Compiles *.scss files and passes much of the “sass-spec”
Language extensions to enable tooling
Fashion
Compiler produces a JavaScript function
@mixin ($foo, $bar) {
@if $foo {
@debugger;
}
...
}
Fashion
Demo
Sencha Inspector
Debugging Sencha Apps
Inspect Component Tree
Inspect Data Stores
Inspect Layouts
Inspect Events
Inspect MVC
Sencha Inspector
Works on Sencha’s Object Model, not the Rendered DOM
Inspect Themeing
Modify SASS
Live in Browser
Sencha Inspector
Works on*
Sencha Inspector
* requires setup
Demo
Win a WebStorm Personal License
Q & A