jQuery isn't enough: – An introduction to Ember.js – BENEFITS OF A FRAMEWORK

View Github Repository Open presentation in a new window

kategengler

See all presentation from kategengler

jQuery isn't enough: – An introduction to Ember.js – BENEFITS OF A FRAMEWORK

0 0

introduction-to-ember-slides

On Github kategengler / introduction-to-ember-slides

jQuery isn't enough:

An introduction to Ember.js

Katie Gengler jQuery Conference 2013: Portland

@katiegengler

Freelance software developer from the New York area.

<CODE ALL DAY/>

katie@codeallday.com

ENOUGH WHAT??

Abstraction

What is Ember?

"A framework for creating ambitious web applications."

MVWhatever ... yes it does matter that it is MVC. It's good to evaluate a framework based on where their ideas are coming from, but you don't really *need* to know. That's the point of a framework, you can build upon the work of others. It's all about separation of concerns.

BENEFITS OF A FRAMEWORK

Keep team members on the same page.

Presumably up-to-date documentation that anybody can refer to. Style of application development that everybody can easily learn. There are 10000x ways you can structure a JS app, but a community-driven framework means that you have a standard to hold your apps to. Each new app won't be structured in a different way.

DRY

Don't repeat *yourself*, but why repeat everybody else, either? Frameworks, like most Open Source software, has the benefit of letting you leverage the experience of many developers, many of whom are much better than you are. The development on them also continues when you're not looking. I frequently find frameworks I use have performance improvements between versions that I was otherwise unaware of. Development on your product contiues even if you're not working on it. - odds are that you'll need to do the same thing more than once in an app - if not in one app, what about between apps? - are you reinventing the wheel each time? - are you copying code between projects? congratulations, you're on the path to creating your own framework!

Develop your application, not a framework.

DWIM ("Do What I Mean") - JS will never be able to read our minds to know what we intended - we _can_ make our intention very clear - write WHAT you want to happen, not HOW to make it happen

Better Maintainability

Again, the community is working on the framework, while you're working on your application, or other things. - We can't think of everything - Neither can framework authors but they benefit from an entire community of people - Fewer bugs - More robustness (fewer problems with edge cases)

DEMO

Photo GallerySource

EMBER'S STANDOUT FEATURES

All the benefits of a framework, plus:

Useful URLs

Keeps data in sync across the UI

Handles event delegation and View Hierarchy

Let's see what I mean ->

Cares about performance. Cleans up after you.

Let's see what I mean ->

Creating the application:

Pg = Ember.Application.create();

That's it!

The Router

Pg.Router.map(function() {
    this.route('index', {path: '/'});
    this.resource('galleries', function(){
      this.route('new');
      this.route('show', {path: '/:gallery_id'})
    });
    this.resource('photo', {path: '/photos/:photo_id'});
});

Route Definition

Pg.GalleriesIndexRoute = Ember.Route.extend({
    model: function(){
        return Pg.Gallery.find();
    }
});

linkTo Helper

{{#linkTo "galleries.index"}}Galleries{{/linkTo}}

Templates

{{#each photos}}
    <li>{{#linkTo "photo" this}}<img class="th" {{bindAttr src="thumbnailSrc"}}>{{/linkTo}}
{{/each}}

Controllers

Pg.PhotoController = Ember.ObjectController.extend({
    edit: function(){
        this.set('isEditing', true);
    },
    doneEditing: function(){
        this.get('model').save();
        this.set('isEditing', false);
    }
});

RESOURCES