Using HTML, CSS, JS with Python to make desktop application? - javascript

I recently made a program. It's developed using Node.JS and Electron to make it a desktop application. Unfortunately, Electron is quite big in base file size and I'd like to reduce the file size. I've looked at my app files before adding electron and it's around 38mb. When adding electron it's roughly over 100mb more than the original.
I've been looking into converting the program to Python to hopefully reduce the size of it. Though I only know the basics of Python such as how to declare variables and functions. I've seen stuff like Tkinter and stuff, but would I be able to use HTML, CSS, JS to make the UI of the program and use Python as the back bone(i.e. using materailizecss framework for the ui).
If so, how could I do this? Also, to make it clear, I don't want a web app, I'm looking for a desktop application.

YES. You can use QT standard library but if you persist on writing UI yourself there is an HTMLpy Library which can find here HTMLPY
htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications.
go through it and you will find interesting things

Related

Make a javascript 'code snippet' app an installable windows .exe using VS CODE?

Ive been learning html, css, js, php, mysql, (touched on node js but ran away from it - too much too soon) for a few months now and would like to make a simple categorized code snippet app as a learning project and to aid my crap memory!
I couldnt find a relevant answer so, hopefully its not a dumb question:
I want to primarily stick with js to get a good coding knowledge base so will make the snippet app using js, and .txt files as the storage. Using VS Code, what would be the best practice/method?
I know I could just make it browser based, but would rather have a little app I can pin to the taskbar, as im coding/self teaching full time atm.
The HTML, CSS and Javascript natively supported by browsers to develop Web Apps (You cannot run as a native app). The .EXE files are executable binary files of Windows. If you want to build Native Apps using HTML, CSS & JS, You have couple of options.
Electron JS
Electron JS is a amazing tool, To build cross-platform apps. You can develop your apps using HTML, CSS and JS and build it to any major platforms.
VS Code, Invision, MS Teams are built on electron Js
https://www.electronjs.org/
Use WebView on Native App
If you don't need to access any native function of the system, Then you can go with WebView. The web view is a feature to embed a website inside a native app. Most of the languages/frameworks have web-view support (Eg:- .Net).
If you are focusing on windows, Try .NET Web View

Ionic3 import external web hosted javascript library

I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.

How to convert javascript to Winjs

