Dart with desktop HTML application frameworks - javascript

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

Related

Is it possible to design GUI with HTML+CSS+JavaScript but it will actually run python script?

I've built a very simple assistant app in python which can do very basic tasks like taking notes, reminding you, stopwatch, timer, web scrape for news feeds etc. tkinter seems confusing and looks oldish to me. On the other hand, css js seems much easier to design gui side and way more elegant looking. Is it possible to design a desktop gui app (may be with electron?) using HTML+CSS+JavaScript but it will run my old python codes?
I've been coding for only two months and i suck at it. Please excuse my newbiness.
TLDR: Simply, i want to make the gui side using HTML+CSS+JavaScript to take user input but then it will run python scripts and shows output in the gui app. Is it possible?
It can't be done, you'd have to make it like a web app (although with local webserver serving python responses)
EDIT:
if you don't mind running it in webbrowser, you can make quite easily webserver, that will evaluate your queries...
The popular form of Javascript or ES6 (which you are talking about) is designed to run in browser, so, the limitations are that it can only make calls via browser, i.e. it cannot directly interact with the OS like python's OS module. This means you will need a web-service in your computer that would run a specific python code and return you the responses, this requires a web-service/web-framework, preferably python's like Django, Flask which will run the python script for you because they can make OS calls on the server machine. I do think other non-python web-services are cacpable to do so, but of course, the natural preference would be 'Python-based services'.
Sidenote:
If the case was with Node.js(i.e. the server-side js) and not ES6(client-side browser-run) you would have an upperhand i.e. you could invoke python scripts on your server because node.js like the python-based web-servers do support os calls.
Kinda, but its real ugly. If you can host your data and whatnot the other approaches will work.
You have to build your project around nw.js. Essentially it is a Chromium build that adds local file system access back in. You can build an HTML+JS Front end and access a node.js backend running in the same thread. Via node you can shellout to call your python program, or run a local python web server.
I built a mapping app that allowed the user to select a local file, process it on the local machine with python and display the results in an interactive D3 app with geojson based layers of the UnitedStates. Since the data was proprietary I could not host it outside the company. Since I was not IT, I could not host it inside the company. nw.js allowed me to package everything into an installer and deploy to other people within the company as a standalone app.
See here for more information:
Official site: http://nwjs.io
Official documentation: http://docs.nwjs.io/
Introduction
NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
It was created in the Intel Open Source Technology Center.
Features
Apps written in modern HTML5, CSS3, JS and WebGL.
Complete supportfor Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function
calls are made straightforward; objects are in the same heap and
can just reference each other;
Easy to package and distribute apps. Available on Linux, Mac OS X
and Windows

Can I use EmberJS or other frameworks without gettting its server up?

I want a javascript framework which has features like below:
MV*
Well structured
Html file as template
Rendering fast(maybe virtual dom?)
Combine and compatible with other plugins or libraries
Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code
When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.
Before I know Ember, I have been using pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I began to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.
I have googled hundreds of pages to find a solution, nothing expected result discovered.
Including Angular, backbone or any other popular Javascript MV* frameworks, they all must compile there applications.
Is there anyone who has encountered this situation?
Then any advice, please?
Increasingly most Javascript frameworks are shifting to doing a "compile step" as part of using them. This allows you to do a variety of changes to your Javascript files, which in turn makes it easier for you as a developer. An example of this is that you can use ES2015 classes and then have your compile step "transpile" them to older Javascript that will work in all browsers.
The side effect of this though is that you need to have npm running on your computer to be able to do this well.
If you really don't want to have the compile step, then I would suggest looking at VueJS. It's the only recent Javascript framework that allows working with simple non-compiled JS files. But you'all be missing out on some of the best changes to Javascript as a result (ES2015 has made life much better)
Finally, I found a nice solution(framework) that is Durandal.
Really, pure HTML+Javascript without built and server up(anyhow, a web server needed if I wanted to publish it in my hosted web server).
.html extension and designer friendly.
I can upload its source files directly in to S3 and browse the html pages.
Just found some nice examples with well structured project on github is here.
And I can work smoothly with my dear designer friends.
Though its next generation Aurelia will also be built and serve it up like Ember or others, but the current generation is enough for me.
Hope those one got help from this;)

Local unit testing on app engine with Node.js

