Zurb Foundation JS with AngularJS?

[Dan Levine]

Has anyone ported (or planning to port) some of the Zurb Foundation 4.0 JS functionality into Angular Directives?

http://foundation.zurb.com/docs/components/clearing.html

Would love to collaborate.

[Pawel Kozlowski]

Hi!

So, there is one idea we've been pushing as part of
AngularUI/bootstrap I would like to share here. So, we've started
http://angular-ui.github.com/bootstrap/ as a set of native AngularJS
directives (means no dependency on any 3rd party JavaScript: jQuey,
Bootstrap JS etc.). On top of this we try to write those directives in
the way that directive's logic is decoupled from directives
presentation. We try to encapsulate markup manipulation and CSS in
directives templates.

What it means that in the mid-term it should be possible to use all
those directives with any CSS framework! We are not 100% there yet but
it is close.

As an example let's take the pagination directive (principles are the
same for others). Here is bootstrap's version of it:
http://plnkr.co/edit/yc7s6z?p=preview but we can see that template is
externalized (https://github.com/angular-ui/bootstrap/blob/master/template/pagination/pagination.html)
and could be swapped for the Zurb Foundation-specific version.

Here is the proof (Foundation version of a template, directive wasn't
modified!): http://plnkr.co/edit/J5E5Am?p=preview


I hope that in the longer term we will have a set of native AngularJS
directives (JavaScript) and different sets of templates for different
CSS frameworks. We are starting with the Bootstrap version (as it is
the most popular one atm) but the vision is to work with any markup
and CSS.

@Dan and others, if the above makes sense for you it would be awesome
if we could join efforts in providing set of templates specific to
Zurb Foundation. Several people expressed already interest in it and I
believe that we could have something working pretty fast!

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.
>
>



--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Joel Davis]

Is this a lowest common denominator approach?  That is, are you re-writing the JS for basic functionality for each of these controls?  The pagination example would lead me to believe that, and looking at your implementation of the accordion control further leads me to think this.  When I look at something like Foundation, a big part of what I want is the JS they have already figured out to go along with their controls that make them cross-browser, responsive, etc.

I love the idea of abstracting out the concept of "accordion" into a directive that could be implemented by whichever UI framework is in vouge at the moment, but I'd also like to get all the goodies that come along with the JS of that framework without having to re-code or extract their JS into my directive.

[Dan Levine]

What are you proposing Joel?

--
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/Htkzt7Fsaog/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, 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.
 
 

--
- 

Dan Levine | CTO

w  http://www.styleseat.com

t    @styleseat / @danlevine

p   415.637.1468

[Pawel Kozlowski]

Hi Joel!

Thnx for your comments, those are very valuable. But would like to comment some more since in reality things a bit complex with AngularJS. I'm still about to write a blog post explaining all the reasons behind the http://angular-ui.github.com/bootstrap/ project (which I believe are not well understood) but just few comments here:

1) With AngularJS JavaScript code provided by bootstrap / foundation is not relevant in the AngularJS context. The reason for this is that the 2-way data binding machinery takes care of tons of things that normally we have to laboriously do in JavaScript, by hand.

2) Different lifecycle / philosophy - bootstrap and foundation JavaScript is based on jQuery philosophy of DOM manipulation. This is far different to AngularJS approach to UIs. This conceptual mismatch often times leads to hacks and flickering issues (it is very, very often that we would like to know when AngularJS "finished rendering" to execute some jQuery logic, but "finished rendering" concept doesn't make much sense in AngularJS world so people resort to using setTimeout(0) and similar hacks).

3) Integration with AngularJS APIs - with native directives it is possible to use promise API and many other goodies.

4) Customizability - AngularJS directives can have templates that can be easily customized by directive's users. With existing pluggins DOM manipulation is often buried in JavaScript code so bye, bye customizability. Relaying on templates for native directives is the thing that lets us reuse the same JavaScript code with markups from different UI frameworks.

5) Size matters - native directives are much, much smaller, even compared to directives that wrap existing JavaScript code. On top of this you don't need any dependencies.

In short what I'm trying to say here is that JavaScript coming with bootstrap / foundation isn't that valuable in AngularJS context as the same behavior can be re-created with less code and in more AngularJS way, with excellent integration with AngularJS APIs. The only real place where we face some issues is all the positioning madness (for tooltips,  popovers) but I'm sure that we can sort this out (this is the only code I would copy from existing plugins).

