New Responsive Engine [beta] is Live!

Too much drama

2 Likes

Why making a new one? Because they wanted to switch to the use of flexbox and all the features and possibilities it gives. But that required a different way of constructing pages in the editor, so they had to redo the whole experience.
The new system of working with columns and rows is not compatible with the drag and drop experience it is currently.

I understand your frustration, as the learning curve is steeper, but it is required to make better designs in Bubble, as the old responsive design engine didn’t allow for creating something that looks it comes from 2022, more like 2015.

1 Like

I’m pretty sure Bubble will allow you to use the old engine as it does with old apps/plans.

I’m intrigued. 150 pages? Over the years I’ve built many huge software projects but none came to 150 pages.

2 Likes

I have a question. If I upgrade my free hobby app, will I lose its status? I know the plan was removed and I’m afraid updating will change my app as well as I do want to keep it as a hobby plan… edit: not sure if it’s called hobby plan. It was removed last year I believe and those of us who hadn’t updated yet were allowed to keep our old plans.

Yes, if you upgrade from any legacy plan or the hobby plan you will lose it as you’re upgrading to a new plan.

I learned that Bubble Support has no way of reinstating it too.

We made 130K this past year with our bubble app (www.rapide.ly). It’s not the engine that makes the profitability, but what the app can do for its users I think.
I love the new responsive engine as it allows me to have a much more professional looking app than before. Working right now with a UX/UI designer and most of what we put in place would not have been possible (or very difficult) with the old one. And it’s so much faster.
Hope it answers your questions.

10 Likes

For those who would an opposing viewpoint to what is being posted here, check out this post on the Bubble blog written about me:

How this no-code founder built an AirBnB for boat docks (bubble.io)

Solo founder with no prior technical experience who built the whole product himself 100% on Bubble, no outside help whatsoever, and profitable.

2 Likes

My profits from bubble is a combination of income from products I sell (saas) and also from development for my clients.

One of my clients is now doing over $20,000,000 a year since we launched his app called organflights.com.

Clearly, bubble applications are helping people create highly profitable businesses.

Btw bubble doesn’t create success. Solutions to big problems create success.

3 Likes

Going to take the opportunity to respond to your original questions here - but apologies that you had a poor experience migrating your page to the new engine. We are still looking into ways to improve this process so any additional feedback here would be helpful.

Why new

  • While the legacy responsive engine was great for making a basic page responsive out of the box, we were finding that users were quickly hitting the limit of what was possible with the old responsive engine. One of the top feature requests was the ability to have more control over the responsive behavior of their app, rather than allowing Bubble’s responsive algorithm to do most of the heavy lifting. When we explored ways to iterate on the legacy responsive engine, we kept hitting the same roadblocks - more control was not really possible with how the engine was created - and simply put, a lot of common responsive layouts were just simply not possible. More on this below. Furthermore, the world has evolved since 2012 and CSS flexbox is the industry standard for modern responsive web development.

Why so different from the old version?

  • The legacy responsive engine is essentially a giant javascript algorithm that runs on-the-fly calculations to resize and reposition elements based on user settings and best guess assumptions about desired behavior. The benefit of this approach is that simple pages will be largely responsive out of the box and this approach served Bubble and its users well for a number of years. On the other hand, if our assumptions were not correct, users would be forced to spend considerable time tweaking settings and creating workarounds (or even worse, using custom code) to get their desired behavior. In addition, all of these on-the-fly calculations meant a lot of rendering & scripting times on page load or page re-sizing resulting in generally poor performance & snappiness of bubble pages.

  • The new engine is based entirely on CSS flexbox & grid - the industry standard for modern web development. This new foundation solved the two big problems mentioned above - control & speed. By exposing these settings to users, no layout would be impossible and bubble pages would get a big boost in performance as CSS would be responsible for resizing and repositioning - not some big js algorithm. Our challenge, however, was to present all of these new responsive controls to users in a manner that was intuitive and allow them to opt into predictive responsive behavior rather than make best guess assumptions. To that point, I think we did a decent job - but there is certainly still a lot of work to be done to get the user experience and learnability where it needs to be. This is also why the responsive engine is currently in beta. We need users using the product to really know whats working well and what isn’t - but we also didn’t want to force anyone onto something new. From the beta so far, we’ve released a number of updates based on that feedback, and have a lot more to come.

  • Maybe the largest sticking point is the migration from old responsive to new responsive, as outlined above, these are based on two fundamentally different technologies. While we are investigating better ways to migrate existing pages, there are two options to upgrade: Maintain responsive behavior but add a bunch of new containers to the page or Migrate as is, but in fixed width. Users have found success using either option depending on their use case.

