I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.
Related
Below I have shared my current directory structure for my AngularJS application that I have been rewriting from the first time I wrote it while I was learning the javascript framework. I have been revising this project structure to be more of a component-based application in case I need to further add new features to the project.
I currently have two index.html files and trying to figure out which one I should keep. Should keep the file existing in the public directory or should I keep the file inside of the src directory? Keep in mind that I have run a build script to create my app.css and app.js file.
In both index.html files, I have an ng-include file where I am attempting to load view partials and none of them are loading. I do not receive any javascript errors.
<ng-include src="../app/components/employees/views/form.html"></ng-include>
<ng-include src="../app/components/employees/views/stats.html"></ng-include>
<ng-include src="../app/components/employees/views/table.html"></ng-include>
I was able to restructure my application and my build processes which easily removed the need for a public directory. By doing this I also was able to adjust the path to the partial files so they could render propertly.
We're attempting to create a PHP Laravel application using ReactJS as the view for each page. Laravel handles the routing and the presenting of each view. Each view loads a react js bundle.js file. Each bundle.js file is custom to that view and inside contains the react components needed for that view (screen). What were finding out is that each bundle.js file is about 4MB because each contain its dependencies as well as the components. Also were still trying to figure out how to share a component such as a TableComponent.js file across multiple views but have been so far unsuccessful.
Are we architecting this totally wrong? Should there always be only one bundle.js file for the application as a whole?
Or are there good fixes to remove the dependencies from each bundle.js file in a single dependency js file that gets loaded for all views?
Is there a good way to reuse ReactJS components accross multiple bundle.js files ?
Sounds like a perfect case to use Webpack which is an amazing bundling tool, here is an example on how to build multiple entries(pages):
https://webpack.github.io/docs/multiple-entry-points.html
You just write your entry point code, and webpack will figure out the details on how to build shared dependencies of different entries(pages) into a common bundle.
I am trying to put an iframe element inside the test, and can't figure out how to open a document that is located somewhere on the disk instead of remote website which works. So Karma is starting it's server, and doesn't see the path inside the src attribute because I guess it has different document root.
element = angular.element('<iframe src="fixtures/myhtmlfile.html" ></iframe>');
$('body').append(element);
Is there a way to tell karma 'look here for relative paths' ? By relative, I mean relative from the location of the actual directory where the test is located.
You'll need to use the karma-ng-html2js-preprocessor within your karma.conf. See that repo for example usage. Basically, it will preprocess your html files, converting them to js files, which karma will then serve.
This preprocessor converts HTML files into JS strings and generates Angular modules. These modules, when loaded, puts these HTML files into the $templateCache and therefore Angular won't try to fetch them from the server.
I'm looking at this sample Angular App.
In the main html file called [index.html][2], there is this line:
<div ng-include="'header.tpl.html'"></div>
However, there is not file header.tpl.html in the same directory.
How then does Angular know where to find this file?
The linked sample app is built using Grunt, so the file/folder structure of the built application differs from the one you see in the repository.
For example, the templates you are asking about, are collected by html2js (Grunt task) and compiled into a single JavaScript file containing code that adds all templates to $templateCache (causing them all to be included on app initialization instead of being lazily loaded when required). When the ng-include starts looking for files, its first step is looking into the $templateCache. Only when it cannot find the template there, it tries to load it from the server (and save it to $templateCache for subsequent uses).
See Gruntfile.js in the repository for build process details.
We have an ExtJS 4.2.1 app and use sencha cmd to build.
But during development I don't want to build every time I change something in the code.
But the index HTML file has bootstrap code in it and the locations of images, other js libraries, etc. is different pre and post build.
Also, even the "testing" concatenated code it too long to set break points in firebug.
So how can I run the code and set break points without building every time.
Typically we just run the code files themselves, but as I said, the location in the source tree, and the index.html file has bootstrap code, so that won't work.
What we do is include css and js libraries BOTH as single files and through the bootstrap. Since they have different paths they won't load twice. The extjs library is loaded through proper setup of the main application class and the loader.
When you're ready for production you can manually remove those since they'll fail every time. Our you can play with the directives. I believe anything included in <x-bootstrap> is ignored.
From the documentation:. The compiler ignores the files in the x-bootstrap block, and they are removed from the final page, as we will see later.