Menu icon Foundation
MVC for Zurb Foundation

So being new to the game, what are recommended MVC's that can integrate Foundation easily. I know a lot of people use Ruby on Rails, but my other work uses PHP. I would like to use Laravel, but I am not sure how easy it is for Foundation to roll into Laravel. Does anyone have any input on PHP MVC's that are easy to integrate with Foundation? Also, when do you know your project needs a MVC (in terms of site size or certain functionality)?

laravelPHPCMV

So being new to the game, what are recommended MVC's that can integrate Foundation easily. I know a lot of people use Ruby on Rails, but my other work uses PHP. I would like to use Laravel, but I am not sure how easy it is for Foundation to roll into Laravel. Does anyone have any input on PHP MVC's that are easy to integrate with Foundation? Also, when do you know your project needs a MVC (in terms of site size or certain functionality)?

Erik M over 4 years ago

The nice thing about Foundation is that it is "backend agnostic". In other words, you should be able to use any backend framework with it (including laravel). I havn't personally used laravel, but I have heard good things from those who have used it so it might not be a bad place to start if you already have php experience.

As for "when" an MVC structure becomes necessary... well that is a bit more complicated. I'd like to expand on the question and say when does a database become necessary. Frameworks like angular offer a database agnostic MVC structure and can be incredibly useful for a web app that doesn't need a database, but does need interactivity. That said, angular apps can still utilize a database, they just aren't required to. If that sounds like something you are interested in I'd recommend checking out Foundation for Apps because it bootstraps the angular app for you (in other words you can start working immediately).

So my two cents is this - If you are going to be handling large volumes of data probably look into using an MVC with an actual database powering it, like laravel, sails, or rails. If you are just looking for interactivity on a few areas of the app you might be able to reduce complexity and save time using Foundation for Apps (but of course, if you are trying to learn angular for the first time this might not be as efficient).

Hope that helps. If you have any more questions I'd be happy to discuss them.

  • Erik

James Stone over 4 years ago

To answer this question I will first rephrase it into several questions:

1) How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?
2) Why would I use a server side MVC framework?

Let’s start with #1: “How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?”

There are three main ways to integrate a front-end framework like ZURB Foundation with a PHP MVC framework. These approaches also work for non-MVC based PHP sites and apps as well.

1) Use an asset-pipeline for your MVC framework to handle your JavaScript and Scss assets
2) Externalize your asset generation using a build tool such as Compass, Grunt or Gulp
3) A hybrid approach, use the asset-pipeline for things such as javascript files and a build tool such as Grunt

To better understand the first approach you must understand what an asset-pipeline is and why it is useful. From a quick search online, it appears that Laravel supports a rails like asset-pipeline so that is worth looking into. It even appears that it can build Sass/Scss files. I have not personally tested this with Foundation, but in theory it should work.

On the front-end you have two different distinct modes of development. In dev mode you want to work with pristine un minified separate JavaScript files.

This is because you want to be able to quickly debug and understand exactly which line of which file is causing issues. You want to look at the code in its original form with comments to aid in the debugging process.

In the production mode things are completely different.

You typically want a single javascript file, at the bottom of your page, loaded with the defer attribute set, minified, without comments and perhaps mangling the code. Google Closure Compiler does this for example by renaming your variable and function names to single letter equivalents, i.e. functionOne, thisLongFunction2, and someCrazyLongNameOfAVariable becomes a, b, c. This takes up less space and should load quicker.

For Sass and Scss things are a bit different, but in simple terms as you are getting started, you want to load a single css file that is minified and without comments in the <head> of your file for production. For dev you want to enabled comments (so you can see which original file your CSS is generated from) or source maps (so in chrome you can see which specific file your CSS is generated from in devtools) and to have it expanded and nested so you can clearly see hierarchy.

In short, a single-crazy-small-file that only a computer can read for production and a easy for humans to read, with comments and lots of whitespace for dev.

An asset pipeline accomplishes this by setting up patterns in which you can tell your framework to load up specific distinct files and then serve them up differently depending on wether or not you are in production mode or dev mode.

There are two main ways this is implemented.

The first way is that you use a special syntax in your JavaScript file (you should create a single JavaScript file for your project that links to others). This is how things are handled in Ruby based projects that use the Sprockets Asset Pipeline (used by RoR, Middleman and others).

For example

  //= '/path/to/my/awesome/library'

These are then picked up and interpreted depending on the mode. As an advanced thing there is the concept of precompiling your assets which just means you are not wasting time doing this on the fly every time someone hits your server.

The second way this is implemented is by having a specific file and syntax that handles which JavaScript files to import. There is literally no difference in the way that this works in the final implementation, there is just a difference in how you link to the individual files and libraries. The source ordering here is important and you may need to use a specialized PHP link tag to import your generated JavaScript or CSS.

Be sure to check your Asset Pipeline docs for details.

Our 3rd approach, the hybrid, is in my observation on of the most common ways of implementing ZURB Foundation on PHP based projects. Here typical the Asset Pipeline is used for JavaScript only and a build tool (typically grunt or gulp) is used to generate all of the CSS.

This has all the benefits of handling your dev vs. production JavaScript in an easy to use package. This runs very quick and is a well tested solution.

Generation of Scss assets into CSS is a less tested territory in the world of PHP. The article referenced above states that it is able to generate the CSS using the Asset Pipeline, but your milage may vary. There is also the SCSSPHP project that looks interesting.

The problem with generating CSS from Sass or Scss though is that it is very slow. So slow in fact that new complied c libraries such as libsass have come onto the scene to speed things up.

Unless you are doing something special, such as setting sass variables on the fly via php variables, I don’t see much of an advantage to having things compiling your scss on the fly.

Let’s circle back to part 2 of your question: Why would I use a server side MVC framework.

In my opinion there are two main reasons you want to use a MVC framework.

First, for larger projects or teams it helps to keep everything organized in a consistent way (assuming your team is following these conventions).

The second reason is one that is great for solo developers and small projects alike. Using a MVC framework such as Rails on Ruby or Laravel (or any of the other frameworks) is that is allows you to quickly scaffold and build out a site or app without having to spend a lot of time reinventing the wheel.

All of your basic CRUD (Create Read Update Delete) services are typically already taken care of and you can more or less quickly add, remove and update tables and access the data in the database without really knowing a lot about the underlying technologies. This is great because you can focus on building out your application logic rather than all the usual bits and pieces that go into making these simple calls.

So in my opinion, ZURB Foundation should work equally well with nearly all PHP MVC frameworks.

Choosing one that has a flexible and configurable asset pipeline will give you the greatest flexibility in setting things up and optimizing your dev and build states.

The question about which Framework is really more a matter of preference, your familiarity with it, the popularity and support of the project, and the amount of community and support behind it.

alvataylor about 2 years ago

I am interested web rolling sky.