I am developing a hybrid mobile app using jQuery Mobile and AngularJS.
I decided to use a mix of the two for the following:
jQuery Mobile
good UI features
not too heavyweight (compared to Sencha Touch, for example)
AngularJS
good performance and resource management (caching, asynchronous requests)
personal experience
I have little to no experience with jQuery Mobile and, as I was learning, I noticed a potential conflict between the page navigation models of the two.
Should I use only one ?
If yes, which one is better suited for my needs ?
Are there any gotchas with this setup ?
Many thanks.
You can't compare them to each other.
Angular.js (like Backbone, Ember eg.) are MV* Frameworks (for SPA) which used to render html templates/views directly in the client instead of server. So you have a lot of application logic now in your frontend and this Frameworks are made to make your life better, coding this.
jQuery Mobile on the other side is a pure widget/plugin library. The AJAX navigation plugin load pages (something static, like html) into the DOM via AJAX. So you have to pre-render this pages on the server somehow.
If you started to build a SPA with Angular it doesn't make sense to use jQuery Mobile's AJAX navigation at all. (If it's a native mobile app you have no server anyway.)
Sure, you won't get far without an UI component library so use one of your choice (eg. jQM) but work with Angular's directives to init the plugins/widgets correctly on your DOM elements since a $(document).ready(...) or a $(document).on( "pageload", ... ) doesn't know anything about your Angular views.
Take a look at following projects:
http://angular-ui.github.io
https://github.com/angular-widgets/angular-jqm
This has been already addressed in HERE
Basically the article states that trying to intercept the navigation from angular can be painful, so leave all the routing jqm
Related
I just started with Backbone.js, I've read the documentation and also the Backbone Fundamentals book before doing anything. I want to create a PhoneGap application with the help of Backbone.js and I'm a little bit lost on where to place some logic in Backbone.js or how integrate jQuery Mobile.
I need jQuery Mobile because I want to build an app with this exact structure, 2 panels that you can open with a swipe movement.
To integrate jQuery Mobile, the only thing that I've to do to BBB is to add a new Shim (and libs) in the config file? Is that the correct workflow? Or should I touch something in vendor/?
Once I have the jQuery Mobile integrated to Backbone Boilerplate, I want to just reproduce the demo. I know how I will place this code in a old fashioned website, how I would place my files, etc. But when it comes to Backbone... I'm totally lost. Where is the place to put the JavaScript code that will start the functionality of the panels?
Thanks in advance!
Usually, using jQueryMobile with Backbone gives headaches. Luckily I found a solution that simplifies the problem. It's a library called Jackbone. The author explained it better than I could do:
Summary
Jackbone is a utility library that aims to structure the development
of rich HTML5 applications using JQuery Mobile, by extending the
Backbone framework. It heavily relies on Backbone, offering
specialized classes for your views and router. Additionaly, it defines
a controller interface, provide a view manager that handles life and
death of the Views and Controllers of your application.
https://github.com/Fovea/jackbone
Is there much point to using angular js on top of asp.net mvc since they're kind of both doing the same thing? What are the advantages to using angular over asp.net mvc + jquery? What kind of scenario would you pick angular in? If you do pick angular in a microsoft environment, what would you run on the server side? Would it be something like Web API? Or is there still benefit of using traditional asp.net mvc?
This question is a bit subjective, however here was our reasoning.
Let the client handle rendering of pages, free up resources on the server.
Leverage built in caching of cache servers since we are just dealing with <html/> content.
Since the pages are cached the only traffic back and forth is json payloads.
We have been using NancyFx, but WebAPI or Service Stack would work just fine.
We wanted to build a responsive single page application and AngularJs fit the bill for testability as full feature rich framework.
AngularJs forces you into a pattern that we needed for JavaScript, in the past our jQuery heavy applications turned into functional spaghetti (That was our fault but being guided by Angular helped out a lot).
As with all frameworks pick the one that suites your needs
On my site http://www.reviewstoshare.com, I am using AngularJS along with ASP.NET MVC. The main reason I did not go all the way with AngularJS was that SEO is not easily achieved with AngularJS.
Keep in mind that my site was already built using ASP.MVC + Jquery for in page interaction as needed.
On the other hand there is still some "Ajaxy" nature to the site like comments, voting, flagging etc. Not too different than Stackoverflow itself. Before AngularJS it was a mess of Jquery plugins and functions within $(document).ready() callback, not to mention the JS code was not testable much.
In the end, I went with both.
If you fancy using Java Script framework then Angular JS rocks.
SEO could be the issue. You need to have deeper understanding of DOM and Java Script as compared to other famous JS Frameworks.
I ve developed a Proof of Concept - using Angular JS with Require JS using ASP.net MVC
You can have a look at it at the below given link
http://angualrjsrequirejsaspmvc.blogspot.com/2013/08/angular-js-with-require-js-front-end.html
As I am newbie to JQuery. I have certain questions in mind regarding JQuery.
Can I make complete website with Jquery?
Means in ASP.Net website we use Server Controls to design page, Can we make all this functionality on .ASPX page using JQuery?
If yes, then how to handle server side events?
For designing .ASPX pages, what we prefer to use? JQuery standard controls or Plugin?
No. JQuery is not a server-side framework. It's a client side DOM Manipulation domain specific language and API that enables client-side code to work cross-browser, and includes a variety of utility and helper functions for AJAX, deferred callback resolution, and generic functional programming.
In short, it is not meant to replace your server-side code.
The jQuery framework is only a javascript library which means it can only handle events or actions on the client-side. It doesn't matter what backend you are using for your website (PHP, ASP.Net, Python), javascript only works once the page has been rendered and sent to the browser. Try reading up on the docs for jQuery here: http://docs.jquery.com/
If you have any questions specifically about jQuery programming, we would be more than happy to answer them.
I have a site that's done using ASP.NET MVC and jQuery. Is it possible to modify my existing project without too much of rework so that it can be used in phonegap to create iphone/android apps?
Here's an approach: move your logic to an MVC WebAPI (or other REST/webservice) project, then convert the MVC site into a simple html/javascript/css/image site (Mobile site). Then refactor your Mobile site to use Ajax/JS to query the WebAPI/Rest services you created. Once you've separated your code this way, you can then package the Mobile site with Phonegap. I'm not sure how much work that will be for you or your project. If you're using a lot of Html Helpers or Razor markup in your views it may be too involved.
The core point of my suggestion here is to separate your mobile UI layer and the backend processing layer so you can only package the Html5/UI/Javascript layer with Phonegap and leave the backend processing on your web server. I don't think I need to explain this, but obviously the app packaged with Phonegap is not going to have the MVC/.Net framework available on the mobile device to render views or execute controllers, etc. By migrating your UI to be simple Html5 and Javascript you can use Ajax/Jquery/Javascript calls against your backend, which you will probably want to host in ASP.Net MVC WebAPI.
Edit: Guess there was some confusion about my suggestion. I'm not saying this is the only way to do go, but this is what I'm familiar with as it's how our team builds our desktop/web + mobile + phonegap + mvc4 + webapi + kendoui application. This pattern works well for us so maybe it'll work for you too, or at least give you some ideas on how to structure your solution. Good luck!
I'm not sure but you need a server to compile the ASP.NET right? so I don't think that will work for you. I think you need to work with AJAX to do your ASP.NET work and separate your ASP.NET code and your HTML-jQuery because Phonegap wants a index.html file. You can store your ASP.NET files at a server tough
The answer to your question really depends on the type of site you are trying to convert. Are you just trying to put a native framework around HTML and get your app into an app store?
If it is is mostly or entirely informational in nature and you have simply used MVC to build brochure-ware type pages then it should be fairly easy to move. This assumes that there is little to no logic other than page to page navigation.
If your site instead pushes a lot of data around that relies on a back-end server you will need to re-architect it to store data locally or pre-fetch it via a manifest. Next you will need to implement a strategy that allows you to push your local data back to the server.
Does you app need to run in a disconnected state?
Phonegap is one of the options if you want to target multiple mobile platforms & may be most widely used. Since you are using jQuery, jQueryMobile will be a least learning-curve path to use. Effort is mostly on the front-end UI and will depend on how many screens you want to design to provide a sub-set or the full set of functionality you already have on the web UI. Most likely you will have to redesign your screens using the jquery-mobile UI widgets documented here. It is also a good way to show it to your customer the initial screen design with navigation.
jquery mobile is great for learning and designing , but it's slow in the web browser control that phone gap runs in .
you'll need a more lightweight framework for this .
you can use an inappbrowser control to show your site in case it's responsive , but you wont have the device camera and contacts and so ...
take a look at : http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
I've read the Sencha Touch docs. I feel its MVC model is very attractive but it seems to has a long start-up time, especially with external JavaScript (eg:map).
Although I'm comfortable using jQuery in a web site, I have concerns about the maturity of jQuery Mobile. (I haven't tested it yet)
I have no idea about Dojo's mobile framework.
Which of these alternatives do you like? Why?
So what exactly are you requirements? Each framework has different several advantages and disadvantages....
Me personally I use Jquery Mobile, which is now at it's first official release. Don't let version numbers fool you, this has been developed 1 year long and actually works pretty good!
The others provide different capabilities:
sencha is based on javascript controls - you create the whole layout from within javascript using JSON notation for properties/actions/events
jqm allows you to use your "standard" HTML and enhances it "auto-magically". In my opinion this is the closest to HTML you'll ever get
Dojo is more about MVC and allows a more structured environment. Haven't used it personally so I can't say too much about it...
Hope this helps