Is YUI Compressor useless for ExtJS app minification - extjs

My manager wants me to look into initially using YUI Compressor to minify our ExtJS 4.2 app.
So I wrote a python file to concatenate all my ExtJS app files into a single file, and then minify that one file with YUI Compressor.
But I get errors related to objects not found, because order matters with JavaScript.
So for an app with many files, with multiple developers adding new files, it seems questionable whether YUI Compressor can be effectively used to minify ExtJS apps.
Is this true, or am I missing something?

YUI Compressor is must-have tool in the deployment process because it reduces js and css files in about 40%.
In your case you should use YUI Compressor AFTER you compile your ExtJS app into one js file. This is not effective to compress dozens of tiny files before concatenating them.
Of course the order of files for concatenation matters. It is based on dependency requirements declared in each file (which is actually ExtJS class).
I was tired to use Sencha.cmd because it's huge, inconvenient to install on servers, hard to automate and integrate into deployment processes.
I developed my own tool Extapp which makes the ExtJS applications builds. It requires java jre environment to run jar file.
Extapp : https://github.com/liberborn/extapp

Using YUI is not useless, the problem lies with concatenating files without analyzing the dependencies between them.

Related

Optimizing build time for multiple extjs applications

We have a modular monolith application, each module being an extjs app. Modules share alot of features / functionality, therefore the most of code is sitting in a common extjs package that gets imported into each module, the module themselves are relatively thin. We also provide an accessibility build, ie., everything is built at least twice (once with normal theme, once with high contrast), but for some apps more (some logic is managed through extjs macros to exclude / include different regions at build time).
The end result is agonizing build time. ~10 apps, each built at least twice, each build lasting just under 2 minutes. It's all because each app is built from scratch. Is there a straightforward means to build it together? So that instead of rebuilding extjs code / common package code / themes 10 times, it would be just built once and reused in build process of all apps?
This looks very relevant "saving and restoring sets" . But it seems to be some lower level feature, which would as far as I understand it come useful if we were reimplementing build process from scratch and tossing out app.json. Is there a clear way how to incorporate it into existing higher level features like sencha app build?
You could go ahead and build the packages (if any) separated from the application, then drop the packages in the owning directories of the build. However, Sencha CMD and the way the class system and resolving the dependencies works makes it really hard to untangle the build process, so it's hard to give a general advice here.
You might want to look into the package loader of Ext JS and the "uses" configuration option for the app.json.

How to build angular project to compatible with Chrome Extension obfuscation policy

We have been working on an Angular project with TypeScript (Visual Studio Code). We are deploying this project as Chrome Extension in Google Webstore, it was worked fine, but two days back when we try to re-publish the extension with the latest changes, the Chrome Store reject the request with the below reason.
Your item did not comply with the following section of our Program
Policies:
"Content Policies"
Developers must not obfuscate code or conceal functionality of their
extension. This also applies to any external code or resource fetched
by the extension package.
Your item was found to have one or more files that does not comply
with this policy.
Please note that minification is allowed in the following forms:
Removal of whitespace, newlines, code comments, and block delimiters
Shortening of variable and function names
Collapsing the number of JavaScript files
For more information, please review these recommended Minification
Techniques for Google Developers.
We are build our angular project with ng build command.
Our environment parameters:
Angular CLI: 1.5.2
Node: 12.13.0
OS: win32 x64
Angular: 5.2.3
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router
#angular/animations: 5.2.11
#angular/cdk: 5.2.5
#angular/cli: 1.5.2
#angular/material: 5.2.5
#angular-devkit/build-optimizer: 0.0.42
#angular-devkit/core: 0.2.0
#angular-devkit/schematics: 0.0.52
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.8.2
#schematics/angular: 0.1.17
typescript-require: 0.2.9-1
typescript: 2.4.2
webpack: 3.8.1
Can anyone help us how to build our project so that it will be compatible with Chrome Extension policies?.
Interesting, Sorry to let you down but I'm afraid that's impossible (without authors help) to convert typescript into readable unobfuscated code.
I was looking into that, I'm afraid that your only option is to ask google to review your source code and check sum it but that will be a pain for both you and the reviewer to do every time theres an update to your extension from your side.
Your only realistic option leftout at that point will be to convert your typescript angular project into purejs angular project, using pure javascript is actually not that scary and should technically speed up different parts of the process if not all of the processes all together, a wise man once said that a good javascript developer can write code that is much more efficient and faster than a group of typescript developers, I'm afraid that's true.. the transcription process that occur when typescript compiles into javascript will always generate "machine code" or in other words unreadable obfuscated code, at least from my point of view, this is all purely my opinions based on the knowledge and exprience I gathered from the start of this computer age (Yes I lived through all of it).
So just to be clear, In it's own weird way: typescript is javascript, which means that some of the core codes like database interactions, classes, functions and html can easily be converted into pure javascript without fuz.
Check this out:
https://www.google.com/search?q=convert+angular+typescript+to+javascript

