Ember.js Jump Start

Author: Viacheslav Bukach

Table of Contents:

• Introduction• Core Concepts• The Tool• Few words on Testing

Ember is:

• Framework for creating ambitious web applications• Designed to build large/complex web application easily• Also ideal for building small apps• JavaScript MVC Framework for building SPA application• Set of conventions for building robust, testable, performant software

Why to use:

• Favors ”convention over configuration”• A lot of things are made for you• Managers complexity of large applications• You can use a little of code to build a complex app• Increased overall productivity

Learning Curve:

Ember is used by:

Other Companies | Some Products

Disabling Prototype Extensions:

By default Ember will extend prototypes of native js functions• Array implements

• Enumerable & MutableEnumerable & MutableArray & Array• String extended with functions like: camelize(),fmy()• Functions extended to annotate func as computed properties etc

• property()• observes()• observesBefore()

• To disable extensions:

Disabling Prototype Extensions | Ember Enumerables

Objects:

• Classes created by extending Ember.Object:• Support for inheritance• You can override the parent class method, but still access the implementation• init is invoked when object is created• use set/get accessors on properties to support for correct bindings• use reopen keyword on class name to:

• specify additional properties • override methods

Classes #1 | Classes #2

Get Ember:

• Download from official web site• Use node package managed command• Yo generators: npm install –g yo, npm install –g generator-ember• Starter Kit

Core Concepts:

• Application • Templates• Router• Route• Controller• Models• View/Components

Core Concepts

Application:

• Starting point in every Ember app• Defines a namespace• Manages other components• Orchestrates the lifecycle• Points to consider:

• Events Delegation

Core Concepts

Behind the scenes:

Naming Conventions:

Naming Conventions | Default Resolver | Resolve Tutorial

Templates:

• A key part in defining used interface• Used in most cases• Based on Handlebars (mustache.js)• Support for templates nesting• Auto-updating, when model changes• It is possible to use other templating engine

Handlebars | Emblem.js

Application Template:

• The default template that is rendered when you app starts• Serves role of the master page• At least 1 {outlet} helper is required• The application template is:

• First unnamed template in templates list• Template named(id): data-name=“application”• Application.hbs file

HTMLBars:

Major update to Ember• Templating library build on Handlebars• No Metamorph script tag• Increased performance of Ember application• Loops much more efficient • New Syntax• No JQuery dependency

HTMLBars | Metamorph tags horror | HTMLBars #2 | Performance Test

Router:

Understanding of proper use of Router in ember app is fundamental core concept of the framework.Router: • Orchestrates state changes in the app via url changes• Matches current URL to defined Routes• Passes parameters to Route• Support for nested routes

Defining Routes

Resource VS Route:

• Route nesting === Template nesting• Resource usage automatically created Index route

Nesting

Route:

• Initializes the model• Manages async model retrieving• Refreshes model data• Rendering appropriate template• Overrides default controller name• Specifies Controllers state, by setting up its variables( setupController hook)• Changes default controller• Makes transitions and redirects to other routes

Route

Getting Data For the Route:

Defining Routes

Controller:

• Decorates model with display logic• Sets up template with data, retrieved from route• ViewModel kinda.• There are 3 types of Controller: ObjectController, ArrayController, Controller

Controller #1 | Controller #2

Controller’s needs:

• “Needs”: become extremely helpful when we dealing with nesting• It is used to access parent model•

Managing Dependencies | Dependency Injection

Computer Properties:

• Function declared as a property• A way to decorate (extend) model with display data• Observes properties they depend on and dynamically updated, when properties changed• Supporting Set operation• Works well with Array model as well

Computed properties

Computed Properties: @each

Instructs Ember to update bindings and fire observers for computed properties:• Item removed• Item added• Array replaced with other array• Property used in @each is changed from any record in the collection

NOTE: @each only works one level deep and it is not possible to nest @each

Computed Properties

Observers:

• Observes property changes(regular/computed)• Synchronous• Fire when initialization on object is complete

Observers

Bindings:

• Creates link between 2 properties• Could be applied on different objects• Supported for any object• Bindings are updated when code finished running

Bindings

Ember Data:

• Library for robustly managing data in Ember applications• Ember Data is in beta• Ships as separate library• Core Concepts

• Store – central repository of records. Controllers and Routes have access to Store.

• Model – is a class that describes the data type provided by server• Records – instance of model. Identified by type and id• Adapter – object that knows about server backend, responsible for

requests making to server• Serializer – turns JSON into records• Automatic Caching

Ember Data

Describing the Model:

• Attributes are used when turning JSON into records and back• Support for: One2One, One2Many, Many2Many

Ember Model | Ember Model Maker

REST Adapter:

• Responsible for loading/saving records• URL Conventions• Support for customization

• Host• Namespace• Pluralization

Customizing Adapters

JSON Conventions:

Views:

• Responsible for encapsulating templates of HTML content• Adds degree of reusability• Translates primitive events into events that have meaning in your app• Built in Views are used via input helpers• Ember.Select - view is not covered by input helper

Ember.Select view | Input Helpers

Components:

• Based on W3C Web Components Specification• Ember Component is actually Ember View• Isolated• Reusable Requiremets• Name starts with: components/• Name contains dashes: blog-post

View Layer

Rendering With Helpers:

• The {{partial}} helper• Takes template to be rendered• Uses current scope as template scope

• The {{view}} helper• Works like partial helper, but view class must be provided

• The {{render}} helper • Takes 2 arguments

• Context• Optional model parameter

Rendering with Helpers

Tools:

• Yeoman’s Ember Generator (Deprecated)• Ember-Tools (Not Maintained, Merged with Ember App Kit)• Ember App Kit (Deprecated)• Ember-CLI. It is focused on improving developers productivity

Ember tools | Generator | App Kit | Ember-CLI

Ember-CLI:

• Command line utility which provides a fast asset pipeline powered by Broccoli and strong conventional project structure• All the compilations happens in the background, when you are changing the files• Modules: ES6 Module Transpiler which turns ES6 module syntax into AMD (require.js syntax)• Dependency Management: CLI uses Bower package manager to keep UI dependencies up to date• Use ember generate to create required objects

Ember CLI | Using CLI | Folder Layout | CLI Tutorial

Testing With Ember:

• Special test helpers are defined to make your life easier• Async• Sync• Wait helpers• You can define yours

• All the components could be tested separately

Testing #1 | Testing #2 | Testing #3

What next:

• Run Loop: #1, #2, #3• View Layer Advanced• DI & Service Lookup

Defining Routes |

Q&AWatch seminars on www.youtube.com/user/softengi