Creating Desktop applications that run on web browser - javascript

In the last year I got to know that many developers started developing desktop applications that run on the web browser.
I am also trying to get into it and I'm trying to understand how I should start with such kind of development.
I first thought I should create a regular client-server application, i.e. with Apache Tomcat or with PHP, and for each launch of an application, to launch a new server on localhost and to open a browser that will load the application.
I've lately got to know that there are packages that do the server-client work for you, such as node-webkit.
I don't know where to start and I'm very confused...
When developers say that they develop desktop applications in Javascript or such that run on web browser - do they probably mean that the use node-webkit? Or does they do the complex structure I described above (JSP/PHP server on localhost) ?

Many development models with web technologies exist, but they have different purposes and it all depends on what you want to do.
You seem to be mixing 3 models
Classic websites
A server (with PHP, Java or whatever) generates HTML.
A user uses a browser to access it.
When the user clicks somewhere, the server is called again and generates another HTML file.
Single Page Applications
This model is often used when writing websites that need a lot of interactivity. For example Gmail, or Google docs are SPAs (more or less).
SPAs are websites (you can access them at an URL) where all templating is done client side, and the webserver only exposes a HTTP API.
Most of the times, people use frameworks to make those like:
AngularJS
React
Backbone
Desktop apps with web technologies
That's just coding an application that you can install on a computer or phone with web technologies (javascript, css, html).
There is no server.
Tools that enable programmers to do this are
Node webkit (for desktops)
Cordova (for phones)
Many others
Most of the time, programmers also use SPA tools in conjonction with those to help them during development

The selection of technologies for building an application depends on the use of your application and the platform you want it to run on.
Web applications in contrast to Desktop applications are hosted and served by servers (like Tomcat) which are then requested and present to you by your browser.
Desktop applications are running on your local machine and they are independent from your browser. However node webkit, allows you to design applications using HTML and making them dynamic using node. The end result is a standalone application that runs as a browser emulation that is able to render and run software based on HTML and javascript. (In this case nodejs serves the application locally and the standalone web-app is the client).
Long story short node-webkit emulates the client-server model that is used for classic web apps, to build desktop applications.
It is an unorthodox way for doing things IMHO, but it might be a good start for getting into application development.

Try this-
https://electronjs.org/
Build cross platform desktop apps with JavaScript, HTML, and CSS. With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker.

Related

Is there a way to safely scrape a single-page application (SPA) from the browser?

I've built a small tool to scrape metadata from web pages within the web browser using DOMParser. This works well for a lot of sites, but some pages, like a tweet page, do not have their metadata added until the attached JavaScript has loaded the data.
I know that I could setup some sort of proxy server running Puppeteer, but I'm looking for a solution that would work directly in the browser.
Protractor is a really great tool for scraping. It is primarily an end-to-end testing tool for web sites of all sorts (including SPAs), but what is end-to-end testing if it is not just fancy web scraping?
I've used Protractor to scrape dozens of sites in the past and it works flawlessly. Is easy to schedule, can run headless Chrome, or phantomJS so you don't even see the pages loading.

Load electron atom app inside of another electron app

I discover new frameworks for developing desktop apps. I found electron atom and it looks very well and matured. But I have one qustion:
Is it possible to host different electron apps in one big electron app?
in our .NET applications we have a "global framework" Form, which loads different applications in frames. But every application can runs for itself and can be compiled to an exe-file.
The goal is to write different standalone apps, but with the possibility to create a "suite". For example I have apps for notes, todo lists, calculating,...
and I will give the user the chance to get "all of them in one app" (the apps will display in different tabs for example).
Is this possible? And if yes, please provide some links to a guide or else.

Source visibility in ionic hybrid apps

