Windows Store App: Dynamically load JavaScript for easier update? - javascript

Recently I have taken over a Windows Store app project written in C#/XAML and one of its requirements is,
Migrating the project to Javascript/HTML5, and by making javascript dynamically loaded from our website, we can update the code logic as often as desired without having to prompt user to download a new version of our app. The deployed app is very simple and does not require update, each time the app launch it will try to load the javascripts and contents from the web.
This requirement is from marketing and they think it is fantastic if the app can be updated in this way. I don't know if this is a good idea, or even feasible.
My questions
Give me some reasons if this is not a good idea/not feasible
If javascript can be dynamically loaded, what about html and css files?
Edit
When I asked this question, I had not heard of Cordova, the idea of hybrid app was quite new at that time. With Cordova, we can write app that runs in this way. The web content (HTML/JS/CSS) is rendered in a WebView control and can be updated from the web each time.

In short, I don't believe the app can be written in this way.
The application code is part of the appx package when the app is deployed and if you wish it to be accessible via the store, it has to pass MS's app certification checks.
This ensures that the app code is is suitable quality and ticks the appropriate security boxes etc.
I don't believe you can dynamically load application code from a remote source, otherwise you could be loading any old unverified cack and this code would not have been checked.
However, the updating mechanisms are very simple as I understand it and pushing a new version of your app code to the store will allow users to update the app at their leisure and handle the process for you.
I think the best you can get in terms of loading things dynamically would be to load a webpage remotely in your app (the webpage could be updated as you wanted). This would not allow you to run application code from the webpage, and with the webpage being remote, it would run under the 'web context' from a security perspective, so you'd not be able to use a lot of the native functionality you could run locally.
If the reason for re-developing the app in JS/HTML is to load code dynamically, I would advise against it. There are not a huge range of differences between a C# implementation and a JS implementation, so it would seem inefficient to redo all the existing work in a different language.

Related

Do web applications made with Express.js need to be bundled for distribution? And what is the purpose for a distribution version of an app?

I hope the question is clear enough, I'll to to explain more in depth, but before that, I want to first say I'm new/fresh to web development.
I have been developing some apps on my own and have also followed some udemy courses and what I have had difficulty understanding is what is the purpose for a distribution version of the web app you are developing.
I first started a course that had some intro to PHP, MySQL, Wordpress, with a larger emphasis on HTLM/CSS and Javascript. The last project in this course was a single page website that used Webpack to bundle the project and create a distribution version of the project.
After this I followed a course which main project was a multi page app that used Express.js with .ejs , Node.js, Bootstrap and PostgreSQL, but I did notice there was no bundling for a distribution version of the app.
Last, but not least, I did another course that used React for the client side, and in the end there was a script for generating a bundle for distribution.
As I started moving my projects to a static server and getting them up and running forever with PM2, I stopped for a bit and was wondering why is there even a need for a distribution version of a project even needed if the websites look the same, but I assume the reason is so it runs more smoothly on a browser.
I'm just making assumptions here, but I assume the javascript from all the dependencies are put together on a single .js file or a small set of files to make it easier on the browser to process the website? Also for version control?
But if creating a distribution version of your app optimizes it for a browser, then how come Express.js doesn't offer this?
Maybe this is a very stupid question, I'm still confused by a lot of this stuff.
Maybe because they can do similar stuff, like webpack can throw up a server so you can see your app running, like React, but to access a database, you need to make an api call to a backend program like Express.js through axios or fetch. But Express.js is a server that can make query calls to a database and lets you see your app through views/.ejs.
Again, sorry if this sounds all really dumb, I just don't know anyone who I can ask these questions.

angular 6 Multi-Page App How to

I'm developing a complex information system, and our front-end stack is defined to use Angular Framework. I'm aware that Angular was planned and mostly suitable for Single-Page Applications. But at this stage, I'm facing an issue with MPA support from angular 6. Basically, our client's requirement is that to view certain element in a system, it has to be opened in a different tab because normally people will open multiple and use it to gather or compare elements between each other.
My current app is distributed among multiple lazy loaded modules, so my question is what is the best way to implement MPA support for angular, in order to solve this issue? I know that if I open a link in a separate tab, the whole application has to be downloaded by the client and only then he can view the particular page. Can anybody advice on maybe certain solutions for this case, or whether its possible to not download the whole app on a new tab? Thanks.
PS. I've browsed through the whole internet, but haven't found any solution for this.
I am working on a multipage app using angular these days. There we use normal location.href navigation for routing rather than using the angular router module. This way angular app can be used as a multipage app. When we do this, every time when we are reloading the browser, angular bootstrap everything and loads from app component onwards. So when you use lazy loading, you can limit the the no.of modules loading every time the browser refreshed. same happens when you open something in a new tab.
As suggested by #Suresh Kumar Ariya, server side rendering is to just render the static content of a page while the javascript files needed for the dynamic functionality of that page loads in the background. So I don't think this is what you are looking for unless you wanna just serve static content fast for user experience improvement.
What you can do is try to do more lazy loading to minimize the initial loading and optimize your code
You can also opt for Angular with Service Side Rendering Concept. So Data can be shared b/w client and server end. https://angular.io/guide/universal
Thanks everybody for advices, solved the issue with service workers, now all tabs are loading instantly =) thanks to #Patryk Brejdak

Detailed explanation on how React Native softwares are updated

