Integrate one visualisation from d3.js in an android application - javascript

I want to develop an android application which is to integrate a visualization from d3.js. Is it possible? Can anyone explain how to do this.

D3 is a library geared towards manipulating data and rendering it into an html DOM –– either via SVG, or straight up divs or perhaps a canvas. Of course there also needs to be a JavaScript engine that can run the code. Browsers provide all those things; native apps provide none of them out of the box.
However, there are ways to build native apps that wrap a javascript engine and DOM. PhoneGap is a commonly used framework for doing so. It essentially lets you develop as if things are going to run in a browser, but they're packaged into a native app. There's a performance hit to that: It won't run as fast as a native app, and often not even as fast as the same code would run in a mobile browser. But from the user's perspective, it's installed and launched just like any native app.
That's AFAIK the only way to use d3 in a native app.

Related

Does flutter uses Javascript Engine kind of thing like React Native

As we know React Native uses Javascript to create native views without DOM at runtime.
Does Flutter uses same kind of logic?
No, Flutter uses Dart compiled to native binary code. There is no JavaScript involved at all.
You can run JavaScript in a WebView plugin if you want.
Flutter builds to native binary code and renders the UI using Skia Graphics Library which is a high performance 2D graphics library that utilizes GPUs
Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.
Flutter uses its own widgets that are built from ground up in Dart.
Basic widgets like gesture detection, layout, text rendering, ... are composed to more powerful reusable widgets like Material Design widgets and others.
All these widgets can be reused to compose custom widgets.
The source of all these basic and complex widgets is available and can be used to allow a level of customization composition alone might not allow.
In Addition to #Günter Zöchbauer:
Flutter has beautiful sets of Widgets
It is easy to understand as compared to ReactNative
ReactNative has a difficult learning curve for mobile developers
Flutter is being used to build a new OS by Google called Google Fuchsia
You can also read this article.

How to provide JavaScript library for mobile native apps?

I am not a mobile developer, hence please excuse me for incorrect assumptions, if any
I have a library which users want to integrate in their native mobile apps. It is written in JavaScript, but I don't want to rewrite for Android and iOS. Hence what I need is some way that this JavaScript library can be used in native apps. Following two ways look promising:
WebViews: The JS files would reside locally and webview will be used to run them
NativeScript: NativeScript allows you to create native apps from JavaScript. But I didn't find anything which suggests that I can create native library too. Can this be used in any way?
You might be looking for React Native
It is a Javascript framework, and when you write your code, most of the time, you can use the same code for iOS and Android. It is a relatively new framework, but can be very powerful for rapid cross-development, but (obviously) has its trade-offs.

how do i implement a google doc-like app on mobile?

I'm currently working on a project similar to google docs. Basically, it allows
multiple users to edit word documents concurently in a web browser. I've been
working extensively in pure javascript nodejs and socket.io. The web based
text editor was written from scratch using HTML5, CSS and Javascript. I handled
Operational Transformation(OT) with shareJS(server & client library that allows
realtime editing).
The challenge I'm having now is with mobile development, where I typically want
to develop for both android and iOS. I've been unsure about the right workflow and
technical decisions to make. Below is what has been going through my mind:
How do I incorporate my javascript application into a native iOS/Android app? Should
I just build an exact clone of what I have on the web from scratch? I mean build a
replica of my web implementation in iOS(Swift)/Android(Java). Of course this would mean
re-writing my text editor and OT scripts from scratch in the native language. Does that
make sense?
I know of NativeScript and phonegap. But then, when it comes to mobile, I prefer leaning
towards the native language. Is there a way to wrap my javascript into Swift/Android in
order to call my javascript functions?
Have been thinkin about this for weeks now, pondering over how to go about this. I think i need suggestions,
thoughts and advice from other frames of reference. Thanks in advance

Web scraping in react-native ios?

I am building an iOS app with react-native and looking to do some web scraping. From my understanding traditional npm packages don't work because they rely on Node.js. I know there are Objective-C/Swift libraries for web scraping but I don't understand how I would integrate those into a react-native component.
Anyone have any ideas on how to get information from a website (web scraping) in react-native?
Interesting question. Architecturally, it might be a good idea to consider building a service which can provide the scraped data via an API. The more processing power the client requires (the heavier the client-side code), the more likely you are to run into lagging / stuttering issues in the app. Phones have come a long way, but still can't match a server's power.
If you want to press ahead, I would advise using the browserified version of Cheerio.js. Basically, browserify lets you take code written for node, and use it in a browser environment. You would need to test it in JS Core on IOS, but there's a good chance everything will work.
One other option is using jQuery's load function or the fetch api included in React Native to make the call to the site (you don't have to worry about CORS), and parse the result manually.

Dart with desktop HTML application frameworks

I'm planning to create a cross platform desktop application with Dart.
Because there's no ready built frameworks supporting Dart yet, i have to compile Dart to Javascript first.
I cannot develop completly in Dartium since the desktop frameworks built around HTML5 provide some custom Javascript API's (file system access, native library support, etc.) which i'm planning to use.
I've found the following frameworks which might suit my needs but i'm looking for best practices when developing with Dart.
node-webkit: a fusion of Node and the Webkit browser engine. Provides many packages in the form of NPM. Node and Webkit shares the same thread so it's efficient in terms of communication between the different worlds. Writing and accessing native modules from Javascript seems problematic. Has good documentation. There's node-webkit.dart to access some of the API's from Dart.
XULRunner: The Gecko engine behind Mozilla products as a reusable framework. Provides it's very own UI descriptor (XUL). Has an easier support for native modules (js-ctypes). Seems well documented on MDN. No Dart library written to support development yet.
TideKit/TideSDK: Supports many languages (Dart might be supported later on [link] [link]). Built around Webkit. Seems well documented. Cannot seem to find pub packages supporting it.
Maybe there are some other options i haven't seen yet. I've excluded projects like AppJs (dead), and Cappucino (OSX only).
One option is the Electron framework. Originally created by GitHub for their Atom editor, it allows you to build cross-platform applications for Linux, OS X, or Windows, using web technologies. There is an available Dart wrapper as well. However, this wrapper lacks complete support for the API, and doesn't appear to be under active development.
Another method of using Electron is to call all the electron and node methods via dart:js interop. I've had more success with this method than the library.
Electron uses a main process, stored in main.js, to run the app, and create new BrowserWindows, which load your html. I've found it easier to simply write this file in Javascript, as wrapping too many JS methods is a pain, and this script is relatively light. However, you can use a main.dart file and simply build it with dart2js. Electron will be happy as long as it can find a main.js file.
You can essentially build pages for the app just as you would a regular webpage. You can write it in dart, debug in Dartium, and compile to Javascript for testing it in your app. Of course, your code can't access node APIs from the browser, so you'll have to build the app every time you want to use these. (If anyone has a better way, please point it out!)
One final caveat: Dart's IO libraries won't work with Electron. This is a bit of a drawback, as accessing files is important for pretty much any application. Your best bet will be to use node's filesystem library through dart-js interop. At times, this may feel like a bit of a hack (for example, when working with callbacks), but it gets the job done.
There is the first option.
Chrome Packaged App
You can write Chrome Packaged App with Dart.
dart2js makes it possible to compile dart code to javascript.
and thanks to chrome.dart package, chrome APIs are availble.
Spark is nice example. See https://github.com/dart-lang/spark

Categories

Resources