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.
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:
This should be the last route in your
routes.php file so all other routes will take preference.
Next create a new file called
Copy the HTML code from the
index.html file under the
dist folder in your Ember directory.
Finally, create a symlink from
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
frontend/app/templates with the text
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.
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.
To view a full listing of the tutorials in this series, click here.