Fine uploader is 400kb of javascript code and 140kb minified. Since I am not using the UI and only using the API, I would like to build the library without the integrated interface (and hopefully get a smaller lib consequently). Is this possible?
Could not find this in the downloads section.
I've also setup the build environment and built the package myself, but all the files in the _dist dir seem to be bundled with the UI.
Fine Uploader is only 40 kB gzipped, which is compression that pretty much every web server already utilizes. The build is not currently setup to create a bundle without the UI. If you'd like to create such a build, the modules.js file will need to be modified. One place to start would be with a copy of the fuTraditional module sans the #fuSrcUi module. Then, a corresponding entry would need to be added to the concat.js build file. This doesn't seem worth it to save a few kB in my humble opinion, but it's all very possible.
If you're interested in a much more modular upload library where almost every feature is represented as an optional standalone module, take a look at Modern Uploader, which I am slowly developing as time allows. Feel free to open up issues in the repo if you have any questions regarding the future of that product.
Related
I am new into software developing. I have found this GitHub repository which I plan to modify. Let's just say I fork this repository and modify it. How would I then be able to export it from there. By export it I meant turn all of those files into one windows executable file. Thanks.
In general, building a project is a project-specific task unless the project is written in a language (such as Rust) that has a built-in build tool. If you're unclear about the steps to build a project, you should look in the documentation or the wiki for steps about how to do so, and failing that open an issue asking them to document the procedure for building the project.
Just looking at the project, it does not seem obvious that it should produce a binary executable of any sort since it's written mostly in JavaScript.
Usually you use a compiler to turn source code into machine code (exe files).
As bk2204 mentioned, this project is based on Javascript and Node.js.
Javascript is interpreted instead of compiled, so another program (Node.js) reads the source code and executes it directly every time instead of first compiling it into an exe file. That other program itself may be in an exe file.
The project you have linked is a fork of this project, and that one seems to have a Windows launcher/installer exe file (that probably installs or contains Node.js, but I haven't checked).
That installer is available here in both exe and source code form. So you could modify the launcher and rebuild it, but the main app is not in the launcher, instead it's in all the JS files. You may be able to edit the JS files and just use the same launcher without modifying it. There may be a packaging step required after editing the JS files, to package them into a form that the launcher expects. You would need to run this build step after every time you modify the JS files, to provide the new code to the launcher.
You would have to explore the project's structure and build process to find out the exact steps.
If you're very new that may be exceedingly difficult.
You may want to practice by learning Javascript and Node.js.
You could after that try Java which is compiled, and possibly more powerful than Javascript. Just for fun.
Maybe you could do 30 of these practice projects, then you'll have a chance of being able to modify this project successfully.
My minified bundle size is 246kb. I am seeing if I can getting smaller and I read that extracting vue and jquery using mix.extract(['vue', 'jquery']); can help do this. I added this to webpack.mix.js` and now it created 2 files rather than 1. It made: 1) app.js which is 161kb and 2) vendor.js which is 180kb. What is the benefit of this if both need to be included in the page anyways?
This is mainly abut caching unchanged files. For example: while you developing app you are changing the files, adding your own code to your project and then recompile them all together. But vendors are the core libraries which you are never edit their code again. So there is no need to compile them again and download all source code in app.js file. Thus when you extract vendors which they are unchanged files then your cached content size will increase and it also decrease download time of your application because of less changed files must be downloaded again.
It helps you to optimize the file size of the files that client needed to download. Thus speed up the page loading speed even you have updated your site.
Check the documentation.
One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it makes long-term caching more difficult. For example, a single update to your application code will force the browser to re-download all of your vendor libraries even if they haven't changed.
Have made quite a bit of progress in my quest to figuring out the Mozilla extension platform, but am still struggling with a few issues.. Hoping someone here can point me in the right direction once again :)
Ok, so here is the issue... I have been messing around with the online addon builder app here: https://builder.addons.mozilla.org/
Great, this seems to be working ok for testing simple addons. But it includes so much extra junk - stuff I am not using and don't need there.
Now when I download the .xpi file, rename it to .zip, and extract it to work on the files, when I repackage it to a zip -> xpi, Firefox tells me the package is corrupt when I try to install.
I have deduced that this is because the package is "signed" or something, and when I repackage it myself this is not happening.
Whatever. This is getting ridiculous...
So I want to use the SDK to work locally, and then just include the SDK in the directory somehow. But it looks like I need to install python and run something in order to generate some files first blah blah blah.... are you joking me? I can't just code my app, then include the SDK files?
QUESTION:
How can I create my basic addon/extension with the online Addon Builder, then edit the files locally, repackage it, and use it?
Add-ons created with the SDK currently aren't signed (see bug 613618). There are a bunch of SHA256 checksums in the package manifest but nothing is verifying them (maybe they are meant for verification by external tools, I don't know). So this is not the problem you are experiencing.
Most likely issue is that when you repacked the ZIP file you didn't keep the directory structure. The install.rdf file needs to be at the top level of the package, not in some subdirectory. You can check it with the unzip -l mypackage.xpi - it should list install.rdf without any directory name.
Generally, I would advise against manipulating the XPI files. By removing unused modules you might be able to save 100 kB in download size, most likely less - somebody installing your add-on will not even notice the difference in download size. Modules that aren't used have zero impact on performance of your add-on. But you risk removing something that is actually used, maybe in a non-obvious way. And once AMO starts repacking SDK add-ons automatically they will replace your add-on by the standard package anyway.
What is the difference between using ext-all.js and ext-all-debug.js?
Does changing to ext-all.js from debug.js improve performance?
Can I assume that switching from debug to normal file will not have any other impacts on the application?
Also, can any one suggest what ext-base.js do?
Ext-all is basically the minified verion of the debug one. The gain is that it greatly reduces the files size so that clients have to download less. Ext-base are the core functions of ext. If you only use those you could just include that file instead of the huge complete set in ext-all.
On the ext site there used to be a custom js builder where you would pick just the functions you need and it would create a custom js for you with just those modules
Ext-all-debug is provided so that you can debug through the extjs code. It performs extactly the same operations that ext-all.js does. Using ext-all.js will improve performance since the size of the file is much smaller, hence clients can download and access them faster.
Same is the case with ext-base-debug and ext-base.js. These contain the operations on which ext-all.js depends on, for example Ajax operations. Interchanging these files will not have any effect on your application.
Use the ext-all-debug and ext-base-debug during development. Switch to ext-all.js and ext-base.js when in production.
THIS INFORMATION HAS CHANGED FOR THOSE USING ExtJS4.1.
After implementing and optimizing an application, I like many, was confused with which process was optimal for 'production implementation'.
This most current documentation for this turned out to be this document on Sencha:
http://docs.sencha.com/ext-js/4-1/#!/guide/getting_started
It was difficult to identify, but the key for me was step #3. Deploying Application.
For which these four steps are conducted:
cd to root
sencha create jsb - this creates a manifest of classes used.
- it can also be modified prior to build, in case it is needed.
sencha build - creates two files(all-classes.js, app-all.js)
- all-classes.js is non min for review.
- app-all.js is the production ready file
Setup for prod - these are the remaining includes needed in your production file:
ext-all.css //minified-css, concatenated and dusted is optimal.
ext/ext.js //non-debug
app-all.js //minified, concatenated, app + framework files (only classes used).
Hope this helps someone. : )
differences between "ext.js" and "ext-debug.js" are:
"ext-debug" is not compressed (or "minified").
"ext-debug" is not run through the Cmd optimizer.
These files otherwise contain exactly the same code. Further, both flavors download required classes from the "src" folder. In short, both of these files are intended to support debugging.
In order to improve the performance,To reduce the downloads to as few files as possible you can use Sencha Cmd. some thing like this
sencha fs minify -yui -from=ext-debug.js -to=ext.js
For Cmd topics ext 4.2.2 doc set is the more current and you can access the dec here
hope this may help you.
Right now, I’m working on a legacy web application that is made up of multiple screens, each one performing a separate function. I’m in the process of converting several of the screens to EXTJS 4 using the MVC approach. In order to isolate the impact of my changes and because we don’t have time to convert the entire app at once, I’ve converted two of the screens into two separate EXTJS 4 apps. Each screen now has its own folder in which I’ve set up an app using the appropriate file structure and app.js file.
My question is this: as I continue developing, I may want to use models from one app (screen) in another app. How do you share models, views and controllers between applications? What’s the best approach?
FYI, I’m using autoloading to pull everything in.
Thanks
I would not use autoload in production, because it generates to many HTTP requests to get all files, which slows down the page load speed. This is well documented at Google's Page Speed and Yahoo's Best Practices for Speeding Up Your Web Site.
The best practice is to preprocess the resources upon deployment of the application and generate a single javascript file with everything in it that is sent in a single (GZIP) compressed response. There are several tools for this job, but it depends heavily on your toolchain. You can for example have a look a the SO question Best JavaScript compressor to get recommendations for various compressors (I use Jammit).
When you have a flexible configurable JavaScript compressor in your toolchain, you can set up a shared folder where you have your common files, like model, stores and some libs. These are now included in the builds for the different projects.
In case you have a good reason to serve single javascript files, you can either use a good version controll system like git and make use of submodules. Which this approach you'll have a separate repository for common files. This gives you the downside of slower page speed and a little overhead with updating the submodules.
As last solution, you can use a symbolic link on the file system to link the common folder to the different other projects.
Here's what Saki said to me on the Sencha Forums:
The multiple applications on one page, or sub-applications of Ext MVC
are not supported yet, however, developers are working on this
functionality, AFAIK. Such implementation would most likely solve also
the problem of re-using models, views and controllers among (sub)
applications, I hope.
More specifically regarding linking multiple applications:
I would just soft-link files of MVC components is this case. There's
no logical or functional connection among them now, only I wanna reuse
already written file, right?