Building Enterprise Ext JS Apps with Mavenized Sencha Cmd

Frank WienbergCoreMedia

This is Joe Fullstack.

2

Joe is a developer.

3

Joe works on the GUI of our software product...

4

...as well as on the back-end...

5

...and sometimes on both at the same time.

6

This is sufficiently complicated!

For example, after changing Ext JS code, Joe rebuildsthe app with Sencha Cmd.

7

> cd my-app> sencha app build --development

_

[INF] Processing Build Descriptor : [INF] Loading app json manifest...

[INF] Processing Build Descriptor :[INF] Starting server on port : 1841[INF] Mapping http://localhost:1841/[INF] Application available at http:[INF] Waiting for changes...

> sencha app watch

Whereas after changing server Java code, Joe usesApache Maven to build and run the Web-app.

8

> cd my-workspace> mvn clean install -DskipTests

_

[INFO] Scanning for projects... [INFO] Building My Project SNAPSHOT..

[INFO] Scanning for projects... [INFO] --- jetty-maven-plugin:9.3:run[INFO] Configuring Jetty for project:[INFO] Started ServerConnector:{8090}[INFO] Started Jetty Server

> mvn jetty:run -Dport=8090

Wouldn't it help to at leastuse the same build tool?

Jangaroo is CoreMedia'sOpen Source Brand forWeb Development Tools

Responsibilities — Who Does What

• Build execution (build life-cycle)• Dependency management /

versioning• Artifact management

(Sencha Cmd: "remote packages")• Integration with back-end (Java)• Releasing

Maven: Generalist

• JS / Sass compilation• Assembly of packages and apps• Instantiate package + app templates• Incremental build (sencha app watch)

Sencha Cmd: Specialist

11

Integration OptionsInvoking Sencha Cmd from Maven

• Call Sencha Cmd through maven-exec-plugin

• Call Sencha Cmd through maven-antrun-plugin

• Let a custom Maven plugin call Sencha Cmd

Overview

• Maven Project and Workspace Layout

• A Simple Sencha Maven Workspace

• Maven Lifecycle & Plugins

• Jangaroo Sencha Maven Plugin

• Maven Sencha Artifacts

• Java Web-App Integration

• Conclusion / Q & A

Short Primer:Maven Project andWorkspace Layout

Maven Project Layout

• Maven "project" similar to one Sencha package or app

• Top-level project descriptor pom.xml(like package.json and app.json)

• Clear separation of src and target• Third level: production versus test code

• Fourth level: language / technology

my-project │ ├─ pom.xml │ ├─ src │ │ │ ├─ main │ │ │ │ │ ├─ java │ │ │ │ │ └─ resources │ │ │ └─ test │ │ │ ├─ java │ │ │ └─ resources │ └─ target │ └─ classes

Maven Workspace Layout

• Aggregator projects contain sub-folders with sub-projects (modules)

• A set of projects built together is collected in the reactor

• All projects within one workspace usually have the same groupId and version, but a unique artifactId.

my-workspace │ ├─ pom.xml │ ├─ my-module-1 │ │ │ ├─ pom.xml │ │ │ └─ ... │ └─ my-aggregator-1 │ ├─ pom.xml │ ├─ my-module-2 │ │ │ ├─ pom.xml │ │ │ └─ ... │ └─ my-module-3 │ ├─ pom.xml │ └─ ...

<project xmlns="http://maven.apache.org/POM/4.0.0"> <groupId>net.jangaroo.senchacon</groupId> <artifactId>my-module</artifactId> <version>1-SNAPSHOT</version> <packaging>jar</packaging> <name>My Module</name> <description>A sample Maven module.</description> <build> <plugins> ... </plugins> </build> <dependencies>...</dependencies> </project>

Maven POM

• "Project Object Model"

• Configuration for one project

• XML-Format

• “Maven Coordinates”- groupId, artifactId, version

• packaging type determines- build lifecycle

- resulting artifact

• Build configuration for all plugins

• Dependencies

pom.xml

Example:Creating and Using a Simple Sencha Maven Workspace

js

Creating a Simple Maven Sencha Workspace

Minimal example:

• package with utility class and

• app with main class using that utility

Only 5 files (and a few folders) needed:

• root aggregator POM

• POM and JS file for the package

• POM and JS file for the app

my-workspace │ ├─ pom.xml │ ├─ my-package │ │ │ ├─ pom.xml │ │ │ └─ src/main/sencha/src │ │ │ └─ MyUtil.js │ └─ my-app │ ├─ pom.xml │ └─ src/main/sencha/app │ └─ Main.js

js

Initializing & Building a Sencha Maven Workspace

1. Initialize the workspace:

This creates a workspace.json in the root directory.

2. Build the workspace:

3. Run sencha app watch through Maven:

4. Open the app in the browser athttp://localhost:1841/my-app/target/app/build/production/