What is the result of the improvement?

  • Based on CSAT surveys and qualitative feedback so far, users actually prefer the new responsive engine over the previous engine. That might not hold true for everyone, but overall, there has been an improvement in satisfaction.

  • Almost any responsive layout is now possible. To test this in practice, we made sure we could easily build any of the layouts webflow’s flexbox website https://flexbox.webflow.com/. More features are also on the way based on user feedback to make the engine even more powerful and easier to use.

  • Performance. There is a notable performance boost on pages using the new responsive engine as compared to legacy pages. In addition to general page load speeds, the snappiness of a page as it is resized or content changes is better. New responsive doesn’t solve all of Bubble’s performance woes, but certainly makes a difference and helps unlock new performance optimizations down the line.

I hope the above helps answers some questions around why we chose to go down this path - and again, thank you for your feedback on the new responsive engine.

As for other claims around the profitability of companies built on Bubble, I kindly ask that you move these questions to another thread, so we can focus this thread on discussion and feedback around the new responsive engine.

20 Likes

Thanks, @nick.carroll. Awesome overview and explanation.

Indeed.

And along with slaying the “giant” comes lighter weight pages by virtue of fewer DOM elements comprising the page. That is, Bubble pages are far less of a “div soup” with the new engine (which plugin devs will certainly appreciate). These 2 factors alone - less JS and fewer elements - are no doubt responsible for a large fraction of the performance gains.

Looking forward to Bubble getting even leaner, meaner, and easier to use.

:+1:

-Steve

3 Likes

@nick.carroll, thanks for this comprehensive overview.

I’m new to Bubble, coming over from Webflow, so I quite like the move to CSS flexbox and started building using the new responsive engine right away.

You mentioned:

I’m having a few challenges with this, but it sounds great! Any possibility to have a look at how you guys have replicated this?

Also, one big thing that seems currently missing is to have more control over Flexbox properties in conditions.

Something that’s been an issue for me multiple times already is the fact that I cannot change a container’s layout from “Row” to “Column” on smaller breakpoints. Especially that part seems to be missing when I try to replicate some of the elements of the Webflow example you mentioned above.

Is this feature on the roadmap? Or is it somehow already feasible?

As a professional developer/agency owner, Bubble Bootcamp Instructor and content creator who has a responsibility to teach others how to use Bubble (students, employees, subscribers) and was 100% proficient in the old engine, I can feel your pain when it comes to change. Definitely not something I was excited about having to spend the time to first learn it myself, and then to create new materials to teach others. I also didn’t complete understand the reason for a complete redesign of the system, rather than a tweak to the existing.

However, I completely understand why Bubble did it and get the benefits moving forward.

I also have experience with Bubble making changes to the platform that affect the early adopters, namely with the change in pricing of subscriptions and I can vouch from that experience that Bubble is true to their word. They stated that they would grandfather in existing applications for 2 years, and 2 years to the day they took that away. I wouldn’t see any reason to not trust Bubble when they say if you want to remain on the old system you will be able to.

Congratulations! Sounds like once you get the funding you will be in a great position to spend some of that on a developer to transition your existing designs onto the new responsive engine so your app will benefit from using the new engine while you will then be free to do all the hard work the company leader would need to do.

Good luck with everything moving forward.

2 Likes

@nick.carroll Any ETA on when the conditionals will allow for max/min width and height settings?

I am trying to recreate the designs from here Visual CSS flexbox builder | Webflow and I can not without the ability to control the height and width settings conditionally based on the page height and page width as part of a conditional dynamic expression.

Has anybody been able to recreate the fluid-grid design? Doesn’t seem possible in Bubble.

2 Likes

Surprisingly, none of the designs on that page seem to be mobile responsive - i.e. the layouts don’t adapt (stack) on smaller screen widths. Instead, all the cells/columns just get narrower. Am I overlooking or misunderstanding something there? Or maybe those examples are just not intended to demonstrate breakpoints?

(Can’t wait for padding and breakpoints in Bubble.)

-Steve

1 Like

I was trying to test in practice myself and although some are kind of possible at the moment, most are not.

What? Drag-n-drop is gone? Sounds weird. Will check out the new engine soon.

1 Like

I love the new responsive engine. :slightly_smiling_face:

1 Like

Agree, that’s an essential feature!

1 Like

EditorX cant do anything like Bubble can. Go build a social network or marketplace on EditorX and let us know how it goes.