Should I create a single file app? - javascript

I have a website and I am creating an app for it using phonegap? So far I have have been updating my files and build the app every time I want to do a minor change.
My question: what is the downside to create a single html page with js (angular is) that will check the app version and download all pages needed?
Note the pages are to be cached for long time (month- year) if the version was not updated.
Thanks

There is no problem in doing that, in fact, is more safe in case that you have calls to APIs that you dont want to be visible to users, even some major apps do that in some cases.

Related

Is there a thing such as "packaged web app"?

Let's say I have a HTML/JS application, which is on a website and runs without any server-side component (except the web server, of course). So it's basically just a bunch of .html, .css and .js files (and some others, like images or SQLite databases)
Someday, an user comes to me to ask me if I can make an offline version, so they can access the app when they are offline.
My first reaction would be to provide them all the files of the app in a .zip file or something, but this is not really good: it's not "clear" to an average user, and the files and code are apparent (which could be "dangerous" if the user edits or deletes them by accident).
So I was wondering: is there a kind of format that would makes me able to store the files of the app in a packaged file?
The file would be something like a .zip file, but when you click to the file, instead of opening up the archive, it opens the /index.html (or similar) which is inside.
So for the user, it would be similar to open an .exe or a single .html file, but still that's not a native app, as that's still a browser app.
Given that I know about:
Apache Cordova; but most of the time, I just use the browser functions, and I don't have a need to use advanced native functionalities;
UWP and PWA, but I don't know if it's exactly what I want (I imagine it as a mix of website and mobile app, but I'm surely wrong);
Open Web App (a standard from Mozilla), but based on what I've read about it, it seems deprecated and not used anymore. Plus, I don't really look forward to "certify" my app... I just want to package some files.
PWA I don't think is a solution to your problem as you wont be able to redistribute the code as an executable package.
UWP would be too Windows specific and might make you lose the platform independence that you already have since you are using plain HTML and JS, plus from what I understand you would need to distribute the app on Windows Store.
I believe packaging as an Electron app would be the best solution as you can provide executable files that can be executed in almost all platforms.
Electron would be the best solution for you. I had a client that first wanted to run app on php server and eventually they figured out they need it as a desktop app. It was easy to rewrite php stuff to node and package as Electron app. You have access to everything files, system etc. so you can do more if needed.
Another solution would be to just inline everything into a single html file.

Advantage of using lazyload?

So i stumble on this component called lazyload.
What does it do and advantage and disadvantage of using it ??
Just curious about it because i watch some of john papa's videos and he keep mentioning it.
They idea of lazy load is that you only load something when you need it.
For example: at startup of your application you might not need a library to validate your form fields. (you only need it when someone actualy fills in a form and submits it).
Lazy loading makes sure its only loaded when needed.
The Plus:
Reduced start/load times & size.
Packages/data that are not used by the current user, will not be loaded.
Minus:
You have to have more seperate packages you can't minify and bundle them together.
More request to the server (because you can't bundle them).
could have a load on first use experience, the first time user does something the application needs to load some extra stuff.
conclusion & advice
So consider the size and the lifecycle of your application. If the application is small and you package all in one. probably the simplest approach would be to package everything in one. it's a bit of a longer load time, but after that the javascript gets cached in the browser anyways so it doesn't matter after first load.
Reasons you want to lazy load:
You want to be able to update seperate parts of the applications (thus not bundle it)
Application becoming problematically big. you want to cut it up in smaller parts.
You don't bundle your javascript files (great example here before angular was requirejs).
You have a lot of different types of users using the system each with completely different set of scripts.
Every page uses completely different set of javascript. (not likely when you use angular)

Browserify bundles

Every time we release a new version of our software which is bundled using Browserify, we are finding that we need to ask our users to clear their cache using the regular methods of CTRL+F5 or diving into the browser settings. It is not ideal when there are a thousand or so users. We are trying to work out a way that we can perhaps get around this. I am open to all sorts of options.
Our project is ReactJS based, so runs in the browser and connects to back end services via a RESTful API. We do track which version is loaded and this is visible from within the console. Using the version number we can compare on two different machines that one user is running the latest version whereas someone else may not be.
The code is bundled into two separate files and I feel that this is where we should be looking.
You need to change the file name on each new release.
A hash of the file is an appropriate thing you could add.
Check out md5ify to add this to your project build.
If you implement this yourself, make sure to also load the correct filename in your index.html file.
Edit:
To automatically load the correct file you need to have a placeholder in your main html.
Then you need a manifest.json file that looks like following:
{
"main.js": "main.[HASH].js"
}
This has to be created automatically after the bundling.
Now you can replace the placeholder with correct asset by doing a lookup in the manifest file.
You either have to write your own scripts for this or use something like gulp together with browserify.
Another solution would be webpack

Oracle Weblogic - How to work on UI without building the entire solution?

I'm a UI developer with very less knowledge in server side. My current work included Oracle Weblogic server, with Java coding language.
The problem is, for each minor change that I make in UI file like js or html, I need to stop the server and rebuild the entire solution to see the change. This is taking a huge effort from a UI perspective.
Is there any way to work on UI files without building each time ?
Go to _WL_user directory (e.g. Oracle\Middleware\user_projects\domains\<your _domain_name>\servers\<server_name>\tmp\_WL_user\<application_name>). In one of folders below (e.g. <...>\war\WEB-INF\jsp), you should find your UI files which you can modify. After reloading a page results should be visible in a browser.
Well, you could just connect a debugger to your server from your IDE so changes you make are pushed remotely, but it's not an elegant solution (and there are things it can't handle and you'll need to bounce the server anyway)
Use Split Development Environment in exploded folder. Then, all you need is to write one file .beabuild.txt and map virtual JS/CSS paths to your source folders.

automatic javascript versioning to avoid browser cache clean

My web application uses a bunch of javascript files and I want to version them as and when different releases of my app are out. This is so that the users do not have to clean the cache everytime I publish a new js with my release.
Example for version 0.0.5 for my app I want all my js to be inside app/js/0.0.5/common/ etc
I am using maven. But have no clue how to automate this kind of versioning. I know one thing for sure, will need a replace plugin to replace all tokens in my jsps to the right version number at build time.
You can force browser not to cache files that may update in future like this:
<script src="/app/js/0.0.5/common?nc=<generate unique string here>"></script>
so src will be different every time so browser will not cache this script

Categories

Resources