I am new to WinJS application. I can find many sources for html5, javascript and css. If I want to execute them in my WinJS application, what is the process? Is it necessary to change the entire code in WinJS? It seems like little complicated. Thank you in advance.
A Windows 8 HTML5/JavaScript application is exactly that HTML5 and JavaScript and you can (but don't have to) use the WinJS libraries. They do give you a richer native experience and awareness of the Windows 8 navigation model, but it's possible to pull in other libraries like jQuery, jQUeryUI, Knockout.js, Angular, etc. too.
Windows 8 HTML5/JavaScript applications are sandboxed so some libraries may break the rules for the specific context the app is running in, in which case you may need to make modifications and adjustments (e.g, what jQueryGeo did to adapt)
I'd recommend doing a little exploration of the HTML5/JavaScript samples and working through the App Builder program/curriculum that's targeted for HTML/JavaScript developers for more insight.
If you have a specific application/code you're looking to bring into Windows 8, create a new basic app, pull in the assets, and set the start page in the Visual Studio project's manifest; I suspect you'll have a relatively functional app that you can then tweak/build on.

Converting web2py based web-app into native app using Appcelerator, is it easy? possible?

Here is my problem:
Customer wants my current web application as a Desktop, possibly Executable but without browser for the Client part.
I looked into 3 of following :
Qooxdoo - Needs browser
Adobe Air - Needs plugin and Runtime
Appcelerator - Most interesting , builds into Native Client
Here are the main questions:
Client side:
What i have read on appcelerator is it builds things written in html and javascript
into native executable, so what i have already written (HTML + Jquery + Jquery UI + CSS) can be built into Native Windows / Linux / IOS executables without changes to current code ?
Server side:
No problem as it returms html and json and decided to keep running on server. But wondering how offline contents work.
I'm not sure this will actually work. From what I understand, titanium appcelerator provides a framework primarily for you to create applications on the iOS and Android platforms. I did see some things about the Desktop apps, but nothing about the application being automagically created from the source when your backend code is python (and web2py to boot).
I think it might be impossible to just drop your web2py app in and get a final product. For one, how will Appcelerator know that a given URL corresponds to a given controller and function? How will it perform searches on objects in your database? Do you expect it to read the DAL(...) connection string and just connect?
If you don't do ANY server-side processing, and don't use ANY datasources except for JSON, then maybe this would work. Maybe. But I highly doubt it will be automatic, or even all that easy.
It seems to me that you would have to hit every page and save the pages as html to a disc, and then drop the outputted HTML/CSS/JS markup into Titanium. But that means that if you ARE processing forms or searches, or doing anything interesting in the controllers, the titanium application will not have anything to process the server-side backend stuff.
That being said, titanium does work with php code, but not perfectly, And I see issues when using frameworks as opposed to raw php.
http://www.flickr.com/photos/funkatron/4011561849/
It didn't work that great, regardless. Titanium Desktop does still support PHP though, but developing an app with a server-side framework like CI is basically not going to work.
There was also something in the docs about processing python code, but all I saw was that you can place python in the "client" end of the HTML using a script tag as such:
<script type='text/python'>
# ... python code ?
</script>
(ref: http://developer.appcelerator.com/doc/desktop/python )
But that's not going to help with a web2py app.
IN SHORT -- I advise you download the app and create a hello world project. Then follow a tutorial on migrating or converting your application to Titanium. You'll probably have to rework a lot of things, and I'm not sure how you'd get the execution environment required for web2py, so you might have to rework some of the basic GLUON code which web2py is built on.
Sorry :(
You can, however, probably find a way to create a Java application that includes a copy of (a) rocket webserver, (b) python 2.5 or greater interpreter (c) web2py framework, (d) web2py application and package all this in such a way that it runs inside your java application (which will run on any platform) and shows an HTML view to the enduser. Then you could maintain it as a web2py app and just copy the app to your java bundle. I'm not sure if that's any easier in the end, but it looks like you'll either have to port to Titanium or Wrap with Java (or another language suitable platform-agnostic language).

What (kind of) project could I create to learn JavaScript?

I started learning JavaScript a while ago. It's a fairly easy programming language considering that I learned Java in university, that I know php pretty well and that I already played around with python and ruby. The problem is that to properly learn a programming language I usually create a project. In javascript, I just don't know what kind of project I could create - that is, a project that is not web-based or related to the web browser. Can I create javascript shell scripts? Where is javascript commonly used beside the web browsers?
So, can someone actually give me some ideas please?
Can I create javascript shell scripts?
You bet!
On Windows, you can do this by using cscript.exe (you can even set up a file extension -- I use jx -- that automatically runs when you just double-click the filename or use it as a command in a shell: Just associate that file extension with the command "c:\WINDOWS\system32\cscript.exe" /e:JavaScript /nologo "%1" %*). This is (and I've measured carefully) about 80 milion times better than fighting with Windows' batch language. About. (And if you don't want to use JScript — Microsoft's variant of JavaScript — you even have options, see below.)
On *nix, a shell script can be set to run in any installed interpreter (that's what the #!... line at the top is telling the command interpreter). I expect you'll find a few if you search around.
On the Mac, you probably have JavaScriptCore installed in /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc
And on all of the above, if you like, you can install Rhino and Java and get platform independence and access to a huge range of library functionality. Rhino has a built-in shell, or you can tell it to execute a specific JavaScript file. It interoperates with Java, so if you do this, you have easy access to all essentially of the functionality available to Java.
Where is javascript commonly used beside the web browsers?
I use it for shell scripting on Windows. I also use it as a server-side language, for instance in the server-side part of a web application. It's also used in other environments where a lightweight, powerful scripting language is useful, such as in the MongoDB shell environment (you can use it to query MongoDB data) and stored procedures.
All of that said, writing a browser-based project is a rich, interactive way to learn the language.
windows Sidebar Gadgets, Apple's Widgets, and Google Desktop Gadgets are all created using HTML/ JS/ CSS.
I learnt Javascript by creating a few small Windows Sidebar Gadgets.
Getting Started
Sidebar Reference
You could use javascript to make HTA (HTML Applications) that can be run outside of the the web browser sandbox. MSDN intro to HTA ApplicationsJavascript Tutorial on HTML Applications
You could write a non-blocking TCP server.
Node.js supports that.
Common uses of javascript outside of browsers are WSH scripts and HTA applications on Windows and Dashboard widgets on Mac.

Categories