Streaming live at 10am (PST)

Problem with Webflow JS -> Only for developers

We, at our company, are developing a website and we’re facing a problem at the moment.

So, our design team is using Webflow and our programming team is using Polymer which is a framework that benefits from using Shadow DOM.

The problem is that Webflow generates every Javascript interation and function in the same file, thus creating an issue for the development team when specific Javascript is needed inside the specific Shadow DOM component.

Bear in mind we’re somewhat inexperienced with Shadow DOM and we might be missing on something here, regarding on how Shadow DOM works and what might be the best way to tackle this problem.

Our question is have you ever used Webflow and Shadow DOM in the same project? If so, how did you manage the interations Javascript from Webflow and the Shadow DOM?


Help… anyone!!!

Hello Rui,
What are your developers trying to do that they cannot accomplish?

It sounds like you are wanting to create WebComponents from the code generated by Webflow?
Is this correct?

It also sounds like you want to use the interactions in your WebComponents as well. Is this correct?

I am very familiar with Polymer and can tell you that this isn’t an issue with shadow dom specifically.

I am guessing your developers want the javascript in a way that is easy to add to the components they have broken the page design into and are wanting Webflow to generate this code in an easier to consume way. Is this correct?

We currently don’t support this way of exporting code, but I would really like to hear how your developers want the output so we can try and define this feature better.

Thank you for taking the time to pos this to the forum. Very appreciated. :smile:

Hello Kristofer,

Tks very much for your reply

We are creating Web Components from the code generated from Webflow. We also want to use interactions in Web Components.

Our developers are using dart and dart-polymer to build a web app. The pain points are:

  • There is no easy way of extracting only the necessary javascript to use in a webcomponent

  • Our skills in javascript and jQuery are low, and as our deadlines in this project are very tight, it’s difficult for us to reorganize the exported javascript interaction.

  • The javascript generated from dart is quite heavy. We would like to keep to a minimum the dependencies necessary for the javascript webflow interactions

If there was a way of exporting the javascript code that was more modular, and easy to integrate with web components (in our case dart-polymer) and did not add much overhead, that would be great. :smile:

@Rui_Almeida Thank you very much for your input on this topic.

We have been thinking of ways to make Webflow export more developer friendly and having an idea of the use cases our users have is an important part of this.

We will definitely take this into consideration when we start to work on updating export.

Thanks again!

I have normally used webflow for very small brochure sits, which is fine. But recently I used webflow to create the front end of a large site. We exported the code but my backend developers are telling me it is too hard to use the webflow exported code. The problems they are facing are:

larger CSS File
unwanted javascript codes in the core webflow javascript file
The generated HTML has longer classes, which again will become larger file again
Also, the important issue is - it is difficult to sync the code once we start integrating the webflow developmed theme into any CMS or custom programming sites

What can my developers do to make using the webflow exported code viable for integrating it for larger website projects?

They are telling me I can no longer use webflow for large projects. Which is not the news I wanted to hear. Can anyone shed some light on this?

Webflow is generating very clean HTML code and if your devs have issues with implementing any backend onto it then maybe the problem is within the way the site is built?

One of my biggest projects within Webflow has a smaller css file than bootstrap, so I’m not sure if that is any point…

Yes. Thank you. I will pass this on to them. Because I want to continue using webflow because its a more enjoyable way of creating sites for me and my clients.

It surely is :) I’m currently using Webflow as a frontend for my sails.js apps. I’m starting to build something huge with that :P But eta for this will be in 2 years or so…