Is there an easy way to get the javascript functionality out of React Native without the view portion? I looked through the source and found what seems to be the relevant pieces (namely the cxxreact package), but am having a hard time following how it fits together.
I am trying to run javascript in a native app without a webview. I've found J2V8 and AndroidJSCore, but they seem like they're going to require a lot of work to make generic enough to run arbitrary javascript.
I believe React Native already solved this (especially surrounding api calls) and would like to reuse that portion. Is there anyone who has done something similar or can point me to something more full-featured than just J2V8 or AndroidJSCore?
Related
I am trying to build some UI in front of an existing java code base. The UI needs to change/update dynamically as the user interacts with it.
I am familiar (no more experience than that) in writing javascript / jquery based UIs. React appears to be very intuitive and I did a quick (and almost complete functionality that I need) prototype in the last two days - I guess seasoned React developers might only take a few hours to build what I came up with so far.
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
Did I get that right?
I read about Babel standalone, but it is not recommended on production envs.
Since I already have a backend (to be honest, even if I had to build it afresh, there's at least a 70% chance that I will choose Java)
From the current app, all I need is a dynamically updating user interface that interacts with my java backend.
The question
Is it possible to pre-compile the current React app I built into a bunch of pure javascript files?
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
This is only true if you're deliberately using server-side rendering instead of the (more common) method of simply compiling the code to plain JavaScript and serving that compiled code. Once the code is compiled, that's it - you don't need to use Node anymore.
It'll be perfectly fine to have a Java backend for the live server while also using Node only when you need compile the React code (which can be completely separate from the live server). A common framework for beginners for compiling React to plain JS is create-react-app.
I have a pure javascript library that users can install via npm. I want to add/create an Angular "wrapper" to this library so that it can be used seamlessly within Angular projects but I am not sure how to do this. I am using Angular-cli v6.
This is very similar to How does one go about creating an Angular library wrapper for an existing Javascript library?, however the only response is a link to ng-packagr. I have done a few tutorials on creating a library with ng-packagr, however they don't describe (and I can't find examples elsewhere) of how to create a wrapper around a non-Angular JS library.
Any help is greatly appreciated! :)
An old question but I love it. There's no one simple answer to it, so here's how I did it:
Short version
Read about the internals and how I wrapped the Google Maps Javascript API library
Long version
The following is very abstract, but this is an abstract question, so here goes...
The basic things you probably need to implement are:
Detecting changes in your Angular library and delegating them to the native library.
Detecting native events and bubbling them into your Angular library.
Switching execution in and out of Angular using NgZone.
Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc.
The question arises: "Am I supposed to manually write all that code? Am I seriously going to write a method for each native method?? What happens when the native library changes implementation? I would have to change my code everywhere... 🤔"
To simplify and make your wrapping library scalable, you could automate the wrapping mechanism (one way is using a Javascript Proxy) object.
Combine it with TypeScript's utility types and extension interfaces, and you can create a class that automatically delegates calls to the relevant native object/function, AND you'll get intellisense (for methods that you didn't need to manually implement in your wrapper!).
Here's a more detailed explanation with examples
For events delegation, you could create a mechanism that generates observables (or EventEmitters) for your native events.
In some cases you should consider using NgZone.runOutsideAngular() to prevent unnecessary change detection runs for code that is executed in the native library. On the other hand, you should consider using NgZone.run() to bring execution into Angular's zone when running native code that should enter and affect change detection cycles.
My Angular Google Maps library is open source and you can have a look. I have implemented some very interesting architectural mechanisms in it.
Anyone running into this post and wants more details or help is welcome to contact me.
Cheers 🥂
Coming from the js/cordova based cross-platform universe, I am digging into flutter lately. So I wonder about the options to make use of the various js libraries in flutter directly. More concrete I am interested in using the openlayers library in flutter to create a versatile map view with various functions for drawing and editing. So I wonder what options are there to include it.
So far I see two major ways:
Using a webview:
Even though there is no native webview widget yet in flutter there is a plugin for this (https://github.com/dart-flitter/flutter_webview_plugin). The main advantage I see here is to use the openlayers library "as it is", however the plugin is in kinda early state and I could not see a way to establish communication between flutter and js functions in the webview yet. Futhermore (this is just my assumption) using the webview is probably slower than creating a proper widget with dart code.
Creating a custom widget:
I have seen there are ways to convert js code direcly to dart, using package js (https://pub.dartlang.org/packages/js) and for typings js_facade_gen (https://github.com/dart-lang/js_facade_gen) like it is done with the chartjs library (https://github.com/google/chartjs.dart/). So similar to this it should be possible to automatically convert the openlayers lib to dart. The main issue however is to integrate this into flutter, since openlayers is using a html5 canvas if I'm correct. Also the chartjs.dart package does not giva any hints how to include it in a flutter app. I've also seen there is a leaflet plugin (https://github.com/apptreesoftware/flutter_map) which is creating their own widget, however they seem to rewrite the code by hand (?), which is for openlyers with 20.000 lines of code not really an option atm.
I'm aware that this is not the best question format for this site, nonetheless I hope someone has some advice or hints on where to start or how to implement this, especially for the 2nd option - the first one is more straight forward. Or if you can think of a third option, go ahead please, I'm grateful for any clues.
The only way to make use of JS in Flutter is using WebView.
Dart compiles to JS only for browser applications, for Flutter it compiles to native machine code.
convert js code direcly to dart, using package js
package JS doesn't convert JS, it just creates proxies for JS functions to be able to call them from Dart, but that is also only supported in Dart web applications.
What combination of libraries/frameworks would perform best for an HTML5/CSS3/JS app with moving elements? I have definitely done my homework, but I am diving into a world I don't know very well... as far as performance goes at least. Are there principles I should understand before I manipulate, perform logic on and animate DOM elements?
I am going to use AngularJS if I can and should (i'm fairly familiar with the basics now), and my best research has pointed me towards Steroids.js. There are just so many libraries and PhoneGap-like frameworks! Here's what I have found...
This post helped me, but just to get started
Require.js
BindOnce
Titanium
Sencha
Construct 2
WebGL/three.js
FireBase
AngularFire
In short, is there any sort of resource/documentation/reference or testing method of JavaScript load? Or is there any kind of simple answer to this (outside of giving up and learning Objective C, I would really like to be able to use the languages I already know. Thanks for the read :)
In the end, if you want more native functionality to be part of your app, you will have to learn at least two other languages outside of JS: ObjC and Android-flavored Java.
My experience with Cordova was enough to convince me that aiming for a perfectly native-feeling app with Cordova requires you to essentially rebuild a large amount of native functionality in JS, which places you firmly at the mercy of the web core that each OS uses and their limitations. Eventually, you will find yourself using so many libraries to emulate what you can do with the native languages, that the sheer weight of dependencies and their management can very quickly leave you trying to debug shadows.
Even then, there will be things that you have to find hacks for to get near-native functionality for, and performance will hardly ever be as good as a native-language app, especially if you have to load data or resources from outside your application.
My suggestion is that if you must use something like Cordova, give up on the idea that you're going to be creating a 100% native feeling app. If a UI element doesn't work like its native equivalent, don't spend a lot of time trying to force it to work counter to its web roots. Style it appropriately so that users aren't confused by it breaking native conventions, and move on. If you try to fix everything that looks like but acts not /quite/ right, you're going to find yourself in dependency hell and /still/ having to touch native (Java or ObjC) code to get the plugins to work right.
I am trying to develop an app for Ubuntu Touch. I am using QML integrated with JavaScript.
I know that it is a huge mess to read or write to files in JavaScript when it is embedded in a webpage, but this is not embedded in a webpage so it should be easier right? The Ubuntu documentation is pretty bad right now.
Does anyone know how I can get this done? I want to get it done without using c++ because using QML, JavaScript and c++ seems like just a big mess. If the only way to do it is using c++ then I guess thats what I will have to do, but I would like to find another way.
You will have to write a wrapper for QFile class that will be exposed to QML code. Here is an example how to do that. I'm not sure if it's outdated but it looks like it should work just fine.
The simplest way to handle data in your Ubuntu Touch app is to actually use SQLite (No surprise there). You can find a really good tutorial on using SQLite with Ubuntu Touch here:
https://askubuntu.com/questions/352157/how-to-use-a-sqlite-database-from-qml
It seems like this is the most efficient way to handle app data in Ubuntu Touch. If you want to be able to write to an actual file, you need to handle it using c++. Check out Kamil's answer for that.