Post on 16-Jul-2015
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
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
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
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
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