Using hidden WebView and calling out functions between Javascript and Java code - javascript

I'm trying to create an Android App but I'm not too familiar with Java. I was thinking to use a hidden WebView to store my core code (as Javascript) there and call out functions between WebView's Javascript and app's Java code. Is this a bad practice? I know that I can use frameworks like Cordova, PhoneGap but they are all bloated with code that I will never use.

3 Reasons to Prefer React Native,
1- You are good at JavaScript (you told that you are not too
familiar with Java)
React Native is Really Native
JSX and
React Component Props (eg. flex styles almost same with CSS) are
close to JavaScript Developers
WebView is not the best practice ;)
Good Luck

Related

How to migrate html, css and javascript application into react-native components?

I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas

Native code interop in a weex app

i'm new to Weex framework and i'm wondering if there's a way to inject native code directly in the app. Or perhaps some sort of interoperability between js and native code?
I'm trying to add some cookie-based auth logic and animated transitions between views and it seems there's no way to achieve this in Weex without native code.
First, There is NO way to inject native code via js-bundle.
Second, The feature of animated transitions, you can try with BindingX. Timing Event is suitable for you. Translate your transition into an expression.
The expression is the interoperability between native and js.

integrating GWT and angular2

I have a big project in GWT and i'm trying to integrate Angular2 with it. (angular2-gwt is not an option as i'm running on version 2.7 and can't migrate to 2.8 at the time)
I'm facing a couple of problems i don't seem to know how to face:
1) I heard that you can use JSNI to use the angular app but i didn't seem to be able to do that or to find any information about it. how does it work and what can i do with it? (invoke a function is an option?)
2) I tried to add the selector tag of the angular app to the GWT entry point html and that works well but when i'm trying to add the selector to a .ui.xml file (UI Binding) it doesn't work, why?
3) Is there an option to invoke the GWT client side from a servlet? What i mean is i'm at the angular2 app and use a rest call, can this rest call invoke something on the GWT Client side?
Thanks!
First off, I should note that migration from GWT 2.7 to GWT 2.8 was pretty painless for me. I updated my apps and didn't had any major issue (some Maven dependencies that changed, some flag here and there, etc).
I'm mentioning this because native JS support is vastly improved in GWT 2.8 vs GWT 2.7, so if at all possible you really should do the switch.
Regardless, in GWT 2.7:
You can call any kind of JS from GWT like this:
public static native void sayHello() /*-{
$wnd.alert("Hello world!");
}-*/;
Note the $wnd construction which is placeholder for the "global" namespace in JS (i.e. in JS you'd simply call alert() without using a specific namespace).
Please be aware however, that if you're interfacing with a lot of JS native code (such as using complex objects from angular), you will pay a hefty price for going this route. This route is good for when you want to invoke a function or two from JS, but other than this I don't recommend it.
You could have a look for example at the source code of gwt-openlayers at http://www.gwtopenlayers.org/ and see how it looks like for a more complex example (this library wraps a lot of native JS)
I don't really know any angular, but the .ui.xml is a special beast. Some obfuscation takes place in the background / some other stuff happens. The closest you will get to HTML, is to put some stuff inside a g:HTMLPanel widget, but to my knowledge, you can't really have JS in there.
A bit confusing what you're asking here. You can't easily invoke any client-side code from a server-side servlet, unless you insist; then, you could do workarounds and use techniques such as long polls, etc, but I'm not a big fan of those. I can expand more on the subject, but it appears that my understanding of your point might be lacking.

Does React Native compile JavaScript into Java for Android?

When I develop hybrid apps with React Native. Does the JavaScript code I write transform into Java-Code or Java-Bytecode for the Dalvik/ART Runtime when I create an Android-App from my React Native code? Or are just the UI components compiled into native UI components? Or does a library like the Fetch API compile the JavaScript code into Java-Code or Java-Bytecode?
Basically, you write Javascript. The Javascript communicates with native components (Java on Android, Objective C on iOS, C# on Windows).
The communication occurs through the so-called "bridge". If at any time you feel that this communication slows things down too much, you can choose to implement the Javascript functionality in Java, Objective C, or C# respectively in order to run purely native. In this case, you are writing directly in native code, so there's no Javascript to native compilation.
This will sacrifice compatibility for performance. Normally, this is not necessary.
Further reading
Understanding React Native bridge concept
The code remains the JavaScript native code and is not converted into any other format. The hybrid apps run inside the native container app which invokes JavaScript run time engine which takes care of executing the JavaScript code. I hope this clarifies the question.
Based on "React Made Native Easy" book:
Essentially, React Native can be considered as a set of React
components, where each component represents the corresponding native
views and components.
Also there is two parts in React Native architechture:
Native Code/Modules: Most of the native code in case of iOS is written in Objective C or Swift, while in the case of Android it is
written in Java. But for writing our React Native app, we would hardly
ever need to write native code for iOS or Android.
Javascript VM: The JS Virtual Machine that runs all our JavaScript code. On iOS/Android simulators and devices React Native
uses JavaScriptCore, which is the JavaScript engine that powers
Safari. JavaScriptCore is an open source JavaScript engine originally
built for WebKit. In case of iOS, React Native uses the JavaScriptCore
provided by the iOS platform. It was first introduced in iOS 7 along
with OS X Mavericks.
And for communication between these parts:
React Native Bridge: React Native bridge is a C++/Java bridge which is
responsible for communication between the native and Javascript
thread. A custom protocol is used for message passing.
The best explanation i saw-
00:00 - 03:55
https://www.youtube.com/watch?v=6ZnfsJ6mM5c&t=1228s
"In react native app after compiled - all the UI(Buttons,Text...) going
to get compiled to native code(Java or Objective C) and the JavaScript part is going to
stay JavaScript."
For full explanation -
08:06-14:10
https://www.youtube.com/watch?v=qSRrxpdMpVc
React Native
React -> JavaScriptCore -> Native Code -> "What you see"
Hybrid App
JavaScript -> Native WebView wrapper -> "What you see"
React Native works as a wrapper. For example: if you wanted to put a button in your layout, you'd simply add a button tag. You then use a specific API from the UI module to render this on Android. You can easily create custom native modules to use in your React Native projects. However, code written natively is often faster.

Hybrid apps using NativeScript

I'm looking at NativeScript and I see a lot of potential for making app development easier. The question that I have right now is whether or now it's possible to run NativeScript on the fly. For example, is it possible to create an iOS app fully written in Objective-C and then leave an about page to NativeScript and get the script from a source in runtime and evaluate it in the app, the way JavaScript gets evaluated for each web page?
I read that NativeScript does use JIT but what I don't understand the require mechanism, how is it possible to require Node modules if you evaluate code in runtime.
React Native lets you do this. I'm not endorsing it as I'm evaluating solutions as well, but technically you can instantiate their bridge and manage it from existing iOS apps, they even have example repos.
Yep, to some extent. Their is no easy mechanism in NativeScript to let you start your ObjC app; and then call into NativeScript. You can do it the opposite; start a NativeScript application and call into your own ObjC. NativeScript is the controller of the application.
As for dynamic pages; yes this is very easy to do. In fact I use a technique to do just this in my NativeScript-LiveSync plugin. All the JavaScript is evaluated at runtime.

Categories