I am currently looking for a tool/workflow to support me in creating a mobile version of our website. Due to the main subject of our website, this should be a dedicated mobile version instead of a responsive version of our main site.
I came across yeoman and it looks really promising with a lot of features that I would be using like CSS and JS minifying, Spriting etc., a lot of tools that support me for the deployment of the webpage.
However as far as I can see the main focus for yeoman is on "normal" web apps, not for mobile. Am I right? Has someone used yeoman already for a mobile website and what was the experience and/or points to look out for? Are there any other alternatives to consider?
Try mobile-boilerpate generator for yeoman.
It scaffolds out H5BP Mobile Boilerplate
You are right Yeoman is for any web app you want to build; not just mobile specific.
For a mobile version of a website; they can be made similar to desktop sites although you still have to keep responsiveness in mind as not all devices are the same size.
In terms of a framework to consider, Lungo is a brilliant UI framework that can be used to make a native looking website.
Related
The problem: build a somewhat complex form that submits data to MySQL+PHP back-end. Requirements include:
Accessible from browsers running on mobiles, tablets and desktops
Must be completely platform independent; works well on Edge, Safari, Chrome, and other modern browsers.
Must be implemented so that in the future, native versions can be implemented using the same code-base.
Based on my research, Ionic seems to be the best fit. However, I don't see anything about using Ionic for web-apps on their official website.
Questions:
Can Ionic be used to meet the above requirements? If yes, what is the best way to use Ionic for web-apps? Is there an official guideline from Ionic for this?
How else would you go about meeting the above requirements if not using Ionic?
Thanks.
Ionic is built for developing mobile apps / progressive web apps. If you are looking for something which can be accesses through browsers Angular is the best option. Progressive web apps also will be something you can look into. Except for native functionalities in mobile and routing in browsers , angular code will be reusable.
I'm thinking which frameworks should I use to port an existent application UI to a mobile friendly one.
I've seen Ionic and I was pretty happy with its UI and components until I noticed it requires Angular.js for its functionality.
My project is developed in Knockout.js over Node.js and I'm not planning to start using Angular at this point.
jQuery Mobile seems like another alternative to it but it seems its development its not as active and its community is not as big or as active.
Plus the UI is not native for each OS and it looks as good in big screens.
I've seen other alternatives (Onsen UI, Intel XDK, Sencha Touch, Kendo UI, Framework 7...) but none of them seem to be as popular and as active as Ionic and some of them still need Angular.js.
Isn't there any out of the box framework that doesn't require Angular.js and which provides not only the UI but also the touch features as Ionic does?
Bootstrap might not be at the same level as all of these frameworks.
I would suggest you Onsen UI. Since Onsen UI 2.0 release (at the moment in open beta) the framework is completely agnostic, which means that can work standalone. Nevertheless, it's also still compatible with some of the most famous frameworks like AngularJS 1.x (and Angular 2 in the future), ReactJS (see demo) and KnockoutJS.
Moreover, besides being compatible with iOS and Android, it's one of the few frameworks to be compatible with Windows platform (Windows Phone, Windows Universal App) and to implement Material Design! The learning curve is also very fast.
The community is not so small, as you can see from StackOverflow activity and Gitter Channel. Moreover, the developers are very active in the development, in the issues fix (almost 600 bugs fixed at the moment) and open to listen to the users suggestions.
Take a look at this article about Onsen UI 2.0 and give it a shot.
I suggest you should use any of these UI frameworks
http://www.idangero.us/framework7/get-started/
http://chocolatechip-ui.com/
Save yourself all the stress, Its independent of any Js framework and very simple to implement, just like Bootstrap.
I have actually used the first one. framework7
You can create Mobile Apps UI with Native Look & Feel For Web or Hybrid
We plan to create a hosted web app with AngularJS. As UI Framework we found Ionic and Onsen to work well with AngularJS. Both of this frameworks promote that they are made particularly for Hybrid Apps. But us I understand correctly, both frameworks are based on web technologies. So what are the drawbacks when using the suggested UI frameworks for non Hybrid Apps? Is it mainly the Browser support?
Thanks
Well, both Ionic and Onsen are made particularly for Hybrid Mobile Apps. You just won't be able to use it even for tablet apps without customization (If I am wrong, please correct me) just because they target the limited viewport and incorporate phone UX patterns.
Also, they are made with PhoneGap in mind (the apps will be hosted in the WebView component), and addresses some common WebView problems, e.g GPU acceleration for better performance.
If you need just some UI framework for a simple Web App you'd better have a look at Twitter Boostrap or Zurb Foundation. For a complex case you may even consider Sencha instead of Angular.
There is a part of Ionic that expects the Cordova/PhoneGap Device plugin to be installed. It helps with displaying on Android and iOS appropriately, as well as increasing the size of header bars for iOS 7. That wont be an issue for web though, since you'll have the browser's "chrome" taking up that space.
You may loose some of the buttery smoothness in things like page transitions because the template files need to travel over a (often cellular) connection to the internet, but your app will most certainly work if built with Ionic or Onses over the web.
Things changed considerably over last few months.
Both frameworks now support splitview so they can be used for tablet devices. Subjectively Onsen UI has a better support (it is much more configurable), but Ionic is also not bad. This can translate to smaller desktop browsers screens.
You should also consider that Onsen UI has a dedicated desktop browsers support (all web-kit browsers). Ionic framework will also work on desktop browsers, but it was not fully tested or optimized for such environment.
Biggest problem here is that both frameworks were never meant to be used on larger screens. They look oversized and bloated. If you ever worked with jQuery Mobile (on desktop browsers) you will understand this problem.
There is nothing stopping you from doing that - it might even be a smart approach for a mobile first design approach. The advantage is that you could rapidly iterate an idea an then invest in a native or platform specific app depending on user feedback/metrics.
The main drawback would be the user expectations for your UI and application logic which are different for a web page and a native app. For example the back button will be duplicated in the browser and in your header. You could use some platform specific CSS or configurations to hide it. Then there is your application state and user data - will you save it in local storage, session or database? This depends on your app and best judgement.
There will be some browser issues which may not be addressed in the core of Ionic and Onsen because they are not targeted to work with IE6/7 (see angular browser support), for example, but you can resolve those by having a graded browser support policy.
I am looking into building an intranet based app which can support different mobile platforms.
I have looked into phonegap, sencha touch and jquery mobile. I am confused as to how the business logic can be incorporated on the client side ? Any input will be appreciated.
Phonegap is just a web browser that has an access to native apis. So you can use more or less any technology that a normal web browser can interpret.
With that in mind, for a business logic you have to general options: 1) create an api somewhere on you server and just make ajax calls from you application and/or 2) use javascript. This is the only language that can be used for business logic inside phonegap (beside the native java, objective-c and etc).
Out of all those mobile frameworks available, I would suggest you to go for Sencha Touch with PhoneGap. The reason I prefer Sencha Touch over Jquery Mobile is that Sencha Touch is far more smoother than JQM when it comes to page transition and navigation. Also, the extensive documentation from Sencha gives you a quick start on building mobile apps for both Android and iOS.
You may use PhoneGap if you would like to access any of the native features like Camera, Contacts etc.,
Here are some useful links:
http://www.sencha.com/learn/touch/
http://www.sencha.com/learn/getting-started-with-sencha-touch-2
http://miamicoder.com/sencha-touch-tutorials/
I have nothing found here or on google.
Do you know any (good/successful/most sold/most downloaded) samples for mobile cross-platform apps?
If so, on which frameworks (jQuery Mobile, Sensa, PhoneGap, etc.) are they built on?
I want to get some feeling for wether it is possible to create successful mobile cross-platform apps or not.
The success of your application doesn't depend on the platform or framework :))
First, you have to decide whether you want develop a game/social/finance app because games are usually implemented per-platform, but it isn't a rule since appMobi GameDev XDK can be used to create cross-platform games.
appMobi app gallery: http://www.appmobi.com/index.php?q=content/built-appmobi
PhoneGap app gallery: http://phonegap.com/apps
Sencha Demo apps: http://www.sencha.com/products/touch/demos/
Appcelerator apps: http://www.appcelerator.com/thinkmobile/showcase
I recommend you to find out what kind of app you want to develop. Later, you can evaluate the platforms/frameworks.
LinkedIN Engineering has published a series of fantastic case studies on their experiences and findings while developing a Hybrid mobile app for iPad :-
http://engineering.linkedin.com/mobile/linkedin-ipad-nativeweb-messaging-bridge-and-websockets
Please refer to another thread i have started on this same topic :-
Are there any Case Studies similar to the ones published by LinkedIn Engineering?
QtWebkit you can use html and native code. Famous apps have used this approach.