Is it possible to build an AngularJS App without using multiple files

I was wondering if it is possible to build an AngularJS app in a single file versus having multiple .js files.
During developing having one file makes no sense, cause it is very hard to support such code. For production you can use special tools, so user will see only one js file. This is done for angular itself -- you can find angular source to contain plenty of files, while when you include angular in project you include just one angular-XXX.js file.

Improve TinyMCE performance in Angular app

I've set up tinyMCE in my angular application by using the latest (4.x) version of tinyMCe and the latest version of angular-ui/ui-tinymce (https://github.com/angular-ui/ui-tinymce).
All of the code is minified.
In my application I have multiple instances of tinyMCE on a page (up to three) and the application uses the angular routing mechanism.
Everything is set up correctly, the editors work (and each of them has their own configuration).
The problem I'm facing now is performance. Whenever I load a new page the tinyMCE instances recreate themselves even if they are already there (= in the dom)! Creating a tinyMCE editor takes some time (up to 3 seconds) The amount of text in it doesn't seem to matter much.
I've tried using tinyMCE's gzip compressor but I couldn't get it to work.
What actions can I take to improve the performance in my application?
If at all relevant: I'm using a Java backend and AngularJs version 1.2.16
How-to optimize initialization speed of TinyMCE
(Wanna see original article?)
Here are some actions to take to boost initialization/loading time of TinyMCE.
Use and install the TinyMCE Compressor.
This will bundle all JavaScript HTTP requests into one big request and also gzip compress them by 75%.
Enable the button_tile_map option (should be enabled by default).
This makes the icons load faster since multiple image requests are replaced with a few tilemap requests.
Compress other scripts using the custom scripts option inside the compressor.
There might be other third party scripts on the same page. These can be added to the compressor as well.
Disable plugins that you don't need.
Remember to both remove them from the tinyMCE.init and the tinyMCE_GZ.init calls.
There is currently no compressor for TinyMCE 4 for Java backend, unfortunatelly.
And as you've already said, all of the code is minified.
So the only thing I can advice: remove unused plugins and reduce a number of requests by concatenating multiple JS files into as few files as possible.

How to use Ruby code inside JST files?

I am using Jammit to package my assets. One of the things it does well is package files with .jst extension and make them available in window.jst namespace in the browser. However, I've been looking for a way to make those templates dynamic, and I'm not sure how to do that or if it's even possible.
What alternatives do I have if I cannot make JST files dynamic?
As far as I can tell with Rails 3.0 it isn't possible. Jammit assumes the JST files are JavaScript files. Maybe in later versions they may add the ability. But I wouldn't count on it happening any time soon.
If you are able to upgrade to Rails 3.1 you can replace Jammit with the Asset Pipeline that allows you to run it through ERB or what ever language you want before it ends up as a JST file.
Kliment Mamykin made a walkthrough to upgrade from Rails 3.0 to Rails 3.1.rc4 with Asset Pipeline enabled.
http://mamykin.com/2011/07/03/upgrading-to-rails31-rc4.html

Resources