Marco Broglia, ibuildings: Writing an extensible web application with ExtJs packages

Maintaining a complex web application through time could be difficult as making it from zero. So writing readable, scalable and maintainable code has become a primary need in business applications. With ExtJs 5 & 6 Sencha offers a strong package system, thought for implementing standalone code blocks, easy to adapt and reuse. We will go through the Sencha package system, talking about how to decoupling and standardize code in order to build a well formed and maintainable web application.

Transcript

1. your European technology advisor your European technology advis
2. Writing an extensible web application with ExtJs packages
3. About me Software Engineer Web Developer Sencha Specialist marco@ibuildings.it marcobroglia-87
4. • Writing business enterprise applications • Long development time • Very long application life-cycle • Many developers • Team could change many times during life-cycle • Use of the same technologies through other applications • Need of reusable code to speed up work Scenario
5. • Start writing code in the most common manner could became quickly dangerous • Application will be unmaintainable and absolutely not scalable • Refactoring could be a way to solve • But is to be take in time! Problem
6. • Code decoupling • Make a class for each important component • Split up code in class methods representing macro functionality • Make code human readable as much as possible Writing Extensible
7. • Reuse code • Group common functionality in abstract classes due to reduce maintenance errors Writing Extensible
8. • ExtJs project structure is designed for standard applications • Working on a larger application may result in the extension of this structure • Is important to differentiate the application core from components, utils and other classes that could be reused Extending Project Structure
9. Extending Project Structure
10. • This library structure is useful for application maintenance, but is not portable through applications • Classes are application binded! • Maintainance through different teams could be difficult • Making changes to the library need making change to the application itself and vice versa • We need to complete decoupling library from application! Extending Project Structure - Problems
11. • The solution is to transform app to a module of a bigger project • From now a project became a space where • Can live many applications • Are written many library modules • Every module could be thought as standalone • Only the necessary modules are put • Every module could be written and maintained by a different team • Every app could use library modules without any binding Moving code outside the app project
12. Sencha Workspaces Writing an extensible web application with ExtJs packages
13. • This idea translates into the Sencha workspace structure • A workspace could be generated and maintained with Sencha Cmd
 
 sencha -sdk /path/to/ext generate workspace . • Workspace structure is thought to help project modularity
 
 /workspace
 /.sencha
 /workspace
 /build
 /ext
 /touch
 /packages
 /library1
 /library2
 /app1
 /app2 Sencha Workspace
14. • The Sencha Package System allow to create application independent libraries • Standalone • With dedicated namespace • Requirable from application app.json • Maintainable through Sencha Cmd • Extensible (packages could requires other packages) Sencha Package System
15. • In ExtJs packages could be of two different types • Code: Represent a code library package, with javascript source classes, overrides and resources needed by these classes • Theme: Represent a theme that could be used in the "theme" property of app.son. • A theme package must extend an ExtJs theme or another custom theme • Is essentially a collection of Sass classes and resources, sometimes with javascript overrides needed by the theme • Using a package is also possible to extend the Sencha Architect toolbox with custom components Sencha Package System
16. • A Sencha package structure is essentially the same of a Sencha application, with the main difference that has no entry point
 
 /MyPackage
 /.sencha
 /package
 /build
 /build.xml
 /docs
 /examples
 /overrides
 /package.json
 /resources
 /sass
 /src
 /var
 /src Package Structure
17. • A code package can be generated through Sencha Cmd
 
 sencha generate package -type code MyPackage • Package are not automatically binded with a framework in the workspace • The first thing to do after creation is to manually edit the .sencha/ sencha.cfg file setting the correct framework
 
 package.framework = ext • Finally is possible to build package 
 
 sencha package build Code packages
18. • As the app.json in standard application, the package.json is the package descriptor • package.json is the file to edit when have to make some configuration on package
 
 {
 "name": "MyPackage",
 "type": "code",
 "creator": "Ibuildings",
 "summary": "Beta package",
 "detailedDescription": "This is a beta package",
 "version": "1.0.0",
 "compatVersion": "1.0.0",
 "format": 1,
 "output": "${package.dir}/build",
 "local": true,
 "requires": [
 "MyOtherPackage"
 ]
 } Code packages - package.json
19. • Packages are easy usable in all the workspace applications • To add a package in application simply require it in the app.son
 
 "requires": [
 "MyPackage"
 ] • In the next build package will be automatically added to application • The Loader will be automatically updated with the new namespace • Package classes are usable in the application just like other classes Code packages - Use in the application
20. • Package classes are usable simply requiring they somewhere in the application
 
 
 
 
 
 
 • After that are exactly the same of application classes
 
 
 • Finally is possible to extend package directly in the application or in other packages Code packages - Use cases
21. • A theme package can be generated through Sencha Cmd
 
 sencha generate theme MyTheme • A theme package must extends another one • Is possible to define inheritance from package.json 
 
 "extend": "ext-theme-crisp" • Finally is possible to build package 
 
 sencha package build • Anyway a theme is builded every time you build an application Theme packages
22. • A custom theme could be used in any workspace application just like a standard ExtJs theme • In app.json
 
 "theme": "MyTheme" • In a Sencha workspace is possible to define as many themes as you want • Every application must have only one theme at a time Theme packages - Use in the application
23. • View classes in a code package can be configured to appear in Architect toolbox • Creating an "architect" folder into the package structure make package to be ready for Architect • Each file that must appear in the toolbox must have a dedicated definition file into that folder • Finally each definition file must have a related entry in the package.json file Use packages in Architect
24. • This is an example structure of a package ready for Architect
 
 architect/
 Xx1.Definition.js
 Xx2.Definition.js
 build.xml 
 docs/
 licenses/ 
 overrides/ 
 package.json 
 resources/ 
 sass/ 
 etc/ 
 src/ 
 var/ 
 src/ 
 xxxx.js
 yyyy.js Architect package structure
25. Questions? Thank You
27. your European technology advisor indirizzo Via Santa Maria Valle 3, 20123 Milano Italia Gildeweg 39A 4383 NJ Vlissingen Nederland Goeman Borgesiuslaan 77 3515 ET Utrecht Nederland telefono +39 02 00681 028 email marketing@ibuildings.it support@ibuildings.it your European technology advisor