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/
Related
I am very new to react-native. I am having good experience on Cordova/ionic framework for Hybrid app development. I am just exploring react/react-native. One concept which I like is "virtualDOM" There are a couple of questions here. (some might be layman questions. But, just want clear my thinking.)
Because of VirtualDOM, do you think the memory footprint will increase?
I am trying to develop a small app which plays/pauses/stops a video. and starts/stops the recording of the video. Do you have any plugins available for accessing media devices?
Does react-native support all device native features?( like Address Book, file system, geolocation, vibration, battery status, device native calendar, capture, contacts, device, device motion, SMS). If so, can you point me to some links where I can access the device specific features?
Of course a React Native app is slower and uses more memory than a full native app. However, React Native still seems to be pretty performant in many ways.
There is a library called react-native-video which supports all you're asking for. There might however be some issues on older versions of android. https://www.npmjs.com/package/react-native-video
A lot of these features are supported by React Native: https://facebook.github.io/react-native/docs/actionsheetios.html#content (Check APIs in the sidebar). If something is not implemented by React Native itself, probably somebody else already did and there is a npm package you can install (and link with rnpm for linking android/ios code).
If you want something custom, you can still build your own Java/Swift/objectiveC component and wrap it to a React Native component. (https://facebook.github.io/react-native/docs/native-components-android.html and https://facebook.github.io/react-native/docs/native-components-ios.html)
I have found limitations in using frameworks like Ionic for building mobile apps. These are mainly to do with accessing device specific functionality. So two questions:
Are there any similar limitations with using Electron for building Mac Apps?
What are the advantages of building native apps using swift?
Some native capabilities are available in Electron, like adding an entry to the Dock menu or showing a menu bar icon. Other capabilities have been added by third parties, like this one, which plugs into System Preferences. If nothing else, there's a JS-to-Obj C bridge, to invoke Objective-C code.
Another important factor is that apps made using write-once-run-anywhere frameworks often have an odd UX and don't fit in to platform conventions. You get this free when you build a real native app using Cocoa and Swift / Objective-C.
For example, toolbars should change in appearance when the window loses focus. You can see this for yourself by opening (say) Safari Preferences and then switching to another window or app. Electron apps don't do this.
As another example, if a right-click menu is open, the user should be able to press "C" to move the selection to "Copy". Electron again doesn't do this.
This results in an app that looks and feels odd and second-tier. If a native-quality UX is a priority, build your app in Cocoa.
If you don't have the resources to build separate Mac and Windows apps (say you're a two-person startup or a charity) but still want a better UX than a web app, then consider Electron.
Reference: Making a web app feel native, and a subsequent email discussion with Ben Gotow, the engineer who gave that talk.
In this moment I'm just learning how to use electron, but I feel Electron is very easy to use you could see this deck from a Teacher of Turing School
https://speakerdeck.com/stevekinney/building-desktop-applications-with-node-and-electron
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 :)
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.
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.