Getting started with Laravel and Ember

Apr 06, 2015

Table of contents:

1. What is a Frond-End framework?
2. What is a Single-Page Application?
3. Getting started with Ember.js
4. The structure of your Laravel and Ember application
5. Creating a new Ember project
6. Integrating Laravel and Ember
7. Hello World in Ember
8. Conclusion

Over the last couple of years, the user experience bar for modern consumer and enterprise web application has risen steadily.

Users now expect immersive, responsive and interactive user interfaces that respond and adapt to their input and requirements.

Front-end Javascript frameworks are all the rage these days. These frameworks provide a lot of the functionality and plumbing you will need to create an interactive client-side application.

There is a lot of interesting work going on in projects like Ember, Angular, React and Backbone. Each individual project has both strengths and weaknesses, but each is driving the others to improve.

I’ve chosen to use Ember for Cribbb and so today we will be looking at adding Ember to a Laravel project.

What is a Frond-End framework?

I’m sure if you’ve been reading this series for a while now you should be more than familiar with Laravel.

Laravel is a PHP framework that deals with a lot of the boilerplate, plumbing and structure of a PHP application so we can concentrate on building out the important stuff for our specific application.

A Front-End framework, such as Ember or Angular, provides much of the structure and components you will need to build a Single-Page Application.

For Ember this includes, routes, models, controllers, templates and views.

These frameworks provide the MVC structure (What is MVC? (Model-View-Controller) to keep your code organised and maintainable.

What is a Single-Page Application?

In a traditional web application, the user would navigate through the user interface by loading each subsequent page.

In a Single-Page Application, all the resources of the application are loaded on the initial page load. When the user clicks around the user interface, the application fluidly updates the interface by making requests to the server without reloading the page.

The benefits of using a Single-Page Application is that you generally get a better user experience out of the box. Functionality like data binding and loading of additional data just works.

The drawback of using a Single-Page Application is the fact that you have to load all of the resources of the application before the user has had a chance to do anything.

I think Single-Page Applications are perfect for web applications that need that kind of desktop-like experience. However, they are certainly not perfect for all types of application, particular those that have little to no interactivity.

Getting started with Ember.js

Ember.js makes it really easy to get started with a new project by providing the Ember CLI.

Ember CLI is a command line tool that can create a new Ember project, generate new code, run tests, serve your Ember application, build your Ember application and a whole load more.

Command line tools can seem a bit scary if you are not used to using them, but they will make your life a lot easier in the long run.

To get going with Ember CLI, first you will need to install Node. This will vary depending on your operating system. I’m running OS X, and so I usually install Node via Homebrew.

Once you’ve got Node installed, next you can install Ember CLI:

npm install -g ember-cli

Ember uses Bower to manage it’s dependencies. You can think of Bower as the Composer of the Javascript world. If you don’t already have Bower installed, you will need to install that too:

npm install -g bower

And finally, in order to run your Ember tests, you will need PhantomJS:

npm install -g phantomjs

The structure of your Laravel and Ember application

How you set up your application depends on how you see your application working.

The best approach is to keep your Laravel and Ember application as two separate repositories.

Your Laravel application acts as an API using something like Oauth for authentication.

Your Ember application is a standalone application that reads from your API.

However, for simplicity I’m going to keep the two sides of the application in the same repository. If setting up a separate API with OAuth etc is overkill for your project, you will probably want to take this approach too.

Creating a new Ember project

To create a new Ember project, go into the root of your project and run the following command:

ember new my-new-app

This will create the Ember project structure and the files and directories you will need. I’m going to call my Ember project frontend.

Once the process has finished you can see your Ember application in action by running the following command:

ember serve

Now you should be able to see the “Welcome to Ember” homepage by going to https://localhost:4200 in your browser.

Ember also has another nice little feature in that you can go to https://localhost:4200/tests and have the tests run. This includes an iframe in the bottom corner that shows your tests running in a browser.

Integrating Laravel and Ember

Running the ember serve command is great for when you just want to see the Ember stuff working, but we also need to be running Laravel in order to get the data from the back-end.

This is how I ended up implementing it, however, there might be a better solution.

Firstly add a catch-all route at the bottom of your routes.php file:

Route::get("{data?}", function () {
    return View::make("app");
})->where("data", ".*");

This should be the last route in your routes.php file so all other routes will take preference.

Next create a new file called app.php under resources/view.

Copy the HTML code from the index.html file under the dist folder in your Ember directory.

Finally, create a symlink from frontend/dist/assets to public/assets.

As I said above, I have no idea if this is the right approach for adding an Ember app to a Laravel project, but it seems to work for me. If you know of a better approach, please leave a comment!

Hello World in Ember

Finally to make sure everything is working correctly, create a new file called index.hbs under frontend/app/templates with the text Hello world.

Next run ember build and then check out your the “Welcome to Ember” homepage in the browser.. If everything went smoothly you should see your “Hello world” text.

Conclusion

If you’re new to front-end frameworks, or even just Javascript, this might be a lot to take in.

Over the next couple of weeks we will be getting to grips with Ember before worrying too much about integrating with the Laravel application.

Front-end frameworks like Ember or Angular make it really easy to build immersive and interactive client-side applications.

User’s expect this slick user experience from modern web applications.

By using a front-end framework you will save yourself from a lot of the headache and hassle of creating your next ambitious web application.

This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.