webview for user interface in android - javascript

I was searching for how to use swf file in android and most of the answer suggested me to use webview and an simple html file.
Now i think We can easily put css and javascript files in asset folder and then we can use them in an html5 code.
Looking at the power of HTML5, This will make app development for a web designer very easy job !
I just want to know that is it good to use this approach to build a good user interface in android ? Are there any technical pros/cons behind it ? will i miss some features provided by android ?

There are a lot of frameworks that allow you to write native android applications using HTML/CSS/JavaScript only. Here some of them :
PhoneGap
Cordova
Titanium
I've never used any of them, so I can't say if it's good or bad idea to write android apps this way, but here you can find a good session about it HTML5 versus Android.

There are pros & cons of using cross platforms. As per my point of view you shouldn't go for loading of everything in WebView.
I still recommend you native app approach because of following points :
WebView is one of the UI control in Android SDK. So, it will have
limitation of memory size and working with CPU utilization. So, you
might face performance issues in some devices.
As you know in older era we were used to work with desktop apps and after that everything is shifted to web-application.
It was
possible only because our browser(s) gets more features for e.g. more
memory area, CPU access, threading, individual Processing (like
google chrome) etc...
in-short, web browsers gets more smart and get treated as separate application. Now a days web-application can have mostly similar
performance as desktop apps. So, everything is now shifted to
web-application development.
This era will come in to Mobile development in later stage. but currently we are in middle stage of Mobile development and Cross platform development. So until and unless Web-View control of any platform (iOS / Android) gets more powerful, we can not totally relay on that.
I Hope I explain it properly :)

Related

Ionic.js or Appgyver Steroids for Angular MPA

I'm working on a somewhat large Angular.js CRM mobile app that uses Ionic JS Framework for the UI elements. I've been debugging using Ripple Phonegap Emulator. I've had literally no performance issues anywhere. The transitions are fast and fluid.
However, once I deployed using Phonegap Build and loaded the APK on an Android device, the performance was terrible. Ionic.js has known problems with Master/Detail transitions which can be worked around, but even apart from these screens (when I am not loading any external content), the app was very slow.
My question is, should I try to adopt Appgyver's Steroids Framework for my UI elements and transitions? Will Steroids offer faster performance and would it be worth the transition?
I'm targeting Android and iOS.
If you were to develop you app iOS first, I would definitely recommend the AppGyver platform. However, currently the Android runtime is going through a complete rework, with the new (currently called "Fresh") Android runtime not yet having any native UI features implemented, which would provide a noticeable boost in your app's performance.
That said, the first native UI features are being implemented in the next few releases, so depending on your deadlines, it could be worth the wait.
In the current state of Steroids, your iOS ionic app will be sped up dramatically. The more processes and complexity you add to any single page app, the slower and more cluttered it gets. DOM gets overpopulated, and things just chug. With Steroids for iOS, MPAs really solve that problem because each page is a separate OS process. All transitions are performed natively. That means they don't just look native, they actually are.
As for Android, the latest version of the Steroids Android client (Fresh Android) runs a Chromium 35 based WebView... that will beat the pants off builds you get get from anywhere else currently. Without the Chromium build, you're building for the platform standard browsers, which for a common phone like Samsung S3, you'r building Chrome 9 - yikes! No amount of javascript magic will help you there. In the coming 4 - 6 weeks, AppGyver is releasing MPA for Android. This will totally change the performance Android Hybrids ;)

Best way to build native applications with JavaScript?

