Can Javascript detect UWP? - javascript

I'm building a little game using NodeJS and EaselJS that runs great in-browser, locally hosted. I downloaded Visual Studio and started the process of creating a UWP from it so that I can play on my Xbox One. Visual Studio is basically just the middle man, as I am using the "Start Page" and pointing it to my locally hosted web server to create the app, rather than try to re-invent the wheel.
I'd like to take advantage of some of the Windows.UI functions ONLY WHEN it's run as a Window/Xbox app, specifically the Overscan ability for display on a TV. So far I've been unable to get the JS to detect the execution type. I've added
if (Windows)
{
Windows.UI.ViewManagement.ApplicationView.getForCurrentView() ...
}
but when I run it in a regular ol browser I get a Reference error of Windows being undefined. I also tried
if(typeof Windows !== 'undefined'){....
which makes the browser version work fine, but deployment tests in Visual Studio don't see it either (I put a debug console output to make sure).
Is it possible to have a best of both worlds execution, or do I need to go full bore and develop a specific version of the game in VS to get what I want?

Figured it out. The if(typeof) solution is partially correct, so points there Shawn. What I was failing to do is include WinRT Access to the URI in the appxmanifest inside of Visual Studio. Once I told it to actually look for Windows on the app side, I'm getting my debug output and the screen is scaling appropriately. Thanks for having a look see anyway!

I can think of two possible options. First check the type of the object:
if(typeof Windows != 'undefined')
{
}
Second, declare a variable Windows before your check(s). It's ok to redeclare a variable in javascript. It won't override the original.
var Windows;
if(Windows)
{
}

Related

Minimizing apps via nodejs || plain js

I'm currently working on personal automation project and I want to add 'minimize app' feature.
For example: When I click button, I want to minimize the current browser. I already have window.close(); but this will close the app definitly. I found things like window.minimalize(); or window.minimize();, but none of them worked for me. So is there a way to minimize app?
Edited: It does not have to be only client-side JS, it can be used as terminal based nodejs app. Ex: I type minimize Google Chrome, and it will minimize it.
One Google search for how to minimize browser gives the following result:
There is no way to minimize the browser window within javascript. No, there isn't. However, depending on what you're doing and which browsers you're targeting, you could play around with the blur and focus events of the window to achieve similar effect.
Alternatively, if such control is required, you could always port your code to Electron.js or Neutrino.js, which were made to let you create desktop applications using JavaScript.
Maybe if you post some code and give us a train of thought to follow, we could work something out.

Debug JS from a Browser within a Windows App

today I am asked to write some Javascript for a Website which runs within a Windows App. The app uses a browser internally (I guess some version of IE) to render its content on screen, what is represented by a static/local website.
The main Problem is, that there isn't any way to debug that, what is normally possible with the default developer tools of each browser.
So my question(s): Is there any way to start the developer tools by JS, in case the browser internally used is IE? Are the any other ways to pull some debug data out of the app, such that I could view that output anywhere else?
So in case somebody else has already dealt with a problem alike, I would really be interested to get some ideas, how to solve that properly.

How to debug Nodejs/Expressjs(MEAN stack) [duplicate]

I'm looking for effective way for step-by-step debugging NodeJS server code. At this moment I use dozens of console.log()'s and it's extremely hard. The perfect tool is one that would allow me to check the values of every variable in stack and trace my program line by line. Prefered OS = MacOS/Linux. Is it possible?
Basically, Node.js is built on top of V8, so its debugging capabilities are also built on top of V8's debugging capabilities.
V8 has an included debugger which can be accessed via TCP on port 5858.
So basically all you need is a frontend which is able to connect to port 5858 and talk V8's debugging protocol.
One option is to use node-inspector which basically provides a debugging UI in your browser. Unfortunately, it does only work with Google Chrome and Apple Safari (which for me is no problem, but there may be others ;-)).
Another option is to use a plugin for Eclipse.
And, last but not least, the built-in debugger of Node.js (which always reminds me of MS-DOS's edlin) is also just a front-end for this TCP debugger, just a built-in one.
And of course, there are much more options ... these three were just the first three ones that came to my mind ;-)
How about this?
You can try to test for Nodeclipse version 0.2.0 beta.
http://www.tomotaro1065.com/nodeclipse/
It will help you to debug node apps easily.
GENERATING OF EXPRESS PROJECT
Select the [File]-[New]-[Project] menu.
Select [Node]-[Express Project], and push [Next] button.
Enter [Project name], and push [Finish] button.
DEBUGGING
Open the JavaScript source files that you want to set breakpoints.
Double-click on the ruler at the left end of the line you want to set a breakpoint.
If you want to remove a breakpoint, double-click on the ruler again.
Select the main source file of Node Application on the Project Explorer,
open the context menu by right-clicking,
select the [Debug As]-[Node Application] menu.
Use node-inspector to provide the node debugging environment you're looking for. It's fantastic.
Check WebStorm. It is a great IDE, and also you can directly run your nodejs code, or connect to a debugging-enabled node process already running. In both cases, WebStorm provides what you are looking for: trace program execution line by line and on every line check the state of every variable.
Try nodeunit npm module for testing nodejs server side codes.
Even though question is very old, there is a awesome IDE from Microsoft "Visual Studio Code" which is developed in intention with Javascript (Typescript) which is capable of debugging Node JS projects
Checkout this link https://code.visualstudio.com/docs/nodejs/nodejs-debugging
node inspect built-in CLI step debugging
It took a while, but at some point Node finally added built-in debugging:
node inspect main.js
and this leaves you at the first line of the program.
Navigate with:
n step to next line
s step into function
c continue
o step out
h get help
In order to view variables or inject code, you need to first enter REPL mode with:
repl
and then you can run commands as in a node interactive session, e.g. to see the value of a variable just write the variable name:
myvar
It is awkward to have to type those four characters repl all the time, but I don't know any alternative.
You can also add a debugger statement to where you want to break in the program after a c:
const i = 1;
debugger;
i = 2;
Related question: How do I debug Node.js applications?
Tested in Node.js v10.15.1, Ubuntu 19.10.

