The road to reliable frontend

jakubniechcial

About me

jakubniechcial

jniechcial

niechcial.me

Software Developer, Team Leader @ netguru

I work with Ember.js, Rails and React.js

What is Ember.js?

Framework for creating

ambitious

web applications

Opinionated

and maintainable

on time

Architecture

Model - View - Controller - Route

Router.map(function() {
    this.route('post');
});

export default Ember.Route.extend({
    model() {
        return { id: '123', title: 'Super title' };
    }
});

Router definition

Route definition

Architecture

Model - View - Controller - Route

Defined

Out of the box

Architecture

Model - View - Controller - Route

export default Ember.Controller.extend({
    actions: {
        markAsFavourite() {
            this.toggleProperty('model.favourite');
        }
    }
});

Controller definition

Architecture

Model - View - Controller - Route

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class="body">
  {{model.body}}
</div>

Handlebars template

Architecture

Model - Component - Route

<h1>{{model.title}}</h1>

<div>
  {{model.body}}
</div>

export default Ember.Component.extend({
    actions: {
        markAsFavourite() {
            this.attrs.toggleFavourite(model);
        }
    }
});

<div class="post-wrap">
    {{post-viewer model=post toggleFavourite=(action "toggleFavourite")}}
</div>

Architecture

Model - Component - Route

Architecture

Model - Component - Route

Architecture

Model - Component - Route

REST

JSON API

JSON

Firebase

ActiveModelSerializers

Architecture

Model - Component - Route

Caching

Querying

Relationships

Polymorphism

Meta data

Architecture

Model - Component - Route

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import belongsTo from 'ember-data/belongsTo';
import hasMany from 'ember-data/hasMany';

export default Model.extend({
    title: attr('string'),
    body: attr('string'),
    
    author: belongsTo('user'),
    comments: hasMany('comment'),
});

Model definition