Menu icon Foundation
Documentation for Upgrade from Foundation 5 to 6?

I have a very large production e-commerce project running on v5 and am looking at v6 to see if it is worth upgrading. From playing with a few of the Plugins such as top-bar, sticky, tabs, forms, abide and others, there seems to be a number of changes in class names and data attributes that will require a significant amount of code changes to my v5 project which is using this syntax both in the php code templates but also as part of the dynamic user content which is contained in many database tables and columns.

Is there documentation somewhere of the known syntax changes, ideally on a plugin by plugin basis, so I can scope how much of an effort this is going to be? A list of plugins no longer used (such as Alert) and what it is replaced with (think Callout)?

Is there a graceful way to upgrade without rewriting the v5 code? Some type of backwards compatibility? If not what about future versions of Foundation? It can be very expensive to rewrite applications to support an upgrade, especially 3rd-party code (like a custom e-commerce module that uses Foundation 5 plug-ins) subcontracted out, where we do not want to incur the risk and expense of tampering with it.

I like the functionality of what I've seen in v6 but am finding I can't get some of the Plugins to work as expected (Sticky, Abide, Tabs linking for starters) and have not been able to get support so far for the issues I am running into. Ideally there would be backwards compatibility (at least for a reasonable period of time) to allow an upgrade without the risk and cost it will require for large projects.

upgrade

I have a very large production e-commerce project running on v5 and am looking at v6 to see if it is worth upgrading. From playing with a few of the Plugins such as top-bar, sticky, tabs, forms, abide and others, there seems to be a number of changes in class names and data attributes that will require a significant amount of code changes to my v5 project which is using this syntax both in the php code templates but also as part of the dynamic user content which is contained in many database tables and columns.

Is there documentation somewhere of the known syntax changes, ideally on a plugin by plugin basis, so I can scope how much of an effort this is going to be? A list of plugins no longer used (such as Alert) and what it is replaced with (think Callout)?

Is there a graceful way to upgrade without rewriting the v5 code? Some type of backwards compatibility? If not what about future versions of Foundation? It can be very expensive to rewrite applications to support an upgrade, especially 3rd-party code (like a custom e-commerce module that uses Foundation 5 plug-ins) subcontracted out, where we do not want to incur the risk and expense of tampering with it.

I like the functionality of what I've seen in v6 but am finding I can't get some of the Plugins to work as expected (Sticky, Abide, Tabs linking for starters) and have not been able to get support so far for the issues I am running into. Ideally there would be backwards compatibility (at least for a reasonable period of time) to allow an upgrade without the risk and cost it will require for large projects.

Jarryd Fillmore over 3 years ago

Yeah seriously, this is needed so bad. The actual docs in foundation 6 I find are lacking in terms of direction too.

Dennis over 3 years ago

Upgrading from Foundation 5 to Foundation 6 is a huge step. I did this too and ended up in a lot of issues the very first period. Almost eveything has changed in Foundation 6 so think about it before you decide to upgrade. It will take a lot of time, ofcourse also it depends how big the site is.

 

But... upgrading to Foundation 6 is totally worth. A lot of benefits I experience right now, such as the code is reduced significally, many bug fixes, new components, pretty good support etc...

Terry Schwartz over 3 years ago

That's a tough call. If you're heavily plugged in to Foundation for your site's functionality then it could be quite a fair bit of work.

 

I've found the documentation for Foundation 6 to be adequate but there isn't really any migration guide or graceful way to upgrade you pretty much have to go through it on a plugin by plugin basis and refactor the code and settings.

 

Most of this is fairly straightforward if time-consuming but some sections of your site particularly navigation modules may need a complete rebuild.

 

Is it worth it? Maybe... Foundation 6 is better but it probably won't radically alter or improve your workflow. One consideration is whether you use the full sass build or just the css. If you just use css you might be better off staying where you are, if you use the sass build staying current may be more important as changes in Sass could eventually cause problems with older versions of Foundation.

Jay Todtenbier over 3 years ago

Thank you Dennis and Terry. My site uses Sass and of course I'd like to take advantage of the lighter code and improved features. However, the site has over 400+ modules operating on 140+ database tables and uses just about every v5 Plugin- so far almost every one of them has had changes that have to be reworked in my code. Think for now I will try v6 only with a new project that is much smaller and see if I can work out the initial issues I am having with the Sticky, Abide and Tabs plugins.

Hope in future releases Zurb will consider backward compatibility as it cost too much for large complex projects to rewrite/refactor this much code just to use an upgrade. With new features I understand the need for new code but there should be a better way for existing code to work. Would also be helpful to have a Migration Guide so we can assess what we are getting into without spending what has been for me about 25 hours just to learn this would not be a wise investment for our project.

Knight Yoshi over 3 years ago

