Streaming live at 10am (PST)

Can I use Webflow to create the front end of a Ruby on Rails dynamic app?


#1

If yes:

How would the pipeline work?

  1. Are there any limitations to be considered?

  2. Any blog post or case study about someone that has done this before would be really useful!

Thanks a lot,

Cesc


Exporting webflow to Rails
#2

The answer (Yes) is almost in the question: Webflow creates front ends. A website/web-system/web-app can be powered by PHP, Ruby, NodeJS or whatever, the front-end is still HTML. Usually developers take you static HTML pages to turn them into templates. They'll replace your static elements with variables, make lists loop etc...

There is no limitation (Webflow has some, read till the end). Only HTML/CSS/JS limitations. Although you need to provide a cleaner work than if you were making a static website. Prototype first, then redo from scratch, to have a nice and clean .classes and IDs structure, with well-thought dependencies. Your developers may also want you to respect a certain basic structure and name rules that can save them a ton of time when they turn your pages into a theme.

Find a way to work with devs so that they respect as much your stylesheets as they can, so future design modifications can still be done in the Webflow project and integrated into the Ruby app. You need to get them on your side, show them Webflow and explain how better the UI will be if everybody works to keep as much compatibility as possible. Export code as soon as possible and show them the file structure, because this is something you have absolutely no control on, so they need to deal with it. ($10 they'll yell a bit because the .htmls don't have their own folder or something) Think ahead things like localization, urls if there's a browser version, page titles and all the meta stuff. Make sure you understand that the logic of symbol in Webflow is lost upon publishing/export. If this logic has to be recreated in your app, once again make sure it doesn't prevent future graphic updates without having to put a ton of work on the dev side.

That's all I have in mind. We just pushed online a 20+ Webflow site update, all the pages are controlled by the Drupal engine of the previous site. It acts now half as a CMS, for dynamic content, half as an Apache server, to spot what page you ask, in what language etc.. then it displays it and writes a cool URL in the browser. All that works with untouched exported Webflow code. So when client ask a visual modification we just have to git push Webflow code and it just works. It's www.kds.com . When you arrive on content with a different (older) layout, you're on older Drupal pages. It's a transitional system. Once we can get rid of the past content, it's going to be a javascript-powered-webflow-code website : )


#3

Awesome answer, thanks a lot smile

One more thing that I didn't mention in the initial question:

Can you export certain portions of HTML from Webflow that are used for partials? (footer, header...)

In other words, how do you work when a page is dynamically created by multiple pieces of HTML?

Can you still use Webflow to create this HTML pieces and combine later in the backend code?

Thanks again!


#4

As I said, you have to be aware that you lose the "symbol" logic upon exporting. This logic has to be recreated on your app, possibly.

To answer your question, I guess yes, you can design header and footer in specific pages inside your project (it has to be inside to share the CSS), export them and then reassemble them in the app using either for head and foot or by pasting these two sections into the main page(s) code. For some projects I have such pages where I design a popup window, a form etc, that are integrated on top of certain pages.

edit : I'm thinking that in the case of an iframe integration, elements can be designed in their own webflow projects. But it naturally seems to be not the thing to do unless you have serious reasons to do it.


#5

Thanks for your answer vincent!


#6

Since I wrote the previous message, we're using this technique on a website, right now. The old website was a Drupal. We made a new set of master files with webflow, they link eventually to some parts of the old Drupal website. To give the old Drupal the same look and navigation, we integrate webflow pages as "header" "navbar" and "footer". Does the trick and allow for smooth transition.


#7

Nice.

Just to make sure I'm understanding you properly. That means that you design things like "footer", "header" or "navbar" in their own webflow pages (one page per element) and then combine these in the templates of your site.

Is this correct?

Thanks again!


#8

It could be correct but it's not necessarily like that.

I design my footer, navbar and header where I want. Most likely when I design the homepage. They are SYMBOLS elements in Webflow, so they are the same, and in sync, in every page of the site.

Then I create three extra webflow pages named "header" "footer" and "navbar", in which I put just the relevant symbol (header symbol in header page, etc).

These pages are used to be integrated with


#9

Ok, thanks for the clarification smile


#10

Hi...just discovered webflow a few days ago.I am a rails developer. Was curious if you managed to use the template you made using webflow with rails.


#12

#13