The document is a comprehensive guide on Ember.js, a JavaScript MVC framework for building ambitious web applications, detailing its core concepts, tools, and testing methods. It covers the framework's favoring of convention over configuration, the structure of applications, and the importance of the router, models, and components. Additionally, it provides insights into Ember CLI for productivity and testing strategies for applications built on Ember.js.

1. Ember.js Jump Start
Author: Viacheslav Bukach

2. Table of Contents:
• Introduction
• Core Concepts
• The Tool
• Few words on Testing

3. 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

4. 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

5. Learning Curve:

6. Ember is used by:
Other Companies | Some Products

7. 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

8. 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

9. 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

11. Core Concepts:
• Application
• Templates
• Router
• Route
• Controller
• Models
• View/Components
Core Concepts

12. Application:
• Starting point in every Ember app
• Defines a namespace
• Manages other components
• Orchestrates the lifecycle
• Points to consider:
• Events Delegation
Core Concepts

13. Behind the scenes:

14. Naming Conventions:
Naming Conventions | Default Resolver | Resolve Tutorial

15. 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

16. 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

17. 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

18. 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

19. Resource VS Route:
• Route nesting === Template nesting
• Resource usage automatically created Index route
Nesting

20. 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

21. Getting Data For the Route:
Defining Routes

22. 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

23. Controller’s needs:
• “Needs”: become extremely helpful when we dealing with nesting
• It is used to access parent model
•
Managing Dependencies | Dependency Injection

24. 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

25. 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

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

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

28. 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

29. Describing the Model:
• Attributes are used when turning JSON into records and back
• Support for: One2One, One2Many, Many2Many
Ember Model | Ember Model Maker

30. REST Adapter:
• Responsible for loading/saving records
• URL Conventions
• Support for customization
• Host
• Namespace
• Pluralization
Customizing Adapters

31. JSON Conventions:

32. 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

33. 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

34. 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

36. 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

37. 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

39. 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

40. What next:
• Run Loop: #1, #2, #3
• View Layer Advanced
• DI & Service Lookup
Defining Routes |

41. Q&A
Watch seminars on www.youtube.com/user/softengi