Central Penn .NET Code Camp – November 14, 2015

1. Emberjs and ASP.NET
Central Penn .NET Code Camp – November 14, 2015
Michael Melusky @mrjavascript

2. About the Speaker
 Michael Melusky
 Software Engineer for Audacious Inquiry in Baltimore, MD
 Instructor at Pennsylvania State University, Franklin and Marshall, and ITT Technical
Institute
 Regular speaker at Java and .NET user group meetings and code camps

3. What is Emberjs?
 Emberjs is a framework for creating ambitious web applications
 Basic knowledge of Node.js, Javascript and CSS 3 is required

4. Haven’t we heard this before?
 Backbone.js
 Angular.js
 Ruby on Rails
 ASP.NET MVC
 Spring MVC

5. Creating an Emberjs application
 npm install ember-cli –g
 ember new my-app
 ember server
 ** DEMO **

6. What makes up an Emberjs application?
 Templates
 Components
 Controllers
 Models
 Routes

7. Templates
 Templates, written in the Handlebars language, describe the user interface of your
application.
 In addition to plain HTML, templates can contain expressions, like {{title}} or
{{author}}, which take information from a component or controller and put it into
HTML.
 They can also contain helpers, such as {{#if isAdmin}}30 people have viewed your
blog today.{{/if}}.
 Finally, they can contain components such as a template listing blog posts
rendering a component for each post.

8. Components
 Components are the primary way user interfaces are organized in Ember.
 They consist of two parts: a template, and a source file written in JavaScript that
defines the component's behavior.
 For example, a blog application might have a component for displaying a list of
blog posts called all-posts, and another component for displaying an individual
post called view-post.
 If users can upvote a post, the view-post component might define a behavior like
when the user clicks the upvote button, increase the vote property's value by 1.

9. Controllers
 Controllers are very much like components, so much so that in future versions of
Ember, controllers will be replaced entirely with components.
 At the moment, components cannot be routed to (see below), but when this
changes, it will be recommended to replace all controllers with components.

10. Models
 Models represent persistent state.
 For example, a blog application would want to save the content of a blog post
when a user publishes it, and so the blog post would have a model defining it,
perhaps called the Post model.
 A model typically persists information to a server, although models can be
configured to save to anywhere else, such as the browser's Local Storage.

11. Routes
 Routes load a controller and a template.
 They can also load one or more models to provide data to the controller that can
then be displayed by the template.
 For example, an all-posts route might load all the blog posts from the Post model,
load the all-posts controller, and render the all-posts template.
 Similarly, a view-post route might load the model for the blog post to be shown,
load the view-post controller, and render the view-post template.

12. The Router
 The router maps a URL to a route.
 For example, when a user visits the /posts URL, the router might load the all-posts
route.
 The router can also load nested routes. For example, if our blogging app had a list
of blog posts on the left of the screen and then showed the current blog post on
the right, we'd say that the view-post route was nested inside the all-posts route.
 Perhaps the most important thing to remember about Ember is that the URL drives
the state of the application. The URL determines what route to load, which in turn
determines what model, controller, and template to load.

13. Write some more code…
 ** DEMO **

14. Ember enumerables
Standard Method Observable Equivalent
pop popObject
push pushObject
reverse reverseObjects
shift shiftObject
unshift unshiftObject

15. More code…
 ** DEMO **

16. Emberjs Object Model
 JavaScript objects don't support the observation of property value changes.
Consequently, if an object is going to participate in Ember's binding system you may
see an Ember.Object instead of a plain object.
 Ember.Object also provides a class system, supporting features like mixins and
constructor methods. Some features in Ember's object model are not present in
JavaScript classes or common patterns, but all are aligned as much as possible with the
language and proposed additions.
 Ember also extends the JavaScript Array prototype with its Ember.Enumerable interface
to provide change observation for arrays.
 Finally, Ember extends the String prototype with a few formatting and localization
methods.

17. Emberjs Object Model
Person = Ember.Object.extend({
say(thing) {
alert(thing);
}
});

18. Why choose Emberjs instead of Angular?
 Angularjs and backwards compatibility…
 In the end it’s your choice…

19. Roadmap for Emberjs
 Emberjs is moving away from Controllers
 Move everything into Components

20. Thank you for coming
 Twitter/Github:
 @mrjavascript