mvn jangaroo:generate-workspace

mvn install

mvn -f my-app jangaroo:app-watch

Sencha Maven Workspace: Development Build

1. Build the app (or the whole workspace) with development profile:

2. Like before, run sencha app watch through Maven:

3. Open the development-mode app in the browser athttp://localhost:1841/my-app/target/app/

4. After changing JS code in any src/main/sencha directory, run

The running sencha app watch picks up the copied source files.

mvn -f my-app install -DsenchaAppBuild=development

mvn -f my-app jangaroo:app-watch

mvn package -DskipPkg

22

my-workspace │ ├─ pom.xml │ ├─ workspace.json │ ├─ my-package │ │ │ ├─ pom.xml │ │ │ ├─ src/main/sencha/src │ │ │ │ │ └─ MyUtil.js │ │ │ └─ target/packages/local/package │ │ │ ├─ package.json │ │ │ └─ src │ │ │ └─ MyUtil.js │

Maven Sencha Workspace After Build

│ ├─ my-app │ │ │ ├─ pom.xml │ │ │ ├─ src/main/sencha/app │ │ │ │ │ └─ Main.js │ │ │ └─ target/app │ │ │ ├─ app.json │ │ │ ├─ index.html │ │ │ └─ app │ │ │ └─ Main.js │ └─ target/ext

js

js

js

...

...

• generated by mvn jangaroo:generate-workspace• generated by mvn package

<project ...> ... <artifactId>simple-workspace</artifactId> <packaging>pom</packaging>

<modules> <module>my-package</module> <module>my-app</module> </modules></project>

Workspace Root POM

• Packaging type pom (meta-data only)

• List all names of sub-directories containing modules to aggregate

pom.xml

<project ...> ... <artifactId>my-package</artifactId> <packaging>jangaroo-pkg</packaging>

<build> <plugins> <plugin> <groupId>net.jangaroo</groupId> <artifactId>jangaroo-maven-plugin</artifactId> <extensions>true</extensions> <version>4.0.30</version> </plugin> </plugins> </build> <dependencies>

</dependencies></project>

POM for Sencha Package

• Packaging type jangaroo-pkg• Uses jangaroo-maven-plugin to

enable this packaging type(extensions true!)

my-package/pom.xml

<project ...> ... <dependencies> <dependency> <groupId>net.jangaroo.com.sencha</groupId> <artifactId>ext-js</artifactId> <version>6.0.1-5</version> <type>pkg</type> </dependency> </dependencies></project>

POM for Sencha Package

• Dependency on desired version ofExt JS framework

my-package/pom.xml

<project ...> ... <artifactId>my-app</artifactId> <packaging>jangaroo-app</packaging> <build> <plugins> <plugin> <groupId>net.jangaroo</groupId> <artifactId>jangaroo-maven-plugin</artifactId> <extensions>true</extensions> <version>4.0.30</version> <configuration> <applicationClass>Main</applicationClass> </configuration> </plugin> </plugins> </build> <dependencies> </dependencies></project>

POM for Sencha App

• Packaging type jangaroo-app

• Also uses jangaroo-maven-plugin

• Again, use extensions true• Specify the main application class

my-app/pom.xml

<project ...> ... <dependencies> <dependency> <groupId>${project.groupId}</groupId> <artifactId>my-package</artifactId> <version>${project.version}</version> <type>pkg</type> </dependency> </dependencies></project>

POM for Sencha App

• Dependency on my-package

my-app/pom.xml

https://commons.wikimedia.org/wiki/File:Under_the_hood_of_car.jpg

What HappensUnder the Hood?

Maven Lifecycle & Plugins

Maven Lifecycle: Phases, Plugins, Goals

Plugin 2

Module

Life

cycl

e Phase 2

...

Phase 1

Goal 1

Plugin 1

Goal 2

Goal 1

Phase 3 Plugin 3

Goal 2

Goal 1

Custom Maven LifecycleModule

Life

cycl

e fo

o

...

my-phase

my-plugin

<packaging>foo</packaging>

<component> <role>...LifecycleMapping</> <role-hint>foo</>

</component> my-other-phase

pom.xml components.xml

<configuration> <phases> <my-phase>my-plugin:goal1</> <my-other-phase>...</> </phases> </configuration>

<plugin> <artifactId>my-plugin</> <extensions>true</></plugin>

goal 1

Plugin 1

Maven Plugins Can Access ContextModule

Lifecycle

src

target

Properties Dependencies

CoreMedia'sJangaroo Sencha Maven Plugin

Where Jangaroo Sencha Maven Adds Value

• workspace• package• app

Build

• Run sencha app watch with correct parameters

TestRun

• Build additional Sencha app for running unit tests

Jangaroo Sencha Maven Plugin: Build

• Generate workspace.json

• Build all packages and apps with one command

