I'm current developing a MOBA as a hobby. The interface is made with Angular-Material, and I plan to move development into an Electron app at some point. I've planned to something like ASM JS in tandem with an HTML canvas for game rendering from the beginning. But now I'm wondering if I can use Node to hook up some internal C++ code to render to a canvas in my Electron app. Is this possible?
The Chromium API Electron is built on is not exposed to native Node addons, so I don't think you'll be able to directly render to the canvas from a native Node addon. But Electron does support Chromium's Pepper plugins, which should be capable of rendering GPU accelerated content, so that's probably your best bet. Unfortunately I've never managed to find any documentation that outlines the full capabilities of Pepper plugins, but at least there are some sample plugins you can look at.
Related
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.
I plan on making a desktop only app. I don't have any intent to deploy it to a web server. Think something like VS code.
Im used to just "throwing" react at any problem that has the term "web application" in it. It streamlines so much its almost impossible to write really great apps without it in my opinion.
However, electron is a different beast entirely. Should I use react still, or is there more benefit to just sticking with raw electron in my case? I'm fairly new to development in electron, so I would like to do it right.
Electron is actually Chromium browser on the front end and nodejs on the backend. Building an electron app is technically building a webpage which ships its back end along with it.
If you have a dynamic application that needs to rerender frequently, ReactJS’s virtual DOM will be super effective
So, if you're used to 'throwing' react at any problem that has the term 'web application' in it, i would suggest you go with reactjs.
I'm building a real time game using HTML Canvas and socket.io on NodeJs web server (and React for all part of the website except the core game on canvas).
This game will be accessible from Desktop browser and Mobile apps (at least Android and iOS)
I'm looking the new tends and I'm really interested to migrate to something like Meteor or Flux.
Both handle React UI and socket functionality:
Meteor: Publish/Subscribe
Flux: Dispatcher/Register (I don't know if I have really understand this part, it's the same thing but a different way, right?)
React, Canvas
I have to deal with both of them, actually the canvas is rendered by React, and a callback is called when something new have to be displayed and a pure JavaScript function draw the canvas.
I saw some lib (like react-canvas) but i don't know if react can handle a 30FPS game rendering ? And Mobile ?
Mobile apps
I know Meteor handle Mobile apps, but React seems to also have React Native. But it seems to create different apps, and not to import the original one (even if the core game is on web canvas, so only the rest have to be done)
React+Flux = <3
I really like React and Meteor just handle it while Flux is a part of the same project.
Moreover, Flux seems to be really more scalable, but complex.
What's the choices to do ? What's tips to know ?
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.
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