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
   

   View Slide

2. Writing an extensible web application
   with ExtJs packages
   

   View Slide

3. About me
   Software Engineer
   Web Developer
   Sencha Specialist
   marco@ibuildings.it
   marcobroglia-87
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. • Reuse code
   • Group common functionality in abstract classes due to reduce
   maintenance errors
   Writing Extensible
   

   View Slide

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
   

   View Slide

9. Extending Project Structure
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Sencha Workspaces
    Writing an extensible web application with ExtJs packages
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. Questions?
    Thank You
    

    View Slide

26. View Slide

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
    

    View Slide