I'm excited to learn Sencha Touch and improve my HTML5, CSS3, and JS skills in order to eventually program for all mobile platforms instead of focusing on one-off languages. But I'm having trouble getting started.
Here's my question:
What is actually the bare minimum required for an application?
Here's why I'm confused:
I started with the Hello World demo where they use new Ext.Application()
Then I looked at Getting Started with Sencha Touch where they use Ext.setup()
Then I look at the Intro to Panels screencast where Drew Neil didn't use either!
Why do there seem to be so many different ways to start building a Sencha Touch app? How should I start my apps?
Thanks for setting me straight in advance,
-- Miles
Ext.setup() is the minimum, I think. It merely creates a page for a mobile device.
In the Intro to Panels (or at least the version at http://vimeo.com/15879797), you can see Ext.setup() at 0:54 (?)
new Ext.Application() and Ext.regApplication(config) do what Ext.setup() does, but also create an Application object, which is required to take advantage of various utility methods and things Sencha has created.
From the API docs: "Sencha Applications provide in-app deep linking and history support, allowing your users both to use the back button inside your application and to refresh the page and come back to the same screen even after navigating. In-app history support relies on the Routing engine, which maps urls to controller/action pairs."
Creating an application also automatically registers a new namespace:
//this code is run internally automatically when creating the app
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');
Related
I am new to qooxdoo framework I have few questions,
In all the sample QX.Website apps provided there was no QXTheme defined in config.json, is it like themes are used in a different way instead of config.json or how?
Is qooxdoo is like replacement for jquery or will be used together with jquery. Since jquery has lot of plugins available. I am not finding qooxdoo as easy as jquery
3.QX.Desktop is desktop feel like website or it is a desktop application itself, same for qx.mobile too?
I am working on a POC it will be of great help.
QX Website
Is cross-browser library that can help you build lightweight websites.
It main features are DOM selector, BOM and HTML abstraction layers, cross-browser keyboard and pointer events. As well some network abstractions for REST service and web storage. Οther functionality is provided through modules. There is no theming option because theming is done by regular css.
You can see an overview of the modules here.
QX mobile
Is the attempt to enable developers use the same principals as in qx.desktop to create web apps that have that feels likes a native app or you can simply use cordova or something else to ship your application inside any store.
QX Desktop
Is the way to go if you are building a single page application.
It has the feeling of a desktop application but this is only theming and it runs in the browser it doesn't run on desktop.
TIPS
If you want to build a mobile app don't use qx mobile as I don't think is maintained appropriate anymore.
If you would like to have a more modern theme checkout the clean theme from sqville.
If your project have a lot of forms and think to use qookery as it will be easier. (Shameless plug I'm one of the contributors of qookery).
is it possible to create web application using ionic or is it only for mobile ? what is the difference between Angular and Ionic
You can definitely do it. However, it's probably not advisable. Ionic just provides a bunch of directives for you to use. You can use that in conjunction with something like Cordova/Phonegap to package that up for a mobile release. Otherwise, you could just take the web parts of the project (i.e. all your html/js/css/assets) and point a web server to them and presto - you can access your ionic page with a browser.
However...
You probably don't want to do this for a few reasons.
Ionic wasn't written to target desktop pages
Ionic doesn't really provide anything for desktop pages that A. doesn't already exist in Angular or B. someone hasn't properly written for desktop solutions
My suggestion here is to just use plain Angular or another framework such as React/Vue.
To answer the last part of your question: Angular is the framework that Ionic provides bindings (and some assets such as icons) for. Those bindings happen to be optimised/targetted towards mobile devices.
Hopefully that helps out a bit.
Our current web application for mobile is build with jquery mobile
https://www.bit2c.co.il/mobile
I would like to upgrade it with better ui, plus I believe that jquery mobile js and ui are not working smooth over IPhone 4. (the nav bars, header and footer, are refusing to stay fixed ).
So I did some research and found that mobile angular UI is working pretty well over different smart phones including IPhone 4.
My question is:
1.Is this framework well supported and will continue to grow ?
2.Is it working inside phonegap hybrid application ?
3.If using it means there is no need for jquery? and by that how all the functionality done with jquery is done with angular instead?
Please keep in mind I have little angular knowledge and I've seen there will be great change in angularJS 2.0. which leads me to concern in using this version.
Thanks !
If anything, Angular 2.0 is more mobile-aware than 1.3. My team has built a mobile-only application with Angular 1.3 and it works quite well. We've also wrapped it in Cordova to build native mobile apps, although there were more issues there due to third-party JavaScript. The main problem with starting a new app with Angular 1.3 today is that eventually Google will only push security fixes, and no new features will come to the framework. If you build a one-off app, that's fine, but if you're building a new product that will keep on evolving over the next 2 years, 1.3 is not the right choice anymore.
The main challenge I would say we have is that it takes a while to load upon the first page-load. We're a content site with little user "functionality" and while Angular has been good, I don't think it's the best solution for a plain content site; Angular is really meant for applications where you want users to interact with things on the screen without creating new pageloads for every click.
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 already have an ExtJS app but now I'm trying to build a mobile version with Sencha Touch. I want the browser to detect if it's running on mobile or not. That works fine, but what is my next step?
I have it redirected to a /mobile folder with a new index.html and that works fine until I try to reach classes from a parent class.
Is it possible to load the mobile app.js instead of the extjs app.js in the primary index.html?
I don't think you will be able to get away with having just one application. Ultimately you would need to create two different apps - one using ExtJs framework, another using Sencha Touch.
Whether you will be able to share some code is a good question. I think you should be able to share models, but that's about it. And even though - I would not recommend doing that either. Because even if show similar information from the same back end in both full and mobile version of your application, you might not need all of it in the mobile application. And if you don't need all of it - your models will be different.