We're starting a new app on Google App Engine with node.js. We also decided to go with Cloud Datastore.
I've found that in the other available languages you can do local unit testing:
https://cloud.google.com/appengine/docs/java/tools/localunittesting
I haven't found anything available for node.js. Do you know if there's something like the above link? If there's not, we're probably going to change to Java or Go.
Thanks!
EDIT: I've just found this
https://cloud.google.com/datastore/docs/tools/datastore-emulator
Has anyone tried and knows if this could solve my problems?
The difference between what you're looking at is about App Engine Standard vs App Engine Flexible (formerly known as Managed VMs). NodeJS is only supported on App Engine Flexible.
App Engine Standard has some advantages (faster deployer times, ability to "scale to zero" so you pay nothing for idle apps), but it's much less flexible in that many libraries are not available in the runtimes and so you rely more heavily on App Engine APIs. To provide a way to test it locally, the local development server was provided.
Standard supports Python, Java, Go, and PHP. However, even with those languages, you still might choose Flexible if you want to do something like use Java 8, Python 3, or custom libraries like imagemagick.
App Engine Flexible is a pretty different product, although on the surface it looks similar since it has similar tooling and configuration, and they are both scalable platform-as-a-service products. But the concept is that you bring whatever environment you're familiar with it, and it runs it in a container (which is hidden from you. unless you use Custom runtimes to builds your own Docker runtime for it).
Since you're bringing your standard development environment to App Engine, the idea is you test your Node app the same way you would test any other Node app, and run it like you would run other local Node projects locally. There's not supposed to be too much special about the App Engine flexible environment, by design, so there's no need for a special local testing server.
However, if you're using Cloud Datastore, emulators are provided so you can run tests more quickly and without paying any money. So the emulator is definitely what you're looking for to do local unit tests. If you have any problems or issues with it, you should followup with more questions on Stack Overflow.
If you haven't seen already, there is a Getting Started with Node app that uses App Engine Flexible, and demonstrates a variety of tasks using Cloud Datastore, as well as MongoDB and CloudSQL (managed MySQL).
https://github.com/googlecloudplatform/nodejs-getting-started

Preloading Ext JS & custom JavaScript files at application boot time

I'm creating an intranet application, the UI of which premoninently uses Ext JS 4.1.1
I have created several custom javascript classes extending Ext JS controls and other code for UI, validation, communication, etc.
Given that my code is not very huge and that my application will be deployed in a controlled & well known environment I'd ideally like to load all .js files upfront at the time of application invokation (boot). I'd like to know an approach to achieve this, mostly from within the relm of Ext JS.
What you want to do is something really usual. Take a look at the deployment section to know how to use the Sencha SDK to create one file containing all your custom javascript classes which extend extjs component here
I hope it is useful ;)
As of this month Sencha (beta) released a revamped build tool. Actually, it is a complete rewrite in Java (I believe). Sencha Cmd is the name, and it is all that the predecessor should have been!
Compile times have been crunched to maybe a 10th of its predecessor and packages/builds are now configured using a powerful command processor.
Integration into other build frameworks and CI servers is now a top priority and achieved by integrating the tool with ANT.
I just spent the past hours to migrate a project from the old Sencha SDK Tools to the new Sencha Cmd. I particularly love the new compiler.
Documentation is already pretty good.
Blog post that introduced Sencha Cmd
Official SDK documentation - there is a total of 10 articles on the subject, don't miss them, particularly the
Compiler documentation
For smaller projects that follow the standard (single-page) pattern suggested by Sencha, there is actually a range of higher-level commands that manage the entire application creation and build process.
Furthermore, Sencha has now a pattern in place for multi-page applications.
And you can always use the compiler directly and implement your own build process on top of it. That's what we did in our project.
There is one class called Ext.Loader
This is more of a server-side question than an Ext JS question. You want to include all your pages up-front? Get a JavaScript compressor to concatenate your files together, minify the whole pack, and add a <script> tag to every page in your web app.
I also work on an intranet web app that heavily uses Ext JS (both 3 and 4), but we have quite a large codebase. Since we use Tomcat, we have a Java class that includes standard files on each page, plus any file groups or individual files we need for that page. Something like that might work for you as well.
You can use Ext.Loader for dynamic loading when you need it, but that doesn't sounds like what you're looking for. Still an option though, should your codebase expand and you need a better solution.
EDIT: As mentioned in the comments, my original answer failed to address the Sencha SDK Tools. I felt it would be more beneficial to make my response part of my revised answer.
While this task may be exactly what the Sencha SDK was designed for, I feel that the product is not yet mature enough for production environments. At the time of writing, the current version is 2.0.0 Beta 3. Beta, meaning it's still under development, and it shows. Documentation is practically non-existent and the official forums are full of topics claiming the product simply does not work. At this point, it's nothing more than a toy to be played with. The most helpful document I've seen is Sencha SDK Tools 2.0 and ExtJS4: The Missing Docs, and the author even ends with "The SDK Tools need a lot of work."
When I'm choosing a product for a production environment, I want something stable, something reliable, something with good documentation, something with quality support. The Sencha SDK Tools are none of those things. Yet.

Dojo Application - How to

Do any of you know any reasonably good resources containing methods and tutorials to help build a Dojo driven entirely AJAX application. I have been searching Google and the Dojo Toolkit web page however not many resources seem to tie everything together..
Thanks in advance,
If you are familiar with Dojo principles the best way would be studying working source code. There is nicely commented github project dojo-boilerplate to start with. It provides, well, boilerplate code to start building a single page javascript application including preconfigured build system. Unfortunately - afaik - build scripts based on Java neither node.js does not work under Windows as of now (not even under MinGW or Cygwin due path resolving issues).
Aforementioned branch uses AMD modules new to Dojo 1.7+, for previous Dojo version employing synchronous loader use this branch.
Also have a look at build.dojotoolkit.org and check out its source code.
Last but not least, don't forget books. You can find those I prefer in my Career 2.0 Profile.

Categories

Resources