Servage Magazine

Working with web development is often referred to by the names of the coding languages used in the process, e.g. PHP, Javascript, HTML and CSS. Behind those languages there is a plethora of possibilities and also a wide range of tools available to make development easier. We have been following the backend side for a while with a series of articles about Laravel, and continue this with the client side by introducing a series about how to work with the Ember Javascript framework. Ember helps you build a quick and nice front end using the current technology, which can work seamlessly with your Laravel backend.

Getting started

You can install Ember using an installer or NPM package. The Ember installation guide provides an easy overview of this process. Thereafter you have the “ember” command available and are ready to create your first project.

Creating an application

You can create an application using the “ember” command in your console. It generates the required initial files for the project.

ember new the_app_name

The application should now be available on “http://localhost:4200″ for testing.

Basic understanding of the framework

The Ember framework is structured like many other frameworks with a model-view-controller concept. It all starts with a route defining an endpoint. Routes basically listen to a certain URL pattern and when identified, execute a certain controller with a given template. The controller then performs the application logic for the specific endpoint, so it basically holds the custom code of your application. It can do so utilizing models, which are usually representing database tables or other relevant object entities in your application. Finally it renders templates by inserting values for predefined placeholders and responds to the client. Much of this evolves purely around the browser and is done by Javascript. You may use asynchronous data loading in the process, but essentially Ember projects are usually designed to run as an application, which not necessarily requires redirects and new page loads to complete its behavior.

Ember uses the Handlebar template language which makes it standardized and easy to implement. Furthermore you can use own or third-party components to include more functionality quickly. Components are code consisting of scripts with the component logic plus templates with the component output, so components can be reused across projects.

If you come from a backend framework like Laravel, you will find many similarities in the way Ember works. Keep in mind that the URL drives the application state by dictating controllers, models and templates to run (just like their counterparts in the server side frameworks do).