I've been playing for a while with phonegap,
did some tests on my Android...
It's pretty nice.
My questions are:
What is the best (your favorite) framework to develop native mobile applications with web client side (HTML / JavaScript / CSS)?
How easy is to build and maintain those applications in multiplatforms (iOS / Android / BlackBerry) parallel?
Does it has many exceptions between different platforms (iOS / Android / BlackBerry)?
What are the requirements to develop my app for iOS?
Should I need a special IDE with special SDK? Must I have a Mac?
We're currently building a native iOS application using React Native. It would be a shame if it wasn't included here.
Pros:
React treats the DOM as an implementation detail. This made the transition over to native UI very natural. It also removes the need for HTML/CSS when writing a native app. All you need is native components, written in JavaScript.
Native components! The fundamental native components have already been bridged over to JavaScript, and there is a community busy at work bringing everything else over. The thing is, if you know or are willing to learn some Objective C or Java, there is an easy process to add any native module (or third-party module) to React Native.
Quick iteration. There have been over 2600 commits to the master branch since it was open-sourced in March.
You get all of the benefits of normal React: a virtual view layer, diffing, declarative UI creation, fantastic developer experience, and a stellar community.
You can build for multiple platforms from the same repository, reusing much of the same codebase (application logic, mostly).
Cons:
It's still young. There are a few features that require jimmy-rigging, a third-party library, or custom Objective-C/Java to get working.
Some great third-party libraries that are tied to the DOM or Browser API still don't work on React Native, including React Router.
The biggest pains have had to do with XCode and Apple's developer program, but there's no way to get around that.
How easy is to build and maintain those applications in multi-platforms?
React Native for Android was open-sourced on September 14th, 2015. I haven't used it yet, but here's what I've been able to learn so far. Update 10/21/16: React Native for the Windows Universal Platform was announced earlier this year. That means you can now use React Native to build apps for Windows desktop, Windows phones, and even Xbox!
React Native is not intended to be a write once, run anywhere mentality. They adopt a learn once, write anywhere paradigm instead. iOS is a very different platform than Android, so sincere effort needs to be put into the design for either platform. The native APIs will also be different.
So, you will end up re-writing code for native components and APIs. However, much of your application logic can be re-used. In fact, React-Native is organized so that you can keep both your Android and iOS applications in the same repository, so that you can re-use the same code when possible. I think it's brilliant, but only time will tell. According to them, it works well so far.
By the way, a team at Facebook built an iOS app using React Native, then turned around and built the Android version in three months using 87% of the same code base.
What are the requirements to develop my app for iOS?
Currently, you need a Mac and XCode in order to deploy. Currently there are very few ways around this. According to this issue and from conversations on Slack, once deployed, you can actually develop from a Windows or Linux machine. Facebook is also working on open-sourcing all of their Nuclide packages, which, according to their presentation at F8, will include tools to package and build without XCode.
Overall, React Native has been a stellar experience. It is, in my opinion, head and shoulders above anything else currently out there. The feeling within the community is also very positive. I can only assume it will get better with time.
If your app is going to be very simple (for example a port of existing web app) and you need it only on one platform and it does not need integration with phone-specific features you may want to simply use a WebView on the selected platform. If your selected platform is iOS and you don't have any programming skills, you can follow these steps:
Download xCode on your Mac,
Download this simple web view app project: https://github.com/nomtek/iOSWebViewApp
Open the simple web view app within xCode
Add your HTMLs to the project
Run it :)
Advantages of this approach:
Simple setup
No extra libraries to load - the application starts much faster
This is one arena that keeps changing, and it only gets better. Googling at the moment of your interest would be the best bet. At the time of this writing, I am watching the following right now, in no particular order:
Enyo JS
Sencha
NativeScript
Meteor
PhoneGap
Appcelerator
these are the options
Phonegap : http://phonegap.com/
PhoneGap is a free and open source framework that allows you to create
mobile apps using standardized web APIs for the platforms you care
about.
.Download the Phonegap.
Coronalabs : http://coronalabs.com/
Corona SDK builds rich mobile apps for iOS, Android, Kindle and Nook.
Build high quality >mobile apps in a fraction of the time.
Appcelerator : http://www.appcelerator.com/
Appcelerator is the only mobile first platform that enables enterprise
to create, deliver >and analyze their mobile applications.
Phone Gap does look like your best option, if you are trying to use javascript to build a mobile app
Yes, you will need a mac, because you will need to install XCODE (https://developer.apple.com/xcode/) - apple´s own IDE.
If you invest a bit in learning a new script language, Coronalabs would be your new weapon of choice. With it you can build native (cross-platform) apps and you can use a webview to add your HTML/CSS/Javascript stuff if you need it.
At the moment React Native is the best option for creating mobile apps in JavaScript.
Here are my top 3 reasons:
Very active development and updates - After all it originated at FB
Negligible learning curve
Great online resources
I was able to write a small but functional app without previous React Native experience and even deploy it to the Google Play Store all within 2 days.
Also one great benefit that i see with React Native is that you can "eject" your app at any point in time and continue to work on it in Android Studio or XCode. This could be a big relief in projects that start simple but could get complex over a period of time.
Here is short tutorial I put together while building my first react native app for Android:
http://geekycentral.com/creating-a-native-android-app-using-javascript-hello-react-native/

Questions regarding AppJS / Tidesdk

So not sure if this would be the correct place to ask these but I know I could perhaps get some answers.
I am getting into Meteor and now would like to make some desktop apps. I was going to go the route of just making a native Mac app. But then I found the app wunderlist and its open source making use of the tidesdk.
Anyways I was hoping to get some feedback just in general about these frameworks (pros/cons etc). I don't really have a conceptual understanding of what they do. (or what the main difference between the two is).
I notice you can do routing in them. How is this working exactly? Because there is no URLs or client/server side.
Another thing I was wondering is if it would be possible to use MeteorJS on the desktop in a similar way?
Thanks.
Working with TideSDK is quite easy. We are working to make the experience great for developers. You are essentially just creating an HTML5 app in a special Resources folder. In most cases you can drop an HTML5 app directly into the Resources folder, point to the index.html using TideSDK's configuration and have it running in minutes. TideSDK can be used to run clients, servers, processes, and workers. I tend to work with frameworks such as backbone.js where routing is baked into a single page app.
At the core of TideSDK is WebKit, the core technology that powers the Safari and Chrome web browsers. We use three different ports of WebKit in TideSDK, one to reach each platform (Windows, Mac, Linux). On OSX, we can also use the native WebKit. The APIs of TideSDK provide native UI capabilities (that we are enhancing over time). These include native windows, system trays, menus, and dialogs. You can also interact with the clipboard. We have networking and database capabilities, system notifications, and more. We patch Webkit to allow the interpretation of python, php or ruby in the DOM in script tags and are able to bridge objects between languages. Our API's really allow your to reach the resources of your system including interacting with its filesystem.
It would be fun to run meteor in TideSDK. It is currently possible to run node.js within TideSDK using an appropriate startup process so I cannot see an issue running meteor so that it can run client and server within an app.
If you need your apps to reach Apple's AppStore, TideSDK is the only framework that I am aware of that has this potential. Competitive frameworks use ports of WebKit that are not native to the Mac such as the Chrome port (appjs) or the QT port (Sencha Ion). Apple's scan of an app based on these ports will reveal the use of "private APIs". Therefore, you would could not enter the AppStore marketplace with an app based on these. TideSDK is different and can use the native WebKit implementation on OSX. More about this capability will be revealed in the upcoming TideSDK-1.4.0 release. Our upgraded WebKit will also bring the HTML5 capabilities right up to date with the trunk of WebKit. Many of our users are waiting for this important update.
With WebKit eliminated as a barrier to the AppStore, the last issue facing a developer is Apple's sandboxing and entitlement to the resources of the system. We are looking at possible solutions to aid developers with sandboxing requirements. Some apps will be suitable for sandboxing and others will not. That said, if your goal is AppStore compliance, you will need to work with restrictions Apple has in place. I hope this helps.

How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?
You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for 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
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.
Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.
NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.
It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.
Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)
I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.
You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html
CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