Once again, I need to write a longer post about it with concrete code examples.... Anyway, those are just how I think about those things and ready to change my mind if good arguments arise! 

Cheers,

Pawel  

On Thu, Apr 4, 2013 at 3:53 PM, Joel Davis <davis...@gmail.com> wrote:

Is this a lowest common denominator approach?  That is, are you re-writing the JS for basic functionality for each of these controls?  The pagination example would lead me to believe that, and looking at your implementation of the accordion control further leads me to think this.  When I look at something like Foundation, a big part of what I want is the JS they have already figured out to go along with their controls that make them cross-browser, responsive, etc.

I love the idea of abstracting out the concept of "accordion" into a directive that could be implemented by whichever UI framework is in vouge at the moment, but I'd also like to get all the goodies that come along with the JS of that framework without having to re-code or extract their JS into my directive.

[Joel Davis]

So are you saying in general I should expect that I'll have to write most of my own UI components unless I can find one already written in AngularJS.  Speaking of which, is there a marketplace for directives somewhere so I can get a feel for what is available?  In this specific case, I could take the work you have already done on the Angular UI bootstrap project and just add the functionality from Foundation that I'm wanting and update the HTML templates and I'd have what I'm looking for, right? 

Although I really love the way AngularJS works, I have to say that if this is the integration path, I feel a bit like I'm cutting ties with all my relatives in the homeland and setting sail for the new world never to return.  Hopefully, I'll be able to carve out a home for myself in this brave new frontier, but I won't get any help from home anymore.  It seems like a scary proposition.  The question is, "Is the promise of a better life worth the risk?"

[Josh David Miller]

Hello! Hope it's not too late to jump in here...

So are you saying in general I should expect that I'll have to write most of my own UI components unless I can find one already written in AngularJS.

Personally, that would be my advice, but you don't *have to*. You can wire up some callbacks and $apply calls to make a jQuery plugin work but as Pawel said, rewriting something in AngularJS often takes less work. jQuery doesn't have any of the binding or scope magic. When we cut out all of the jQuery code that makes up for that, we're often left with very little code. And when we put those few lines of code in an AngularJS directive, everything will work out of the box. So in balancing levels of effort, rewriting makes sense more often than it doesn't.

One thing that Pawel didn't mention is testability. jQuery can be a tough mother to test; most plugins out there (the vast majority!) include no tests. We can test our components and test them in the context of our app very seamlessly. Testing is very important to AngularJS.

I wrote a Stack Overflow post a couple of months back on migrating from jQuery to AngularJS that covers some of this in more detail: http://stackoverflow.com/a/15012542/259038. Also take a look at this directive to manage a fancy list of tags (it needs a little polish - I created it only as a demo): http://jsfiddle.net/joshdmiller/hAz5A/. Without comments, it took less than 20 lines of code and it will work out of the box in any Angular app. Most likely, it would take as many or close to as many lines of code to wire an existing jQuery plugin to work.

 

Speaking of which, is there a marketplace for directives somewhere so I can get a feel for what is available?  In this specific case, I could take the work you have already done on the Angular UI bootstrap project and just add the functionality from Foundation that I'm wanting and update the HTML templates and I'd have what I'm looking for, right?

 

Check out ngmodules.org. It needs a little cleaning, but there's a lot of stuff there. 

We want Foundation to work with UI Bootstrap - at least eventually. The goal is that you should only need to swap out the HTML template; the functionality itself should work out of the box, excepting crazy edge cases and workarounds. We have an issue to discuss this very topic: https://github.com/angular-ui/bootstrap/issues/260

I feel a bit like I'm cutting ties with all my relatives in the homeland and setting sail for the new world never to return.  Hopefully, I'll be able to carve out a home for myself in this brave new frontier, but I won't get any help from home anymore.  It seems like a scary proposition.  The question is, "Is the promise of a better life worth the risk?"

This made me laugh out loud. I promise you're not sailing to Jamestown.

Josh

[Jesus Rodriguez]

This is one of the best explanations I found in the entire internet. That post would be really handy to show to newcomers.

This makes me happy and "sad" at the same time. It is good that we can use what we want, we just need to rewrite the javascript part into angularjs. The whole idea is really really good, but I think that this makes angular learning curve a little more steep.

Nothing that a complete read of both angular-ui's bootstrap and twitter's bootstrap.js doesn't resolve.

Again, thanks.