Backwards compatibility does the exact opposite of what one of the main objectives was for Foundation 6, less code and more modular. It was mean to be a clean break. Thus Foundation 6 intentionally does not have backwards compatibility.

 

Jay Todtenbier over 3 years ago

Understood. Just hard for some small businesses owners that make our living off of sales (not billable IT work) and don't have enough cash for a large IT rewrite. Look forward to working with F6 on new projects though. Thanks for the input Knight.

Joey Riso over 3 years ago

If Zurb wants us to continue on the journey, they need to provide a map. I, for one, don't have time to plow through the documentation and find all the quirks of upgrading a site that's already in production.

Come on, Zurb - if it's too hard for you to document what we have to do to upgrade, you're just asking us to evaluate options.

Knight Yoshi over 3 years ago

@Jay Foundation 6 is super easy to build upon, more so if you use build processes like Sass, Gulp, and Babel.

I've re-written my applications in ES2015 (ES6) which is easier JavaScript and used Babel to transpile it to ES5. To Once the module registers itself onto the Foundation object invoking it is as easy as adding data-module-name to the HTML element you want to invoke it on.

I've written some simple wrappers for ZeroClipboard, CodeMirror, and Screenfull using Foundation 6 module structure. With Foundation's self initialization, it makes keeping code very clean and with ES6 (transpiled) it's also easy to manage.

Jarryd Fillmore over 3 years ago

@JoeyRise I totally agree man! It's a huge upgrade, with so many holes and things you have to figure out on your own. Documentation should solve these problems.

Ken Greer over 3 years ago

6 months and still waiting for a 5 -> 6 upgrade guide. What's up? Has anything at all been done to date? If so, why not release a partial document? I've been waiting to upgrade my sites for 6 months.

Jay Todtenbier over 3 years ago

Can someone from Zurb share their thoughts on this conversation? Some of us made significant investments into large projects where we chose the Foundation framework. So far, my experience with version 6 has been very challenging at best. I appreciate that 6 has some new features and is faster and lighter but we can't throw away our investments in V5 and recode- especially when we have to figure it out on our own and are getting little help on the issues we are running into in v6.

Could there not be an option for v6 that is backward compatible to v5? What will future upgrades look like? Will we have to redo a v6 project to use v7 when that happens? When will v5 be retired forcing users to get to at least v6? These are real business issues that need to be considered for those who have large or complex mission-critical income producing projects.

I evaluated Twitter Bootstrap and Foundation 5 when looking for a responsive framework and chose Foundation 5. It is a great framework and I like some of the features of v6. I am finding it very hard though to get support for v6 and am concerned about making further investments into this framework due to recent support issues and potentially upgrade issues if we are to expect this in future releases. 

There is probably a lot I don't know or understand but that is kind of the point. Documentation and support go a long ways to help us make informed decisions. What say you Zurb?

Jay Todtenbier over 3 years ago

@Knight - sounds like you've got some experience and are doing some great things with v6. Would you consider creating some video training or hosting a webinar to teach others how to use these advanced tools and techniques? I for one would be interested and even open to making a reasonable donation for access to some video training. 

Knight Yoshi over 3 years ago

@Jay So you probably do not want to upgrade every time there's a new Foundation version released with shiny new stuff. Yes it's appealing, yes it can make things easier, but you have to evaluate your development life cycle. You need to look at if you are to a point where you need to retire the development cycle and build new. Depending on your project your life cycle will vary. You should structure a new development life cycle around the current versions of your resources. Which can be a painstaking process, as your modules may need complete rewrites.

 

When starting a new cycle, these things may be unavoidable between upgrades. Like between Foundation 5 and 6. Major version changes usually do require some changes between them, that's whey they're major change versions. You need to factor all these things in before proceeding to upgrade. In some cases, if it's early on in the development cycle you might be able to get away with upgrading to the next version of a resource.

 

I'm not interested in making videos or tutorials. It's not terribly difficult to make a module for Foundation 6.

Here's a basic example in ES6

'use strict'

!function ($) {
   class MyModule {
      constructor (element, options) {
         this.$element = element; // using $ to denote a jQ object
         this.options = $.extend({}, MyModule.defaults, this.$element.data(), options); // merge options into a single object

         this._init(); // initialize the module;
          Foundation.registerPlugin(this, 'MyModule'); // register this on the Foundation object.
      }
      // prefix methods with an underscore to denote it as private (it's not really 'private')
      _init() {
         // do stuff in init
         this._events(); // call events for your element(s)
      }

      _events() {
         this.$element.on(event, callback);
         // whatever other events your module uses
      }
      // anything else your module needs or public methods like an open or close method
   }

   Foundation.plugin(MyModule, 'MyModule');
}(jQuery);

 

Then in the HTML you would have something like

<!-- there's a dash between my and module because it's Pascal Case if it was Mymodule then data-mymodule -->
<div class="something" data-my-module></div>