EmberJS is a JavaScript framework for building rich front-end web applications. It uses conventions over configuration, data binding, and Handlebars templating. The architecture of EmberJS includes a router, controllers, views, templates, and models that follow specific naming conventions. An example application is provided that demonstrates how to build a company list with employees using EmberJS, Ember Data, and LocalStorageAdapter to manage relationships between models.

1. EmberJS
Building rich front-end apps
SOFTWARE FREEDOM KOSOVA ‘13 CONFERENCE
(7-9th September 2013)

2. What’s out there?
JavaScript
Backbone.js &
Underscore.js
AngularJS
EmberJS
Jquery

3. 2
Introduction of EmberJS
 URL, the heart of EmberJS
 Conventions over configuration
 Data binding
 Observers
 Handelbar.js
 Easy, not simple

4. iew
Artitecture of EmberJS
Browser
Router
Controller View
Template
Model
Store

5. Naming conventions
/companies CompaniesRoute
CompaniesController
CompaniesView
Model: Company
Template: companies
(Active code generation)

6. Example app
A company list with employees. Showing how to
add/edit/delete companies, add employees to
show how to manage relationships between
models. Used EmberJS LocalStorageAdapter and
Ember Data for this example.
Source: https://github.com/oxodesign/emberjs-
sfk13-example

7. Resources
 EmberJS official page
http://www.emberjs.com
 Ember Discussion Forum
http://discuss.emberjs.com
 EmberWatch
http://emberwatch.com
 Ember Weekly
http://emberweekly.com
 Empirio Lab
http://lab.empirio.no

8. ?
Questions
Flamur Mavraj
Web: http://www.empir.io
E-mail: flamur.mavraj@empir.io
Twitter: @oxodesign