• Build one app and all its dependencies

Build Workspace

Generate / updateSencha Cmd package• Generate package.json

• Copy resources• Runsencha build package

Build AppBuild Package

Generate / updateSencha Cmd app• Generate app.json• Copy resources• Runsencha build app

• Supports development and production mode

ModuleLi

fecy

cle

jang

aroo

-pkg

process-classes

process-resources

package

install

deploymaven-deploy-plugin

jangaroo-pkg Maven Lifecycle (Simplified)

jangaroo-maven-plugin

package-pkg

maven-resources-plugin

package

resources

maven-install-plugin

deploy

install

ModuleLi

fecy

cle

jang

aroo

-app

process-resources

package

install

deploymaven-deploy-plugin

jangaroo-app Maven Lifecycle (Simplified)

jangaroo-maven-plugin

generate-app

maven-resources-plugin

package-app

resources

maven-install-plugin

deploy

install

Maven Sencha Artifacts

maven-deploy-plugin

maven-install-plugin

deploy

install

Remote Maven Repository

Maven Artifactsmy-package

Life

cycl

e ja

ngar

oo-p

kg ...

jangaroo-maven-plugin

<packaging>jangaroo-pkg</><version>1</>

pom.xml

attachArtifact("pkg", ...)

package

my-package-1.pkg

LocalMaven

Repository

package

install

target

deploy

Remote Maven Repository

Dependencies on ArtifactsModule

Lifecycle

LocalMaven

Repository

Dependencies

Maven Central Repository

Maven Plugins are Artifacts, too!Module

Lifecycle

LocalMaven

RepositoryPlugin 1

Dependencies

Maven Sencha Artifacts

Maven Artifact is a standardSencha Package (*.pkg, zip format)

Sencha Package

Maven Artifact is a Java JAR (*.jar) containing the Sencha resources as Java Web resources

Sencha App

Maven Sencha Artifacts: Package

Format: Sencha Package (*.pkg)

• The PKG is only needed if the module is meant to be used as remote package

• Developers can use -DskipPkg to speed up local development

my-package-1-SNAPSHOT.pkg │ ├─ package.json │ ├─ build.xml │ ├─ .sencha/... │ ├─ build │ │ │ ├─ net.jangaroo.senchacon__my-package.js │ │ │ └─ net.jangaroo.senchacon__my-package-debug.js │ ├─ overrides/... │ ├─ resources/... │ ├─ sass/... │ └─ src │ └─ MyUtil.js js

js

js

Maven Sencha Artifacts: App

Format: JAR with Java Web Resources

• Self-contained archive of all Web resources (*.js, *.css, *.png, ...) needed for the client Web App

• Placed in Java Servlet 3 standard subfolder META-INF/resources

• Use in Java Web App just by deploying it to WEB-INF/lib

• This is even automated by Maven!

my-app-1.0.jar │ └─ META-INF/resources │ ├─ app.json │ ├─ app.js │ ├─ index.html │ └─ resources │ ├─ net.jangaroo.senchacon__my-app-all.css │ └─ images │ └─ ...

js

css

Java Web-App Integration

<project ...> ... <artifactId>my-webapp</artifactId> <packaging>war</packaging>

<build> <plugins> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.3.11.v20160721</version> </plugin> </plugins> </build> <dependencies>

</dependencies></project>

Java WebApp POM

• To integrate the client App with server code to a WebApp, add another maven module my-webapp.

• Packaging type: war(a Maven standard type)

• Use jetty-maven-plugin ortomcat-maven-plugin to run your Java Application Server of choice

my-webapp/pom.xml

<project ...> ... <dependencies> <dependency> <groupId>${project.groupId}</groupId> <artifactId>my-app</artifactId> <version>${project.version}</version> <scope>runtime</scope> </dependency> </dependencies></project>

Java WebApp POM

• Dependency on the Sencha App JAR artifact lets Jetty serve Web-app client part

• jar is default dependency type(can be left out)

• Use scope runtime: JAR not needed for compiling

• Run the Java-Ext-Web-app using

my-webapp/pom.xml

mvn jetty:run

Conclusion: Benefits of Jangaroo Sencha Maven PluginExploit Maven advantages for Ext JS development

• Provides modules to structure large code bases

• Clean separation of build source and target

• Mature build artifact and version management

• Supports releases and software deployment

Conclusion: Benefits of Jangaroo Sencha Maven PluginUnified Java and Ext JS build environment

• Same build configuration file syntax

• Same build tool with familiar command line syntax

• Seamless, future-proof integration of Sencha Cmd

• Integrate client and server part of your Web-app

And eventually...

50

Joe Fullstack is happy!

51

Please Take the Survey in the Mobile App

• Navigate to this session in the mobile app :

Building Enterprise Ext JS Apps with Mavenized Sencha Cmd• Click on “Evaluate Session”

• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards