Monthly Archives: May 2016

Deep Dive into Sencha ExtJS Build

I you are new to ExtJS framework, I have written introductory post explaining a bit about this framework
sencha_codementor_officehour
And another one for Understanding Sencha Cmd
 This post is about the deep dive into Sencha ExtJS build with an objective

Objective

Copy the sencha application into Network UNC path
i.e. what build inside {root dir}\build\testing needs to copied to some network share (\\someserver\sharedpath)

Why

This network share in root directory of the test web server. So, whenever there is the new build, developer can push their code to test server

Problem

It looks like simple problem, you just need to change the build directory in app.json. But it didn’t work.
For this, I need to dive into Sencha build process to understand whats going. Read the full story to understand.
When you enter command
sencha app build <environment>
e.g. > sencha app build testing
This triggers lots of action. For novice new developers, it is some magic happening for the build.
My journey began with option to publish to the network share path UNC path (\\someserver\sharedpath)
 I have written another post on how to change the build directory in ExtJS
In order to this, I change the build directory for ExtJS in app.json to network share path (\\someserver\sharedpath). In my case, it’s was \\rav-vm-srv-122\dcf-test
Everything went well, except app.js. Compiler confuses with the network UNC path and instead on writing to the UNC path, it created the directory in the root directory with
\\rav-vm-srv-122\dcf-test folder name.
OrphanPartInRootDirectory
app.js file which you see here is the compile time file, which is generate when you fire sencha build. This file is different from the one you have in the ExtJS app root directory.
App root one is just 2 Kb, which compile one is close to ~ 2 MB in size.
It contains the code which you have written in controller, model, view and tons on lines from the extJS framework. This is important file, and I needed to be in there. Without this, ExtJS app won’t work
To understand, why this file landed in the root drive folder instead than network UNC path is subject of our investigation.
In order to investigate, we must dive deep into Senha build process to understand what’s going on. To understand more about the build, there is link to sencha official page, which gives you the inside of the app build process
Sencha uses Ant to build the project.
In ant, what you need to do for build is define in <target> sections. You can view https://ant.apache.org/manual/tutorial-HelloWorldWithAnt.html for more information on ant build file
There is file call build.xml at the root of the application. This file is use when you fire sencha app build command.
SenchaBuildXMLFile.png
This files imports the build-impl.xml, which is in {root}\.sencha\app folder. This is an important folder in sencha build, as most of the files you required to modified the build is stored in this location
 InsideBuildXMLFIle
For JS compilation, it uses another file called js-impl.xml.
Inside build-impl.xml file
InsideBuildXMLFIle2.png
js-impl.xml file contains the code that compiles model, view, controller js file into one file app json
Inside js-impl.xml file
JSImplXMLFile.png
Now, here was the problem. This x-compile target uses sencha command compiler which renders the output
If you see the code above, output is render to ${build.classes.file}
Now, if we run [ sencha ant .props ] command at the command prompt, it will list all the ant properties used.
CMD > sencha ant .props
Here, we get
[INF] [echoproperties] build.classes.file=D\:rav-vm-srv-122\dcf\app.js
Seen, this is a problem. Sencha compile can’t handle network UNC path. Instead, it appends network UNC path to root directory in Windows.
Now the problem has been identified, how do we solve this? My idea to resolve this is better to compile in the local directory i.e. {app.output.base} and then copy all the files to network UNC path.
Since Secnha build use ant, we could use after-build target in the build.xml file for our copy task as seen below
AfterBuildFile.png
Here, you see echo message in error. This is quirk which I had to do in order to print message to command prompt. I found, all other level info, warning, didn’t print the message in the command prompt.
I have use ant copy task, which copies the build dir at ${app.output.base} to Network UNC path \\rav-vm-srv-122\dcf-test
Hope, this post have given you some insight of Sencha build process.
Advertisements

Change build directory in Sencha ExtJS

I being working with DevOps, my job would be to automate build process and setup continuous integration for wide range of technologies.

With ExtJS framework, I need to change the build directory so I could push the build to remote server rather than build directory inside app folder.

Questions rises, how do I change the build directory in Sencha ExtJS framework.

If you working with ExtJS version 5 or 6 and you need to change the build directory for the ExtJS App, there are multiple places where you can change

Option 1: Command prompt

command: sencha app build testing <path of directory>
This is put the output in the mention directory here, overiding all the build directory configure for the application

Option 2: Properties File

There are various properties file in {App Root Dir}\.sencha\app
If you want to change environment specific various, there are file name. This file overrides build.properties file in the built
development.properties
testing.properties
testing.properties
There are other files which contains default properties for that environment, which you shouldn’t modified, they are just for reference. You use properties file to override environment specific variables
development.defaults.properties
testing.defaults.properties
production.defaults.properties
In this file, you can change build.dir
build.dir=c:/MyCustomDirectory
Remember, in Sencha, paths needs to specify by forward slash “/”, compare to windows convention of paths with backwards slash “\”. Don’t know the reason why?

Option 3: App.json

Here, in app.json, this file exists in the root of the directory. Here, there is environment property sections, where you could change the output directory as shown below
Remember, in Sencha, paths needs to specify by forward slash “/”, compare to windows convention of paths with backwards slash “\”.
E.g. C:\Shabs\Dir1\Dir2 would be C:/Shabs/Dir1/Dir2

appjson

Reference

https://www.sencha.com/forum/showthread.php?297465

Troubleshoot Sencha Cmd

If you are new the Sencha ExtJS, it could be bit of pain to work with ExtJS Framework and ExtJS cmd. Ext JS Cmd is required to do various operation like creating the Sencha  Workspace, or to creating the ExtJS app. In this post I will jot down my journey working with ExtJS framework and Cmd.

Version Blunder

I had the project requirement to work with ExtJS 5. I got the ExtJS 5 framework from the companies repository. Being novice, I googled ‘Download ExtJS Cmd’ and download the Ext Cmd from the first link I got the google.

Traped! It was ExtJS Cmd version 6.x. Nowhere, I told me you can’t work with Cmd 6 on ExtJS 5.x framework. I create the workspace using Cmd, worked great.

When I tried generate app command, damn error

{sencha workspace directory}> sencha generate app DemoApp

After spending hours of google to find solution, I realize the hard way, Cmd and framework version go hand in hand. If you are working with Framework version 5.1, use Cmd version 5.1. If you are working with ExtJS 6.x, then download CMD version 6x.

Another word of caution, don’t install multiple version on Sencha cmd on your machine. Sencha cmd resisters the path in the environment variable, and multiple version is easy way to point to wrong version without noticing it.  Better, uninstall all versions and then install the one you really need to work in project.

Download archive

While I was writing the article, ExtJS 6 is out and practically, nowhere on the Sencha website I can find link to download Ext 5.1 GPL version framework. Thanks to Openlogic, I was able to find at

http://olex.openlogic.com/packages/extjs/5.1.0

You can download the 5.1 cmd at
https://www.sencha.com/products/extjs/cmd-download/

In the screenshot of the download sencha cmd, hope it remains the same when you are reading it

Cmd Download WebsiteCmd Download Website 2

Dependency Hell

After sorting the version problem, comes the dependency hell. Here is what I have done. Gone to the Ext 5.1 framework directory and generate the app. Cool it worked, and generated the sample app base on template at c:\demoapp directory.

CreateApp

Don’t understand these commands thinking-idea-animated-animation-smiley-emoticon-000339-large.gif. Think to read Sencha Docs

DemoApp

Next, would be built this app. Fire command

sencha app build 

Ten-ta-ten. Error. It shows it trying to do something with compass and ruby, and for newbie like me, couldn’t understand what the heck this means.

SenchaBuildError

Plus to me, ExtJS is merely JavaScript framework, why the hell it requires Ruby runtime and wait, what is Compass?

Time to resort to google again. After an hours of savaging to various pages, I found Compass is gem package which it use to compile SASS scripts. For executing gem package, it requires Ruby runtime.

Another lesson learnt, while installing ExtJS 5 cmd, nowhere in the installation, it points out, it has dependency on Ruby and packages like Compass. Nor, does the installer install this dependency for you. Way to go Sencha, start writing better installers.

I have written another post, which list down the dependency, which I got to know after lots of reading over the web, and nice youtube video, which shows the order which these dependency needs to be install.

See ya for now, happy learning Sencha Ext JS!

Understanding Sencha Cmd

If you are coming from other JavaScript framework like AngularJS, you would be perplex with the Sencha Cmd when developing with ExtJS.

If your are new to ExtJS, I would recommend you to check my previous blog about Sencha ExtJS.

What is Sencha Cmd

SenchaCMD

Sencha Cmd is a cross-platform command line tool that provides many automated tasks around the full life-cycle of your applications from generating a new project to deploying an application to production.

You can read more about Sencha Cmd here

https://docs.sencha.com/cmd/5.x/intro_to_cmd.html

What does Cmd do?

Cmd perform serveral function. Here are few listed below, there are more, you can refer above link above
  • Code Generation Tools
    Create apps, controller, models, etc. with cmd
  • Web Server
    Starts the build-in server to view app, instead of depending of external webserver like Apache2, IIS. It generally, [ sencha app watch ] command
  • Build Scripts
    This is most import task in development lifecycle. [ sencha app build {enviroment} ] is one which each Sencha Developers lives by.
  • Logging

What are the software dependencies?

Java Runtime Environment (JRE)
Cmd to produce a valid build, so it’s necessary to have Java installed properly. Sencha Architect requires the JRE to properly utilize Sencha Cmd.

Ruby
Sencha Architect may use Ruby during the app build process when building a theme. Theming in Sencha frameworks may require Sass and Compass depending on the Cmd version used. You don’t need to install these two dependencies since they ship with the versions of Sencha Cmd and Sencha Architect as necessary. However, Sass and Compass run on top of Ruby, so it does need to be specifically installed when using versions of Cmd older than 6.x.