I am developing a React Native application. it's a framework to build mobile applications with JavaScript and deploy for Android & iOS with the same code base.
I read somewhere that RN applications are dynamically updated. It means, without releasing new versions to AppStore or GoogleStore, we can update it. It is awesome!
But my question is: how can we do so? I searched a bit and found out that it is possible with Codepush. If so, how? Is it a free tool or we should pay for it? If it's not free, Isn't there a free solution to this?
Also, by updating dynamically, are we limited to update only JS bundle or we are able to update external assets like new fonts, images, and etc?
I would be thankful if an expert guides me by details and workarounds.
Cheers.
Like it explains in CodePush website;
CodePush is a cloud service that enables Cordova and React Native
developers to deploy mobile app updates directly to their users’
devices. It works by acting as a central repository that developers
can publish certain updates to (e.g. JS, HTML, CSS and image changes),
and that apps can query for updates from (using our provided client
SDKs). This allows you to have a more deterministic and direct
engagement model with your end-users, while addressing bugs and/or
adding small features that don’t require you to re-build a binary
and/or re-distribute it through any public app stores.
This means you can update your Javascript code remotely without submitting your app through App Store or Google Play.
This service is currently completely free and you can use it in your app without paying any fees. There are also couple of more systems that are payed or free but I have never used them so I can't say anything about them.
This service does not let you change or update any of the native code so if you add any native code supported libraries or write one yourself or update any existing native libraries or codes, you need to publish the new version through the stores.
This types of services also help you to do A/B tests and alfa/beta tests.
You can find much more detailed information at CodePush website and Google.
Codepush is free and you can use react-native-code-push to use codepush service. You can use its document to have this service on your app.

How do you wrap a web app as iOS app

I have this web app which works great on mobile browsers however I would like to allow this app being downloaded as "native app" through the apple app store.
My app basically consists out of three files which it serves to the client:
index.html
build.js
build.css
My research so far came to the conclusion that it is possible to do this by creating a web view with objective-c which executes the web app. Additionally you may use SDKs like phone gap to use native APIs (which is not required in this case).
Unfortunately I do not find a lot information on this by google, so I have following questions:
What is the "keyword" I am looking for (whats the term for "wrapping html app in object-c")?
Do I have to change the urls in my build.js (or can I overwrite current origin)?
Is there anything else I would need to change in build.js?
Are there any problems I should consider?
Is it possible? Yes. Will apple approve your app? Defiantly not.
From the App Store Review Guidelines:
2.12 Apps that are not very useful, are simply web sites bundled as apps,
or do not provide any lasting
entertainment value may be rejected
web shell, web app
Changing the urls for local path would work.
Depends on how build.js was written.
The above.
So what can you do?
Think how to improve your app with native code and add some functionality to it.
Focusing on the native code will help. If you'll submit an app that opens a UIWebView and that's it apple will 100% reject it.
I wrote an app for my company that wrapped a web app inside a UIWebView but had a lot of native code that would sniff the current UIWebView url and triggered functions accordingly. (Opened the cam, recorded audio, uploaded stuff to the server) so in the end it was very hybrid.
Apple rejected it with the claim that the user still sees only a webpage. I had to add a lot of other visible functionality in order for it to get approved.
Your idea seems like a very general and appealing idea for developers but as far as I know, these sort of applications are not taken very sportingly by apple app reviewer.
When I say these sort, I actually mean application which calls webpages as browser. For these type of calling browser is perfect.
Now lets talk about development. If you want to start with development then this is your takeoff place. As you have all your skills with HTML, JS and CSS, you'll rock with this development platform called Phonegap. and the beauty of this platform is you can import same build for other mobile platform as well.
Looking forward for some worthy applications. Good Luck!
Not sure, but the answers above may be out of date. The new app store guidelines do not include the quoted language about "websites bundled as apps." Perhaps Apple has eased up on this issue?
You can use a new tool called Natively It helps to wrap web apps to mobile native. They also have JS SDK to integrate with native features & pretty clear documentation.

How to create iPad application that reuses my JS libraries that are build for web application

So I am a web (Rails) developer, and I would like to create an iPad application for my site. The web application heavily relys on javascript libraries that are built specifically to interact with users in a unique manner.
Now I would like to transform that same interaction to my iPad application. I need a way to reuse my js files since re-coding the libraries will take forever. There are three options that I might follow:
1- Using Rhodes: built on ruby and inspired from rails.
2- PhoneGap: which is basically a web browser inside an app, so I presume that including js files would be possible.
3- xCode: which will take lot of time for me to learn and implement.
My questions are:
1- Can I import my js files in the rhodes project?
2- Which is the best to implement this?
3- Is there any other options that I should be looking at?
Any hints and pointers will be greatly appreciated,
Thanks a lot everybody
As i am not aware of the app you are developing & its design, Two approaches i see here as it is Rails,
Mobile Web
The existing web app shall be customized to mobile web (iPad & most
of the tablet in fact).
Create controllers specific to mobile/tablet. this shall connect to views created specific to mobile/tablet.
Detect the device/platform when HTTP request is posted and re-direct to specific views you have created.
Good thing is your JS is always the same(will need minor modifications thou) and dev time reduced significantly without learning new stuffs.
PhoneGap
You can pull up all the JS you have written and build some html/css integrate everything and build the project inside a phonegap template for iOS and create a on-device app and distribute. but the JS will undergo some changes here too.
But this will no way be different than mobile web and this comes other overheads like CORS and build/release, updates management & app stores etc.
Native APP
As you said, you got to learn iOS development (objC). you can create RESTful services in your rails end and expose them to the iOS app.
Rhodes i am not very sure, its little tricky and it depends on your existing web app too. try it before deploying.

Categories

Resources