I’ve been exploring the use of webflow for integrating with more complex webapps, trying to get it to work with different app frameworks like ember, angular, and now finally knockout, as that seems the most compatible. I want to be able to use declarative binding type functionality. As a basic test, I followed the tutorial for Knockoutjs where they simply bind a form’s input field to a text element and I can’t get it to work.
Is there any inherent reason why it might not be possible to do this with webflow generated sites, assuming I’ve included the appropriate library and attached the proper data-binds and associated scripts?
I’d like to keep the sites maintained on webflow, not just download the code and cut and paste pieces and I’m open to using whatever web app framework might work. I think webflow has some incredible opportunities for further integration in this area.
Our team at classcast.co is using webflow for design, HTML, CSS and putting it in GITHUB, from there the Angular dev puts it into the appropriate structure and makes it up. Webflow stays the source of truth for any HTML or CSS so anytime a changes is needed we do it in webflow export it to Github and the Angular dev looks at what has changed from the github diff and updates the web app appropriatly.
Now that the HTML and CSS is cross browser compatible, cross device compatible, at least a 40% decrease in Turn around time for producing new features. So the small hassle of porting across isn’t a worry. Although that last point is still slightly annoying.
Thanks Aidan, I’m probably trying too hard to increase that turn around time you mentioned from 40% to like 80%. It seems with some minor changes to webflow, it could be possible to get there. Anyway, it’s fun pushing these tools to their breaking points. Wish they allowed custom widgets of some sort.
And I just tried again with Angular and it’s working now, so thanks again for the reply.
IF you use angular FYI, our dev’s are dropping the webflow.js as it conflicts with what we are doing with angular. But haven’t really invested time in trying to solve that problem.
Angular was a great choice over Backbone, and Ember and RAILS, we wrote apps in all.
I’m trying to keep the webflow.js file in my angular app so I can take advantage of more of webflow’s features.
I’m having some problems in some areas related to forms and in having both angular and webflow share events, but I’m thinking that it should be possible to hook into the webflow.js file from angular. This is kind of pushing my understanding right now of how javascript modules can interact, so it would be really useful to have some skeleton angular code that does something simple like allow webflow to animate a button on hover, but still allow angular to do something simple on a data-ng-click. Or if I can just see some code that calls into the webflow guts to start off an ix animation, I’d be happy…
For anyone interested, I wrapped my prototype/learning project into a grunt template that might hopefully help someone looking to integrate webflow.com into an AngularJS app. It comes with a sample webflow.zip which will automatically get parsed and inserted into a site structure that is served up to localhost:9009. Take a look at the gruntfile.js
Within that site, if you click “Customers” and hover over an X button, the webflow animation is not working because the inline style info is being stripped during template extraction for some reason. I don’t have time to figure that out right now, but the problem is detailed within a TODO if anyone can help.
Hi, just wanted to chime in and say that I am also building an Angular app with the UI design done in Webflow.
I’m currently working on getting the webflow.js to load properly. My case is that I’m also using UI-Router and finding that webflow has loaded and done all it’s initialization before my content is loaded in the router view.
Will post here if I come to a solution.
So far it’s a been a good working flow though - this is my first hiccup. Like @aiden, I version the webflow files separately in git and just migrate changes into my Angular codebase.
I fixed my issue with my webflow buttons not animating within partials loaded by Angular by just sticking a duplicate script load of webflow.js within each partial. Doing so, forced webflow to use it’s mechanism to inject the inline styles used for animations. I updated the gihub repo just now and included a webflow preview link.
Please tell me if you find a better way to initiate the load. On a side note, I found the option within a webflow Trigger Load Interaction, “Wait for assets to load” was screwing up my loading into Angular so I unchecked it.
Just a quick follow up letting folks know that my solution was to late load the webflow library from Angular using this handy module created by GitHib user @endorma.
Jumping in to this topic… so lets say I didnt want to use ANY webflow js interactions… and just use it to design the html css, i can get rid of the webflow.js and then lets say import into backbone?
