jQuery Mobile Angular Adapter Redesign: Use jqm css only

[Tobias Bosch]

Hi,

after developing and using the jquery-mobile-angular-adapter we (the mobile team of OPITZ CONSULTING) came to the conclusion, that we should change it’s architecture:

Use angular and the css of jqm only, but not the JavaScript part of jqm.

Why?

• Download size: If you want to use the JavaScript part of jqm, you also need to use jquery. In total you need angular, jquery, jqm and the adapter. A lot of stuff…
• Performance: The original jqm widgets not always do things the most performant way. E.g. they use a lot of css selector queries. Furthermore, they usually only have one refresh method to refresh to whole widget (e.g. alistview), but not parts of it.
• Maintainability: Using the jqm JavaScript part requires some dirty hacks so that it works with angular. However, to maintain those hacks you need a lot of knowledge about the internas of jqm and angular.

This is very similar to the angular bootstrap integration: There is an adapter that uses the JavaScript part of bootstrap, angular-strap (http://mgcrea.github.io/angular-strap/), and another version that uses the boostrap css only from the angular-ui team (http://angular-ui.github.io/bootstrap/).

To ensure that our directives work correctly we will create special ui tests that compare the generated markup of our directives with the markup generated by plain jquery mobile. By this it should also be easy to keep track of changes in jquery mobile when they release newer versions.

Here are some questions:

• Does this make sense? What things should we especially care for when doing this?
• Did anyone already do this?
• Does anyone like to participate?

We will be hosting the new project here: https://github.com/opitzconsulting/angular-jqm

Feedback welcome!

Tobias (@tigbro)

[Pawel Kozlowski]

Hi Tobias, All!

Pawel from the angular-ui/bootstrap team here. First of all, you made
my day! I'm so happy to see another UI library evaluating the approach
we've taken with http://angular-ui.github.io/bootstrap/. I strongly
believe that this is a mid-term feature for AngularJS widgets (where
the long-term feature is probably in web components). So far I'm very
happy with the progress we were able to make on the bootstrap project
and the decision to abandon Bootstrap's JavaScript wrapping helped us
to have very lightweight library without any additional dependencies.
To add to all the reasoning behind this approach I would add the
following:

- you can take advantage of all the AngularJS infrastructure already
in place ($http, promises, data binding etc.).
- in terms of size - it is not only that you can drop jQuery
dependency and original JavaScript code - it is also often the case
that a directive re-written from scratch is _smaller_ as compared to
the wrapper code. This was one of the surprises for me
- you can externalize directive templates and as such make them
customizable - I think that people still don't realize the full power
of this. As an example there are tons of date pickers but usually it
is very hard to change they look and feel - it is usually hard-coded
in JS. With AngularJS directives all the markup can be externalized in
a template: https://github.com/angular-ui/bootstrap/blob/master/template/datepicker/datepicker.html


Of course it is not all without problems and there are number of
things that got us burned. This deserves a separate post and I would
be really keen on working with you guys through the number of issues
we've encountered in the bootstrap project so you can avoid those
pitfalls. But all in all I'm extremely pleased with the results and I
think that it was great to start just with bootstrap's markup / css
and ditch their JavaScrript - the result is a lightweight,
customizable library well integrated into the AngularJS ecosystem.

I won't have time to participate to the project itself but I would be
really keen on working with you guys on working out common solutions
to common problems, sharing our experiences etc. I also think that we
could join forces in evangelizing this approach and paving paths for
web-components.

@Tobias, let's get in touch to share as much experience as possible.
Later on today I will try to share some of the pitfalls that I believe
are important to avoid.

Good luck with the effort, I'm really happy to see this happening!

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Andy Joslin]

Hi Tobias! This is awesome :-)

I've started working on some similar things for angularJS + mobile.. I'm not really interested in making a directive library, but I think we could still team up a little bit.

I've recently started on a fake-scrolling library with angular, http://ajoslin.github.io/angular-scrolly/#/guide/overview

I'll be adding pull-to-refresh and virtual scrolling for large lists soon, too.  I think those will be valuable to have with jqm.

I also think we should figure out an angular mobile routing library that is able to compile some DOM of the connected pages early.  One of the main problems I've noticed with angular mobile applications at the moment is the compilation time of new pages.

Anyway, I love doing stuff with Angular & mobile and would love to chat with you sometime - hit me up on skype or gtalk:  andytjoslin 

[Eric Lemoine]

Hi Tobias

I'm not yet versed into developing Angular directives for integration with UI toolkits like jQM or Bootstrap so please bare with me. That being said I must confess that it worries me to see people integrating with UI toolkits by rewriting code as Angular directives. This sounds like duplicating effort, and a lot of maintenance work ahead. Or maybe you're creating a new mobile UI toolkit for Angular (using jQM as the initial code base) rather than integrating with jQM. Please do not take this as a negative feedback, just expressing my immediate feeling on this stuff.

