Kuba Niechcial
I am senior software developer and team leader at netguru, Poland. I work mostly with Ember.js, React and Ruby on Rails. I am passionate blogger and you can find out most of my work on my website.
The road to reliable frontend
About me
Software Developer, Team Leader @ netguru
I work with Ember.js, Rails and React.js
What is Ember.js?
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
Tooling
Build process
Dependency management
Test framework
Deployments
Serving
Real case
First developers were experienced in JS, but not in Ember
First major Ember production app in netguru
Goal: ship on time with maintainable codebase, but also develop good practices for the company
Developers
5 long term, over 10 juniors
Commits
Results
Codebase with up-to-date design patterns
Jumped 8 minor versions and 1 major of Ember
Not an exceptional test coverage, but including unit, integration, acceptance and end-to-end testing
Summary
Abstractions over rendering, data and routing
Opinionated approach to common problems
LTS versions for reliability
Ember has up to date approach and patterns
Thanks
The road to reliable frontend
By Kuba Niechcial
The road to reliable frontend
Frontend can be reliable, easy to understand and maintainable code base if you are using Ember.js. I will describe basic concepts of Ember.js architecture and share with you my experience and results from project where over eight developers started learning Ember.