If switching to adobe air will be a good move?

I am web developer from a year.I have Used PHP,python with client side Js libraries like Jquery,motools, etc.
So if switching to Adobe air will be a good thing ?
If It is strong enough to make decent desktop apps (Eg: music/videos player)?
If apps can be made for Android or iphone OS ?
Can i use Jquery like libraries (i am very used to that syntax) ?
And at last if there will be sufficient work in future for Air developers ?
Sorry if asked already .
It's true you can't make an iPhone app directly from the Air SDK, but Air, Mobile Safari and Android are all built on the WebKit browser. That means that there are only a small handful of very major differences between the platforms, so if you write your code to minimize the differences and isolate the differences in separate classes, it's actually pretty easy to keep your code base almost identical across systems.
For example, in Air and Android, you have the option of accessing the local SQLite database through either synchronous or asynchronous methods, with or without transactions. If you aren't used to asynchronous programming, you'll probably want to go with the simpler, more linear synchronous route; and maybe transactions will seem overkill to you. But because Webkit on the iPhone does not support synchronous database calls and everything is done through transactions, you'll be really stuck when it comes to porting your app to the iPhone. But if you write your own Database class so it is asynchronous and transaction based, all you'll have to do is write an interface or bridge to make your class work on all three platforms.
Air has a small mountain of features that you should probably stay away from if you want to port your apps quickly across all platforms. For example, you are allowed to write files to the user's local file system. Stuff like that is simply not allowed on iPhone, so don't expect it to port.
To get your code working on the iPhone and into the App store, there are several webkit wrapper frameworks. The two I know best are PhoneGap and Titanium. Titanium has the added benefit of publishing directly to both Android and iPhone, though I've never actually tried it myself. I do have lots of experience with PhoneGap, and while it is still pretty buggy, it does make it pretty simple to get your apps into the store.
You can't make apps for the iPhone with Adobe Air.
You have to use Objective-C and the Apple API.
Adobe AIR does allow you to leverage web development skills such as Javascript, HTML and CSS to develop desktop applications. So your skills are transferable in that sense. You can also use Flash (and Actionscript) to develop AIR apps.
Adobe used to offer a way to create iPhone apps from Actionscript using a packager but Apple disallowed that.
There are impressive AIR apps out there, but arguably it hasn't gotten the traction Adobe might have hoped by now, a few years after release.
If I were you I would look at the task or job you need to do and learn the best technology to tackle that, rather than just adopting a platform. But if it's iPhone development, the the Apple way is the only way, and you'll need to learn Objective-C.

Categories