Tools required to install CMD

Sencha Command required tools
• Ruby: http://www.ruby-lang.org/en/downloads/
• Sass: http://sass-lang.com/
• Compass: http://compass-style.org/
• Java JDK (Java 7 or later): http://www.oracle.com/technetwork/jav&#8230;
• Java environment variables: http://docs.oracle.com/javase/tutoria&#8230;
• Apache Ant: http://ant.apache.org/bindownload.cgi

https://www.youtube.com/results?search_query=extjs+5+installation

Troubleshooting the CMD

I will create the separate post to trouble shoot the Sencha CMD part.

 

Sencha Ext JS Ecosystem and your getting started first App

Ext JS is a pure JavaScript application framework for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting.

sencha_codementor_officehour

UI

If you tend to work with ExtJS Version 4 and above, you would be perplex with the tools its refers,  Sencha Cmd, Architect and other terminology which it comes with. Let me demystify the Ecosystem.

ExtJS ecosystem consists of

  • ExtJS JavaScript Framework
  • ExtJS Command
  • ExtJS Architect

ExtJSEcosystem
In order to work with Ext JS, there are two things needed

ExtJS Cmd

ExtJS is the utility which allow you to do various functions for ExtJS working, build and Optimization. Example, you can use ExtJS to create the Workspace and Sample App

Ext JS Framework Resource

There are two version ablv, full commercial and GPL version. Below links are for GPL license
GPL Version Download: https://www.sencha.com/legal/gpl/
GPL Faq: https://www.sencha.com/legal/open-source-faq/
License Version: https://www.sencha.com/products/extjs/evaluate/
ExtJS Cmd Download link
https://www.sencha.com/products/sencha-cmd/
Note: When you download, download the same version of cmd and framework
Example, if framework is 6.1.x, Cmd should be 6.1.x

In you use License Version, you will get the watermark of trial on screens which you developed until you enter the license key.

Sencha Architect

Sencha Architect is the desktop app which let’s you visual build the app. It has toolbox where you can drag and drop items, and it generates the code behind which gives you the UI. Great tools for RAD UI development. But, it doesn’t complete the app development. Binding code, logic, etc is what you need to write. Plus, Sencha Architect come is separate license, then add to your development cost.

In general development workflow, you would be mostly working with ExtJS framework and command line tool.You won’t be needing architect so often.

Getting start with first app

In order to start with Sencha ExtJS 6.x, follow the steps below

Step 1

Download the ExtJS JS SDK from the Website
Links are above, in resource section. It is also know as Secha Pack
Similar Download ExtJS Command, links above in resource section
Ext JS framework Size: ~ 165 MB
ExtJS Cmd: ~45 MB (Without JRE)

Step 2

Install the ExtJS Command
ExtJS Command for Windows comes in installable format. Just run the installer

Once you have install sencha cmd, you will get Sencha in the cmd prompt.

Source: https://www.youtube.com/watch?v=zgzdn7gylWM

Step 3

Create the Workspace for the ExtJS
Command: sencha generate workspace {path where workspace needs to be generated}
This would copy all the necessary files to the workspace. It takes few minutes to build the workspace
Here, below is the screen shot of the workspace

Workspace

Here, you see, it has copied various folder where, ext is the main folder where all file resides to create the first ExtJS app.
Packages would contain the theming and other stuff will reside
Workspace.json is the metadata file for the workspace

Step 4

Creating the First Demo App for Sencha
Command: sencha generate app {NameOfApp} {path where you like DemoApp to be present}
This command execute this command from the ext folder
e.g. D:\Prj\Sencha_Workspace\ext: sencha generate app DemoApp ..\DemoApp
This will create directory “DemoApp” in the Sencha_Workspace, and add all necessary files in this folder

Step 5

Build the app. Go to the DemoApp folder, which you create above and fire following command
Command: sencha build app {mode}
Here, there are two modes of building in the app in version 6.x, Classic and Modern
e.g. D:\Prj\Sencha_Workspace\DemoApp sencha build app Classic
OR
e.g. D:\Prj\Sencha_Workspace\DemoApp sencha build app Mordern

What it does, it will compile the project and put necessary files in classic and modern folder in DemoApp.
Prior to ExtJS 6, there were two framework, Sencha ExtJS and Touch. Now, in 6.x they have merge this two framework into one. When you build with Classic, it builds the application in the way it use to build for ExtJS version 4 and 5. Modern builds in new way and UI have the feature of Touch

ClassicAndModern

Step 6

To run the application, you need run following command
Command: sencha app watch {mode}
e.g. sencha app watch classic
What it will do, it will start the Ruby server at port 1841, which is the default port, if you didn’t change in config. Open the browser, and paste in the following URL
http://localhost:1841/ and your app would be running