I would like to be able to render user interfaces for cross-platform audio plug-ins (VST, audiounit) on desktop machines using HTML UI, in a similar approach to this project https://github.com/russellmcc/audiounitjs
Unfortunately native web views are significantly different [and particularly limited on windows].
I'm investigating whether I can use libchromiumcontent from the electron project to do this, but I can't find a basic tutorial that looks appropriate e.g. a basic c++ app rendering a UI using HTML. I'm not even sure if that's gonna be possible. Perhaps I have to wait for mozilla's servo? because I am developing audio plug-ins, the plug-in host controls the main application loop. Does this means I cannot use libchromiumcontent?
thanks
Related
Is there a way to integrate codenameone component in a native activity/fragment?.
The idea is having a codenameone library, that we use its native compilation as a library in an existing native project?
Many thanks for the reply
Maybe but probably not.
Codename One was very much designed to take over. The reason is that cross platform embedding is really difficult as the OSs have a very different concept of application embedding and lifecycle.
You can embed a native widget into Codename One "easily" but that's probably not enough.
Since in Android everything is an activity you might be able to hack something by packaging two apps into one APK and moving back and forth with the Codename One app. I wouldn't recommend it since we make a lot of assumptions and this might not work. You won't be able to do the same on other platforms either.
One strategy some developers took is to have two distinct apps that communicate between them via the cloud or via app URI calls (or both). This is a workable cross platform approach but it's also a bit painful and it isn't seamless to the user.
I am currently working on a complex web application written mainly in ReactJS with Redux which uses Node and Docker containers for deployment.
As the app is currently mainly used by laptop users, our next goal is to make the application mobile friendly (mainly iOS) and allow the user to utilize the phone's camera to upload photos straight to the app.
It's my first time trying to make a web application mobile-friendly so I am wondering what's the best approach for doing so. I've considered using CSS media queries to adjust the layout based on the screen size but we've come across a few drawbacks such as pop-ups or modals not looking as expected.
Should we go down the route of rewriting the code in React Native (not ideal approach), or are there any other better suited solutions?
Thanks
There are a number of options, most of which would have been better if implemented at the beginning of the project. Mobile-first UI development is by far the easiest way to deal with different device sizes, as you have already guessed with elements such as reducing your modals.
I would absolutely recommend using a UI library that comes with a responsive grid solution if you're not already using one. Available ones include, but are not limited to, Material-UI, Bootstrap (using a react implementation such as React Bootstrap) and Ant Design.
As to whether you should do a rewrite, that is up to you to compare the costs and benefits. What I would suggest is, instead of planning to go for something specific such as iOS, plan to support device sizes instead. Any decent UI framework will work in terms of common breakpoints that abstract you from thinking in terms of "iPhone X in landscape" to something like "Extra small", "Small", "Medium", "Large" and so forth.
I am working on a pet project ( web application ) and I was wondering if I should use react because it would be easy to create native apps from this code (in future if I need to).
And if the answer is yes, what are the best practices to follow for
most resuse?
If the answer is no, can you recommend an alternative?
Some more information about my situation.
I am relatively new to react and my alternative will be good ol' html with bootstrap and jquery. I am considering using asp.net mvc and web api.
Sharing app logic between a React Web app and a React Native app, while keeping the individual component rendering unique to each platform is possible!
In my opinion, it is a great option we have available. I will give you an overview of the approach and a few advices.
In an ideal world, we would be able to share 100% of the code. As far as I know, that isn't possible, but still we can share a lot of the code. Although React Native is like React, it is very important to note that the rendering code is different. Instead web things like <div> or <span>, you use React Native components like <View>, <Text> and other built-in components.
However, the business logic in most cases is just JavaScript though and that's one of the important things which we can share!
The plan
Based on the Flux architecture you are using, it would mean that your store(s), reducers, actions would be shared code, as well as most of the business logic (inside services or whatever) and the constants and utilities too.
The UI layer would then be written specifically for each native platform using React Native and for web using React. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behavior on the mobile app.
Some General Guidelines / Advices
Consider a good architecture and code structure in order to share as much code (and application logic) as possible. Try to separate the UI presentation components (which will be different for each platform).
Take a look at the JavaScript Environment specifics in the React Native docs. When using React Native, you're going to be running your JavaScript code in two environments:
On iOS simulators and devices, Android emulators and devices. React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies.
Consider the different strategies for sharing the code. In order to accesses shared code, the apps you're building doesn't have to all live in the same codebase or git repository.
More realistically, you would have two or more projects hosted separately, so an npm package is one of the easiest ways to share code between them.
This is easy as making a new package and setting it as a dependency inside each of your projects. For the path to the shared project, you can use a git repository rather than pointing to a public package on npm.
Even though you're building only the web app now, you could spend some time thinking about how you could generalize some of the shared code, so it is easier to re-use it in future.
It's possible and viable. You must have a view for each platform (web/android/ios), because each one have your components..
The business logic must be out of the view. Use flux can easy your project with native, because the it move the api interaction to a data layer, letting the view be just a view.
I'm currently investigating the alternatives for crossplatform development for Android and iPhone (Windows 8 could be a nice addition). The app is basically a "map with an asociated app", and certainly not a game.
Searching here I see many outdated advice and tools from 2010/2011, but since then Apple has changed their policies and surely new things have appeared.
My current list and light research (might have facts wrong) is:
Monotouch/Monodroid: .NET (Mono) framework. Create "native" apps on both platforms. Requires rebuilding UI code (or similar things).
Appcelerator: Javascript framework to compile native apps.
Corona: Similar to Appcelerator.
Phonegap: Similar idea, but looks like it uses a wrapper to appify HTML5 content
SenchaTouch: Another HTML5 based platform.
Wink: Yet another HTML5 toolkit.
XVLM: Android to ObjC compiler, probably creating ugly iOS apps.
Unity3D: For games only.
Moai: For games only.
So, there are three main ideas, with some frameworks implementing each, it seems to me:
Have an abstraction layer over native iOS/Android code and build for each platform using the provided layer. (Monotouch, Unity3D)
Use HTML5 (coding in Javascript) and some kind of wrapper to "appify" the web content. (PhoneGap,Sencha,Wink)
Code using a framework that will output as a compilation pass (or similar) a native app for each supported platform (Moai, XVLM,Appcelerator,Corona)
The questions:
Is there a fourth idea I haven't yet found?
Is there any blatant mistake in my research for any of the specified frameworks?
Is there any known problem for map integration with any of these ideas or specific frameworks?
Only a partial answer:
Ad 2. Appcelerator / Titanium is more than just HTML5. I read this pretty extensive comparison between PhoneGap and Titanium the other day on Hackers News. I found it very informative. The link points to the HN comments, the link to the actual article is at the top.
My main experience is with Mono for Android and MonoTouch, so I can't personally speak much to the other options. I personally find it to be the best option there is, as it allows you to share a large amount of your code across the platforms (even extending to non-mobile platforms if you stick with .NET), while still allowing for a 100% native UI, which is extremely important. If you're looking for resources on getting started, I have this video which discusses approaches and libraries for sharing a lot of code across platforms, and also this book which covers the same thing, but also expands to talk about how to do things like store data, use maps, access the network, etc.
I also want to mention MonoGame, which is absent from your list. MonoGame is an open source XNA implementation that sits on top of Mono to allow you to target iOS/Android/Max OS X.
From what I have experienced, if you want to have a native app go Mono, if you don't need native go PhoneGap. Native is best of the UI is very important, ie games or fairly graphical apps. But from business type app, CRUD, Phone gap works well.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I try to find a way to develop real native mobile apps, cross-platform. The amount of tools I found is huge, very huge.
All of the tools I have tried 'said' that the end result will be native, but in fact it isn't true. It is an executable with a webbrowser in it and some extra native layer/framwork to device specific features.
The reason I want a real native app is:
Speed and compact
Avoid browser issues
Market acceptance
Avoid easy/'script kiddie" reverse engineering
The products I have tried:
Appcelerator (does not work correctly on my system)
PhoneGap (does not create REAL native apps)
Embarcadero radPHP EX2 (uses PhoneGap)
Embarcadero radStudio EX2 (cannot create mobile/android apps?)
Adobe Flash Builder (Works very well but relies on Air, so apps are huge and no
native devices such as vibration (posible, but must write it
yourself)
Flash Develop (but same as Adobe Flash Builder)
..... and some others ;-) like moSync......
Currently I have downloaded "RhoStudio" but has some doubts about it because in the introduction video they talk about the things that I don't want.
Target directions are in the first place Android, iOS and maybe in the future Windows Phone.
Note: I don't have a Mac so I cannot compile it on a Mac.
Is what I want impossible or is there such product around that can do this?
EDIT:
See my answer, the answer is NO!
After 2 years asking this question I can say: NO, it is NOT possible, it's a myth.
All products I have tried use some kind of wrapping or use a second language as a layer to the call the native stuff. Although the libraries are native, the main program is not. The latest answer of Cosku with smartface.io is a good example, they claim it is native but it is NOT.
Why is it so difficult? The problem is the programming language (differences in language that makes it complex) that is required for a platform. It is too complex to translate a second language into the platform's main language and it's specific libraries, you can only achieve this by wrapping things with native binaries. Second obstacle is the needed compiler that must be able to run cross-platform.
But why rely on a second language or third-party development tool to build apps when the output is mostly the same is bad, the problem is perfectly illustrated in this image:
http://xkcd.com/927/
The image is about standards, but that's what happen, creating a new standard for a standard. For example, when using PhoneGap, you have to learn the basics of the PhoneGap API. You rely on a 'new standard' calling PhoneGap. The problem with this is that you completely rely on PhoneGap support and it existence. It can introduce a second weakness in the lifecycle of an app.
IMO, if you want to wrap things to make it cross-platform it is not a smart idea to rely on third-party products and libraries. Better is to write a wrapper yourself, like I did and skip the bloat. A real benefit of this all is that you wrote the wrapper code yourself and you understand underlying structures. Besides it is easier to extend or change and you can skip the things you don't need.
Today I create and design the UI of an app in the longest existing and stable 'language' HTML with a javascript interface. The app can also run in a browser too and does not break when there is a specific function missing, like vibrate for example. You can not get the same results with phonegap, try it! You can design the app with responsive techniques at ease like a normal website (try this in Android for example ;-)). Technically, it can run everywhere, on any platform in a browser or webview but don't use any special Mobile javascript libraries! You don't need these special libraries, really, use the 'normal' library versions instead.
I have wrote a compiler/obfuscator for it to 'pack' the UI-source into just one file that will be loaded by the native shell. This is to protect the source, so it is not easy to view or modify the source.
The only thing I have to do, to support the app platform is write a native wrapper for it. If a platform dies for some reason (for example Windows Mobile in the past), I only have to write a new wrapper for it. This is easier to do than write the whole program again from scratch. Besides, when there is a new platform it can also run in the platforms browser too.
If your app not rely on specific hardware (like a game) or can run without special hardware requirements, this is the way to go to extend the life-cycle of your app. Use HTML5 and javascript to design the GUI and use a native shell to use specific OS features.
Is it slow? I have to say no. At least don't use any bulky and bloated special designed mobile javascript library stuff and don't use the click event on touchscreen devices, use touchstart instead. Also the HTML engines will/are improved these days and there is better support for HTML5 features that enables you to write powerful HTML5 webapps without the need to implement this in a native language.
IMO, this the way to go (for me) and my journey to find the best way develop mobile apps cross-platform and to extend the life-cycle. Hopefully, it can help you too to decide what is the best to do.
For cross-platform native iOS, Android, Mac, and Windows apps, check out Xamarin. Code in C#, compile to native. For iOS, you can leverage the XCode tools for app layout, and Xamarin Studio integrates very cleanly with it.
And for the sake of completeness, PhoneGap has a worthy (yes, WebView based) competitor in TRIGGER.IO. While it's approach is similar to PhoneGap/Cordova, it improves the API for accessing native functionality, simplifies push notifications, and performs much faster cloud builds.
I am not associated with either of these products in any way... I just like them both.
Have you tried www.codenameone.com? It's open source, java based, only need eclipse or netbeans to develop.
Firstly
Appcelerator (does not work correctly on my system)
Is there a certain issue your facing ? are getting java errors or something, might not have been setup correctly.
Short answer is no, you have to have some level of abstraction in order to achieve this, java and objective-c are completely different languages, as well as Android and IOS SDK's having different methods, procedures, styles, design's etc. There is no way to have something work on both without there being a middle layer to convert or render.
Appcelerator will be the closet thing to what your looking for as its not a webview wrapper like the others, true it does interpret javascript, but because its not wrapped in a webview you avoid the browser issues.
Speed and compact comes more down how you code the app more than what its coded on, true Titanium apps will be bigger in size because of the library but that doesn't make it bad as such, the benefits of getting 2 apps far out weighs the extra few megabytes I would think.
I'm pretty sure all of these tools have market acceptance as they wouldn't be successful without it, again for the likes of apples requirements its down to the way you design it, not the tool in the background.
If you want to use IOS you will need a mac, if you want to publish in the app store alone you need xcode and the built project to use the application loader, I'm not aware of any tool (even the webview wrappers) that don't require you to have the IOS SDK as it can't run in the simulator, package the app or run any of the code without it.
If you want to make apps you have 2 choices, learn each platform or use one of these tools, if there was some magic tool that did everything I guarantee it would be the most popular thing on the planet and you would have heard about it / found it.
This is one reason why "the cloud" is so popular. Instead of writing your app several times over, you write all of the functionality on a server. The actual "apps" are then simply your user interface to the functionality, which can be really simple depending on your needs. If it is that simple, then you could write the apps separately for each platform, but they would all use the same "cloud" backend.
If I am not mistaken, this is representative of what most apps by companies who have a cloud architecture do, and is also why many require a data connection.
I don't think that it is possible to write once and run everywhere without some kind of wrapper or layer, this is due to the fact that each platform has separate APIs and even programming languages. You would be hard pressed to write one set of source code that runs natively on both Apple and Android devices, for example. This is not to say that it isn't technically possible, desktop operating systems have had such cross-compiling portability for years with C/C++, and Java only made that much easier. Of course, the engineers of Mobile operating systems don't seem to share a vision of interoperable APIs.
To conclude, I would recommend A) writing the app twice (awful I know, but it will provide the reliablity of native execution on both devices, and can be done with minimal pain) or B) breaking down and using one of the "script-kiddie" frameworks. These actually may not be that bad if your app is simple enough, and it may not be that reverse-engineerable at all. If anyone has any suggestions as to the best "near-native" cross platform framework, that would be useful.
Well, there are several things to consider, if you want native look and feel there are frameworks like Sencha(www.sencha.com) and Kendo UI(http://www.kendoui.com/) that simulate it on JavaScript side. I found them both good looking on Android and iPhone but no support for Windows Phone yet.
If you are looking for real native widgets combined with HTML you can look into MoSync's Native UI(http://www.mosync.com/documentation/manualpages/jsnativeui-library), which support windows phone Metro UI too, or Titanium(http://docs.appcelerator.com/titanium/2.1/index.html).
Anyway one other thing is that you can use packagers like Phonegap or MoSync or AppMobi(which I think uses something similar to PhoneGap build) to wrap your app and put it on App markets. from these list PhoneGap especially is not designed to provide you with any specific UI functionality although I have seen some attempts to add tab bar plugins to Phonegap.