What happens to JavaScript code after app is compiled using Titanium Mobile

I installed Titanium from appcelerator and built the "KitchenSink" example application.
All works well, I'm just wondering where does the javascript code ends up in a built app.
I grep-ed the Xcode project and also the result application as I found it in Library/Application Support/iPhone Simulator/....KitchenSink.app, but I can't find any function names from .js files, not even string texts used within the application.
Nearest information I found is an answer here : How Does Appcelerator Titanium Mobile Work? but I do not understand clearly how the process works.
Is the javascript code being compiled into a binary code (what compiler is used then?), or is it just transformed in some special data-format and interpreted in a running application ?
Update:
This is what I can see in a build/android directory of KitchenSink:
michal:bin mac$ find . -name table_view_layout\*
./assets/Resources/examples/table_view_layout.js
./assets/Resources/examples/table_view_layout_2.js
./assets/Resources/examples/table_view_layout_3.js
./assets/Resources/examples/table_view_layout_4.js
./assets/Resources/examples/table_view_layout_5.js
./classes/org/appcelerator/generated/examples/table_view_layout.class
./classes/org/appcelerator/generated/examples/table_view_layout_2.class
./classes/org/appcelerator/generated/examples/table_view_layout_3.class
./classes/org/appcelerator/generated/examples/table_view_layout_4.class
./classes/org/appcelerator/generated/examples/table_view_layout_5.class
michal:bin mac$ unzip -t app.apk | grep table_view_layout
testing: assets/Resources/examples/table_view_layout.js OK
testing: assets/Resources/examples/table_view_layout_2.js OK
testing: assets/Resources/examples/table_view_layout_3.js OK
testing: assets/Resources/examples/table_view_layout_4.js OK
testing: assets/Resources/examples/table_view_layout_5.js OK
I didn't look into app.apk before, all I could see were these class files corresponding to each of the javascript files. Therefore I assumed that on Android javascript is being compiled for JVM. Why can't these be found in app.apk ?
Titanium is not a wrapper around a web view as stated before (though that accurately explains how Phonegap works). Jeff's answer, linked in the question, is a technically correct explanation of how Titanium works, but here's the best version I've heard so far, from Marshall Culpepper:
It's true that Titanium Mobile used the WebView (in both Android and iOS) in the pre-1.0 days. However, this is no longer true and hasn't been since our 1.0 release is March 2010.
Since 1.0, we've shipped two separate Javascript runtimes with our apps, and we are running the Javascript code directly without a WebView. Your entire app from start to finish is now controlled by JS, and we provide a comprehensive set of Native APIs that enable this. Everything from UI widgets (yes, including WebView), Core APIs like Networking, Filesystem, Database, all the way to OS-specific things like JS Activities in Android. On the JS runtime front, we're shipping a forked version of WebKit's JavaScriptCore in iOS and a snapshot of Rhino 1.7 R3 CVS for Android. What we actually do with your javascript source is dependent on the platform, but generally it breaks up like this:
Source is statically analyzed to find references to Titanium modules
Localization strings (strings.xml), App metadata (tiapp.xml), and density specific images all generate platform specific analogs.
In iOS:
An XCode project / configuration is generated
JS Source is base64'd and inlined as a variable into a generated C file
xcodebuild is used to generate the final binaries
provisioning profiles, signing keys etc are applied
iTunes and some other glue are used to send the IPA to your iOS device
In Android:
An Android / Eclipse project is generated
In "Development" mode, JS source is packaged as APK assets
In "Distribution" (production) mode, when you're ready to ship the app, we compile the JS to Java bytecode using the Rhino JSC compiler. You can also enable this during development mode by setting "ti.android.compilejs" to "true" in tiapp.xml, see: http://developer.appcelerator.com/question/100201/enable-android-byte-code-compile
dex, aapt, and other Android SDK tools are used to build and generate the final APK
adb and keytool are used for pushing the APK out to the emulator and/or device
There are many more details that I could dive into specifically on each of these points, but the point I wanted to drive home is that we no longer use the WebView as our Javascript engine. You can however still embed WebViews, and we provide some simple integration that allows you to call Titanium APIs from an embedded WebView.
What jhaynie is saying in your linked question is that Titanium interprets your JS code and converts it into something that is almost identical to Objective-C.
In a web application, the browser reads and interprets your Javascript and runs associated native code (perhaps C++) internally. For instance, the browser might say, "This script is executing getElementById(), so I'll run my own C++ methods to accomplish that." What Titanium is doing is figuring out what that JS->C++ (or in this case, JS->Objective-C) would be in advance, and compiling that. It still leaves an interpreter open where necessary for your dynamic code, but it will convert and compile what it can.
That means you won't find anything that looks similar to what you originally wrote in your script. Anything that must be left to an interpreter is still processed and converted, and your symbols will change (e.g. a call to myTestFunction() might be converted to A(), or 10001101001101 :P).
The usual use of Javascript is to have it interpreted real-time by a running program. That's not what's going on here, and that's why you can't see any trace of your script.
Javascript is pre-processed
Titanium performs the interpretation of your script as any other program would do (such as a web browser). It figures out what dependencies your script has on the Titanium API and sets that stuff up. It then maps your symbols directly into (in the case of the iPhone) Objective-C.
A program usually would read in your script (which is a simply a String), interprets it, and runs C code to accomplish what your script asked for. Titanium does this before-hand to figure out what C code should be run, and does the conversion in advance.
Code is compiled where possible
Based on the interpretation of your code and its dependencies on the Titanium API, Titanium figures out what code can be directly compiled, and what must not be compiled in order to allow for they full dynamics of Javascript. I don't know how it chooses what does and doesn't get compiled, but you could check out the source if you want to know that much detail.
Code that must still be interpretted (left as a script) is still converted into symbols that result in more efficient mapping to native code. So it's still an interpreted script, but that doesn't mean it's still Javascript. This means that these parts of your script will still run faster than usual Javascript.
For iPhone, the compilable C is compiled with GCC to create a native binary.
You have a runnable app*
Now you have an app that you can run on your mobile device. Your compilable code has been compiled and runs at lightning speed, while the rest is converted and still interpreted in a more efficient way which runs at near lightning speed. :P
I hope this makes sense now, because it's all I've got! :D

Best ways to develop painlessly in Javascript on a local machine

I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!

Categories

Resources