Cheers,

--
Eric Lemoine

Camptocamp France SAS
Savoie Technolac, BP 352
73377 Le Bourget du Lac, Cedex

Tel : 00 33 4 79 44 44 94
Mail : eric.l...@camptocamp.com
http://www.camptocamp.com

[Marco Rinck]

This is an awesome idea, Tobias! 

Looking forward to this and if I'm able to, I'm glad if I can be of any help. And if its only to report some issues I find :-)

Marco 

[Tobias Bosch]

Hi Andy,

yes, we definitely need a fast routing part. Did you already find a solution that uses the default angular routing but still does not recompile a view on every route change?

I will do some research and then come back to you.

Yes, fake-scrolling would be nice especially for older Android devices (2.x). 

Tobias

[Tobias Bosch]

Hi Pawel,

thanks for your feedback!

We will do some initial coding, and then post our results here. Would be great to talk to you then!

Tobias

[Tobias Bosch]

Hi Eric,

thanks for your feedback!

Yes, we are duplicating some code from jQuery Mobile. However, performance and load time is crucial for mobile apps. And I really think we will gain with this approach for mobile apps. However, I don't think this approach is required for the integration of every js lib out there.

For the maintenance aspect:

- jqm has the goal of moving logic from js to css where possible, so we can benefit from this.

- The main problem with nice mobile apps is the css part, as it needs to be tested on many devices. jqm does this and as we are reusing it's css we can profit from that.

- The tests mentioned above should tell us whatever changed in jqm and also allow us to easily adapt.

- But you are right: For every new jqm release the integration needs to be changed too. However, one goal of the adapter is to simplify things to the default angular way. By this, we hope that the community could help here...

I hope everything will work out like we hope :-)

Tobias

[Tobias Bosch]

Hello all,

we now have laid the ground for implementing the various widgets of jquery mobile:

We have:

- working project setup, including Travis-CI and karma.

- working page animations (slide, fade, pop, ...) including feature detection for 3d animations with fallbacks

- fast page changes by a modified version of ngView that caches also the scope and the elements. We also precompile all entries in $templateCache on startup (this may be interesting for you to look at, Andy, as it's general purpose...)

- utilities for writing unit tests to compare the output of angular widgets with that of plain jquery mobile widgets.

- Github Tickets for every jquery mobile widget that we want to implement

The readme includes a getting started section (https://github.com/opitzconsulting/angular-jqm#getting-started), and we already have some docs written with the library itself (https://rawgithub.com/opitzconsulting/angular-jqm/master/doc/index.html).

We are just beginning, so feedback or even pull requests for some of the tickets would be awesome!

Tobias

[Andy Joslin]

Great job Tobias, that looks awesome :-) 

[Ken Yee]

On Monday, June 10, 2013 11:10:05 AM UTC-4, Tobias Bosch wrote:

we now have laid the ground for implementing the various widgets of jquery mobile:

Curious if you've tried swiping support yet?
Wondering if it's laggy...

[Tobias Bosch]

Well, 

the idea is to use ngSwipeLeft / ngSwipeRight for this (http://code.angularjs.org/1.1.5/docs/api/ngMobile.directive:ngSwipeLeft).

However, as jqm uses css animations, we are not able to align the swiping with the animations, i.e. once a swipe is registered, the animations is fully executed, and not only to the place where the finger is on the screen.

By the way, did I mention that we have browser history integration, so the when going back via the browser back button the animations are played in reverse!

Tobias

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/qG8YRwVaL_g/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Bruce Whealton]

Hi,

I would like to participate.  I was looking at some older code that I was updating to use JQuery Mobile 1.4 and wasn't very neat, the code was a bit sloppy.  I was taking the JSON returned from a WordPress JSON API blog (meaning I was using the JSON API plugin for the WordPress blogging platform)  and dynamically building up content to go into the div with data-role="content."  I thought there must be a cleaner and better way of doing this.  I was thinking at first, just using HandlebarsJS, Mustache or Dust.js to clean up the code.  Then I thought that I'd just jump right into Angular.js with JQuery Mobile.  I didn't realize that it would be complicated to just let Angular.js control parts of a page, like the div with data-role of content.  So, essentially, I was trying JQuery & JQuery Mobile, followed by JQM+JQ+Templates and finally JQ+JQM+Angular.js.  

     Now, I'm interested in this plan that you discuss here.  I'll have to get the repo and review it.  Not sure if you still need contributors or not.

Thanks,

Bruce