I want to split the app.js file generated by Extjs into app specific code & extjs specific code.The intention is to reduce the size of app.js & app will load much faster.
I have read some links, but as I am new to extjs I want some ready code(if available) like in some .xml files etc.
The app won't load faster because the app still requires the ExtJS code and your own code before it can do anything.
Furthermore, gzip compression works better if everything is in one file, so if you have enabled compression of static contents, your two-file app will load slower than before. And if you haven't, you definitely should, it will cut loading time in half or even less.
That said, you can always include more javascript files using multiple <script> tags:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Verwarming HollandVilla</title>
<script type="text/javascript" src="ext-modern-all.js"></script>
<script type="text/javascript" src="verwarming.js"></script>
But you cannot split the compiled app.js into a part which only contains your code and another part which only contains ExtJS code, because in app.js both domains are mixed and mangled.
But you can still split the app.js before any occurrence of Ext.define()., and then check that both javascript files are still syntactically valid. If yes, you didn't change anything semantically, so the app should work as before.
If you really get the loading time down, please post your results, because I have not yet found anyone who verified the expected results by experiment.
Beside of what Alexander wrote, you can split the application and the framework code using the "output" definition. In the following example this is done for the production build:
"production":{
"output":{
// Split the framework from the application.
"framework":{
"enable":true
}
},
"compressor":{
// Enable compressor (other options: closure, strip)
"type": "yui"
}
}
Additionally the compression is activated (here: yui).
The "Sencha Compiler Reference" and the documentation about the "Resource Management" could also help you:
https://docs.sencha.com/cmd/guides/advanced_cmd/cmd_compiler_reference.html
https://docs.sencha.com/cmd/guides/resource_management.html
Related
For my team, we're between projects, but I'm performing some basic research on TypeScript and how to use Angular 1.x with it, considering that Angular 2 is still being baked. I usually use Plunkr to make small-scale prototypes so that we can see how something works and mess with it in-situ during tech demos and stuff.
The problem, though, is I tried to make a very basic Angular 1.x + TS setup in this plunker, but have been running into issues getting it to work properly. I think some of the problem is the client-side transpilation, but I'm sure that's not the only thing I'm messing up. Specifically...
View Code:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="testController as ctrl">
<h1>{{ ctrl.testMethod() }}</h1>
</div>
<!-- Scripts... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script type="text/typescript" src="app.ts"></script>
<script type="text/typescript" src="controllers.ts"></script>
<script type="text/typescript" src="registrations.ts"></script>
<!-- Required for web transpilation... -->
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>
</body>
</html>
I got the client-side transpilation from this StackOverflow question, but that question's resolution was either, 'Just do it in Visual Studio!' or 'transpile your TypeScript, then plug the JavaScript into Plunkr,' which doesn't work for me, because my team is considering transitioning to TypeScript in the first place - we need to be able to work with typescript, thus the prototype to help us understand how it works. Additionally, that question notes that the transpilation parts are actually significantly outdated.
Question: First, is there an updated clientside TypeScript-to-JavaScript transpiler that I can link to in my prototype plunker? Second, are there any better resources to refer to on how to get Angular 1 to work with TypeScript? I've had very, very little luck finding anything that talks about how to make TypeScript work with Angular 1.x...
Edit:
Turns out you can use typescript on plnkr, which I just learned from the comments below http://embed.plnkr.co/suu7Yg/preview
For implicit mode all this requires is creating a file with the appropriate extension, i.e. script.ts or style.scss, and then referencing it in the head with the expected compiled extension, i.e. script.js or style.css. Very cool, plnkr!
I'm fairly certain Plunker doesn't support typescript (though of course I could be wrong) (edit: yup I was wrong, it's just not obvious that this is a feature). However, I can offer an idea for a possible solution of what you're trying to accomplish.
Try moving your small-scale prototypes and demos over to codepen instead. They're both pretty comparable apps I use all the time, and codepen currently supports typescript so if that's something you need to play with you got it.
It's hidden behind the little gear, along with external js file includes:
Turn on typescript:
Boom. Good to go for your live demos. Hope that helps!
As mentioned by #wesww in his amended answer, Plunker supports server-side compilation of TypeScript. What I mean by that is that when your TypeScript code is sent to the preview server, it is sent un-transformed.
Suppose you have a file script.ts, written in TypeScript, but the index.html of your project requests script.js, Plunker's preview server will compile your file on the fly and serve the compiled version.
You can configure how you want the TypeScript compiler to work by creating a tsconfig.json file (consistent with normal CLI usage) to define your settings.
Please see Definitive Guide to Comiplation on Plunker for more information.
I'm not familiar with plunk is but it's possible to transpile typescript in the browser by just including node_modules/typescript/typescript.js file and use the Compiler API. Checkout my Compiler API playground in the browser: https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
See Dynamic execution of TypeScript in the browser for details
Good day. Sorry but I've stumbled upon a problem that I can't seem to figure out for the past couple of hours. I downloaded this printing class to be able to print a Form that I have in my web application. I copied the Ext.ux.Printer folder in my scripts folder inside resources. The file path looks like: resources/scripts/Ext.ux.Printer and the resources folder is on the same level as the app folder.
My Loader looks like:
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.Printer': 'resources/scripts/Ext.ux.Printer/Printer'
}
});
And the Application looks like:
Ext.application({
requires: [
'Ext.Loader',
'Ext.layout.container.Absolute',
'resources.scripts.Notification',
'Ext.layout.container.Column',
'Ext.ux.Printer.Printer'
], //models, views, controllers, follow after
and I try to use it in my code as such:
Ext.ux.Printer.print(form);
However, I am given an Uncaught TypeError: Cannot read property 'Printer' of undefined whenever I try to execute the line of code above.
Can anyone help me? I'm a beginner in ExtJS4 and I'm just trying to follow examples I see around the internet - it is possible that I tried to appropriate my code incorrectly with something I saw online.
Any help is very much appreciated, thank you.
UPDATE 1
Upon discussion with Guilherme Lopes below we did the following steps:
Import the js files by adding it as a js resource in Sencha Architect. Make sure that the file path is correct.
Check the includeAfterAppJS checkbox. Due to a bug in Architect, sometimes the JS Files are added in before the ExtJS.
Open index.htmluse ext-all.js instead of ext-dev.js. Note that Sencha Architect overwrites/resets this file every time you save your project. A quick fix is to go to project settings and uncheck updating index.html.
Try Ext.ux.Print.print(form);
By the developer instructions, you should import the script files using your main html document, the same way you do with ExtJS classes (if you are not using the bootstrap).
These lines should be added after you import the ExtJS library:
<script type="text/javascript" src="Printer.js"></script>
<script type="text/javascript" src="renderers/Base.js"></script>
The library currently comes with renderers for Ext.grid.GridPanel, and Ext.tree.ColumnTree.
These can be included as required:
<script type="text/javascript" src="renderers/GridPanel.js"></script>
<script type="text/javascript" src="renderers/ColumnTree.js"></script>
And your calls to Ext.ux.Printer should start working.
If you are using Architect, add your external JS files clicking on: + => Resources => JS Resource
And then change the URL to the path you need (do this for every file you wish to add)
* I would just uncheck the x-compile and x-bootstrap
So I am trying to emulate the example "Hello !" given on the Angular website here: http://angularjs.org/ under the section The Basics.
I have placed the following file in my my-user-name directory which contains the angular.js directory that is installed when you clone the Angular repo as per the site's instructions.
<!doctype html>
<html ng-app>
<head>
<script src='js/angular-1.0.0rc6.js'></script>
</head>
<body>
<input type="text" ng-nmodel="name">
<h2>Hello {{name}}!</h2>
</body>
</html>
I am running the angular server via grunt webserverwhich I run from my home directory path and access the above html file by typing http://localhost:8000/angular.html But I get a blank page. I realize that the path js/angular-1.0.0rc6.js doesn't mean anything in the context of my home directory in that there is no js directory in my home dir and similarly no angular-1.0.0rc6.js lying anywhere around those environs. I just copied that path-name from the example. What is the standard protocol in terms of where the script files are located relative to where you develop your angular apps?
Thank you!
There's so many possibilities that I'd nudge you in a slightly different direction to get started. Check out Yeoman (http://yeoman.io).
Yeoman is a nice way to learn because, after running it (which just takes typing 'yo angular' on the command line once Yeoman is installed), it gets you started with a small working app that you can experiment with and it scaffolds up a nice overall base (code/test scaffold, tools, ...) to build from. And it even uses grunt, as you did, to launch your app (you'll just type grunt server and your app should appear in a browser (with live reload working - which is a cool time saver).
Yeoman should save you from having to figure out the kinds of things you are now- is my file in the right location? is my server pointing to the right place? etc... All taken care of by yeoman.
Here's a tutorial showing how to install Yeoman and install Angular: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
You'll see it's only a handful of commands.
In case you'd like to dive in more, here's a talk posted by the Angular team about using Yeoman with Angular: http://www.youtube.com/watch?v=XOmwZopzcTA
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
Working with yeoman generator-angular, it assumes that you want to put your css and scripts files in the same server as your index.html file. It generates a dist/index.html file that looks like:
<link rel="stylesheet" href="styles/7d151330.main.css">
<script src="scripts/6f9c9a13.scripts.js"></script>
<script src="scripts/bd6ce9e3.plugins.js"></script>
<script src="scripts/ec88f033.modules.js"></script>
However, I'd like to host the CSS/JS files on a different server and prepended with the URL:
<link rel="stylesheet" href="//mycdn.com/styles/7d151330.main.css">
<script src="//mycdn.com/scripts/6f9c9a13.scripts.js"></script>
<script src="//mycdn.com/scripts/bd6ce9e3.plugins.js"></script>
<script src="//mycdn.com/scripts/ec88f033.modules.js"></script>
I believe this is the YSLOW best practice and is in fact being used by the stackoverflow page you are currently looking at (view source to see their note on https://cdn.sstatic.net/) Having different CDNs doesn't seem to be possible yet with the grunt-google-cdn plugin
My current thought is to perform a search and insert on:
<script src="[INSERTHERE]scripts/
<link rel="stylesheet" href="[INSERTHERE]styles/
UPDATE: There are several grunt plugins that perform a search/replace so this may be the best route.
Any additional suggestions to get a CDN url prepended during a grunt build?
I was looking for the same functionality and it seems like this package would do the job:
https://github.com/tactivos/grunt-cdn
This does the job
https://www.npmjs.org/package/grunt-cdnify
For the standard use case, just set a base string for your URLs – eg, '//cdn.example.com/'. The cdnify task will automatically search for all local URLs in your files, and prefix them with this string. (It will automatically avoid adding double-slashes.)
For more general purpose than just "CDNize" you could use the grunt-preprocess module that allows you to preprocess your source files (html and else).
With this you can build source files depending on any variable.. like different URL by environment, DEBUG code adds, etc ...
More information here : https://github.com/jsoverson/grunt-preprocess
ps: see an another related answer of mine here : How to set AngularjJS base URL dynamically based on fetched environment variable?