Upload
sencha
View
97
Download
1
Embed Size (px)
Citation preview
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