I used Sencha 1 in the past and I am going now for Sencha Touch 2... And I am interested in using Sencha Cmd...
So... I did the basic sencha command:
sencha generate app Nameofmyapp path/to/myapp
And when I try to load the website... it takes over 10 seconds to load (and it has no functionalities). I have seen other people having the same issues than me, and I found the most useful answer here (and it solved the problem):
Sencha Touch 2.2.0 loads very slowly. Is it normal?
But it's nonsense... Is it not possible to make it run faster without needed to minify everything? Is there something Sencha cmd does that I should erase because it's too heavy and useless?
Should I not use Sencha cmd?
Well, I think the minification isn't the problem, rather that all components (wether you use them or not) are loaded from separate files. The hundreds of requests take time. When you build your app with sencha app build production all (and only) the required components are concatenated into one big file that loads quite rapidly.
Have a look at the docs at Using Sencha Cmd with Sencha Touch that state
Sencha Cmd automates all optimizations for your application, including the following:
Resolving dependencies required by the application and only including exactly what is used for optimal file size/performance.
Enabling HTML5 application cache via automatic generation of "cache.manifest" and resources checksum.
Minifying all JavaScript and CSS assets.
Storing all JavaScript and CSS assets inside local storage on first load and patching them via delta updates between releases.
As a result, your production build can load instantly on subsequent access and updates on the fly with minimal network transfer.
Edit: There is a way to speed up development by changing sencha-touch.js to sencha-touch-all.js in your app.json file under "js". Next use the Sencha Touch Cmd command sencha app refresh which updates your bootstrap.js file. Now all components are loaded from one single file. You need to change this back before building your app though, otherwise all components will end up in your build even the ones you are not using.
Related
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.
By default, when a React Application is deployed, the cached version will display, even if changes were made in the new build. This requires the end user to hard-refresh their page (Ctrl+F5) to see new changes. It is not feasible to have a user do this each time.
With the constant upgrades and speed of software evolving, there are many different ways to accomplish this. However, the answers widely vary due to different practices being used each year.
What is the best practice to accomplish this in 2022? Is there a short and easy way to do this?
Edit: I am using the create-react-app project template.
This has to do with broswer caching the old pages and not React, to avoid this you need to either force refresh as you mentioned or changing your build strategy with some sort of different file naming, this can be done by using webpack caching here https://webpack.js.org/guides/caching/.
This way your scripts will have different names with each new deployment and the browser will ahve to reload the new scripts when fetching the index.html.
I'm developing an application in ReactJS where I quite often push new changes to the the application.
When the users load upp the application they do not always get the newest version of the application causing breaking changes and errors with the express backend I have.
From what I have researched you can invalidate the cache using "cache busting" or a similar method. Although from all the questions I have seen on stackoverflow they have no clear consensus on how to do it, and the latest update was sometime in 2017.
How would one in a modern day ReactJS application invalidate the browsers cache in an efficient and automatic way when deploying?
If it's relevant, I'm using docker and docker-compose to deploy my application
There's not one-fits-all solution. Pretty common is adding some random hash to the bundle file, which will cause browser to process the file again from server.
Something like: app.js?v=435893452 instead of app.js. Most modern bundle tools like Webpack can do all of that automatically but it's hard to give you direction without knowing your setup.
I'm new to qooxdoo. I'd like to use it for an embedded web interface for an application I'm developing right now.
To keep building my application as easy as possible I'd like to stay away from using the python build scripts after every change if possible. Because the website will only be used once in a while by a single user load times etc. are also not a big concern for me.
I've read about the "build-all" target but could not find a detailed description on how to activate it with the current release. Can someone explain how I can get a complete desktop build of qooxdoo?
You don't have to run generate.py every time you change the code, only every time you reference a new class. During development it's usually relatively infrequent that you have to re-run the generator, compared to how often you will do the edit/save/alt-tab/refresh/test cycle.
But you can do what you're asking during development by using the "source-all" target, eg:
./generate.py source-all
When loading an app from a file:// url this is fine because file:// URLs are very fast, but you can optimise this manually by modifying your config.json to incorporate specific sets of classes.
To do this, in your application's config.json, add (or edit) a job called "source" and add:
"jobs": {
"source": {
"include": [ "qx.ui.*" ]
}
This will cause all of the qx.ui.* classes to be included into the ./generate.py source build of your application; obviously you can fine tune this further.
When it comes to deploying your application, use ./generate.py build because this will produce a minimised, optimised version (with debug code removed etc) which uses only those classes that are required.
If you are still looking for a build version of Qooxdoo, here is my qxSimple project. It includes some examples.
http://adeliz.github.io/qxsimple/
You can also generate your own build version following these steps :
Dowload the latest qooxdoo release
Go in the framework folder
Edit the config.json file
uncomment the //build-all line
run generate.py build-all
Are there any known procedures to achieve this. Application is being automatically build by Jenkins. Only possible way I could remember is changing file names but this is not preferable option.
I would probably go for cache manifest file. Ext 5 production build already contains some basic setup, however, you would need to adjust it to your needs.
Rule of thumb: If the manifest file changes, the app is refreshed.
For more info see A Beginner's Guide to Using the Application Cache or google for "cache manifest".