I've just started learning ionic framework. It uses web browser capabilities for building apps.
These capabilities namely HTML, javascript and CSS are client side stuff. Which on browsers can be seen with view source.
My questions is how will be the visibility of the source? Will the end user be able to see the source of the app?
If yes, is it normal for any app? Shall one be worried about the security of the source?
The visibility of the source in chrome://inspect#device , is pretty much the whole application. And no, end user cannot see the source of your application once you set and push the project to production mode.
Well, since you are developing a hybrid application, there are of course, pros and cons for each. Security might not be as strong as native apps, but development time is greatly reduced to push the app to different platforms.
If you would to do something would requires high security and non-visibility of your source , then native is the way to go. As for hybrid apps,if you need somewhere to store your data securely, you will need plugins to communicate with native platform's secure storage which might pose a security risk. But then again, even native applications can be de-compiled. The way developers tries to make it harder is via obfuscation methods.
Once u set your application to production mode, you will not be able to inspect your application anymore.
To show your web-app on chrome://inspect/#devices :
1) Make sure your web-app is running and your phone is plugged into your computer via usb with USB debugging on and your PC is trusted by the phone.
2) Under device manager, you should not have missing phone drivers. (it would look something like this)
3) ADB should not be running co-currently. And you should be able to see something like this on ur inspect page:
4) Click on inspect button and you're done! (:
You have a signed apk, when you install it on a device and inspect the device on google chrome the inspect option will not be available. Theres an easy way to do that decompile the signed apk using apktools you will get the AndroidManifest.xml file. simply add android:debuggable="true" to the tag and recompile it resign it and you will be able to inspect it. If you check the main.js file in the inspect section the source code is visible.
Hence you can use Jscrambler to prevent this (Its a paid service i too am new to it)

Websocket server and Mobile clients

I have a Tomcat based server which serves as a Websocket end point (used javax.websocket) for my web based JS app. I am serving out json based data (queried from my database) via the web sockets. I am not using websockets to serve out HTML/JS pages.
Now we are building a native mobile app of our JS web app. There doesnt seem to be good native support for Websockets on Android and ios.
I would like to keep the server code base common to both JS client and the mobile client.
What would be your suggestion for such a situation? Write a different server for mobile clients?
I found this http://www.elabs.se/blog/66-using-websockets-in-native-ios-and-android-apps. They suggest SocketRocket for ios and https://github.com/TooTallNate/Java-WebSocket for Android.
I have never heard of these people / companies. Not sure of their antecedents and if their apps are bug free.
Any suggestions would be welcome.
I'm not sure if this is the answer you are looking for, but I tried this once, and decided to use a webpage that uses the websocket. Each app will display a webview accessing the page. All recent iOS SDK versions support this, but only the newer (4.4+) Androids will.
If you do not want to use webviews, I recommend Tavendo Autobahn for Android. I had a problem that my server's websocket would disconnect all the time. I had to implement a reconnection routine every couple of seconds on the app.
Hope it helps :)
I'm using this library on android for websockets https://github.com/codebutler/android-websockets
Works good with Spring WebSockets.
Sorry for messy answer, I'm in hurry, write in comments if u have questions

Do I need to rewrite my client library in Javascript?

For my IOS Application, the client interacts with the server through a fairly substantial client library in C. I am recreating the app on a website, and I was wondering if I needed to rewrite this library in javascript. Would it be possible to say, transfer the original static client library to the client through local storage and somehow execute it? Or to download it as a plugin (how would I do this)? This is just speculation. Any ideas for a possible solution would be very helpful. It needs to be client-side because it streams and decodes a video feed through tcp.
Thanks in advance
As you iOS application uses a library in C the only way (somewhat experimental) is to use Google Native Client which is a sandboxing technology for running a subset of Intel x86 or ARM native code safely from a web browser. But by now it is only available on Chrome.
Otherwise you have to write it in Javascript in order to be cross platform and run it from nearly every web browsers. Moreover you can modify our iOS application and make it hybrid, and then you can use the same Javascript library in your iOS application and in the client web browser.

Categories

Resources