Juan Antonio Gómez Benito

Technical Architect

BBVA Next Technologies

EmberJS Madrid Organizer

@shokmaster086

/shokmaster

¿Qué es Ember.js?

Framework para construir aplicaciones ambiciosas

Convention over configuration

Con solera

Un framework con historia

Empieza la fiebre de Angular. Se sospecha que Google está detrás.

Las apps con Backbone empiezan a irse de madre.

React es aún un embrión.

Corría el año 2013...

- Empezó como MVC

- Documentación infumable

- Convenciones de nombres poco claras

- Pocos desarrolladores del Core

- Muchos elementos distintos:

   Route, Controller, View, Template, Model, Helper, Reopen, Mixin, Initializer, Router, Component...

- Lío en el router: resource/route

Los inicios fueron complicadillos...

Infierno en plantillas:

  {{outlet}}

  {{render "myTemplate"}}

  {{view objectView}}

  {{partial "myList"}}

Infierno en controladores:

  ArrayController

  ObjectController

  ControllerMixin

- Nuevos paradigmas en front-end (CoC, generación implícita...)

 

- Mucha potencia con muy poco código

 

- Router robusto, rutas anidadas. De hecho es la base de Ember.

 

- Ember CLI (de nada, Angular        )

 

- Glimmer VM en Ember v2.0

 

- Sensatez en las actualizaciones

...pero trajo muchas cosas ricas

Adrián González Rus

Software Crafter

BBVA Next Technologies

EmberJS Madrid Organizer

@adrigzr

/adrigzr

Ember a día de hoy

¿Cómo se ha adaptado a otros frameworks?

Ember 3.o

Native Classes

Angle Bracket

Elimination of jQuery

Native Classes

// Old style
import EmberObject, { computed } from '@ember/object';

export default EmberObject.extend({
   firstName: 'Adrián',
   lastName: 'González',

   fullName: computed('firstName', 'lastName', function() {
      return `${firstName} ${lastName}`;
   })
});



// New style
import EmberObject, { computed } from '@ember/object';

export default class Person extends EmberObject {
   firstName: 'Adrián',
   lastName: 'González',

   @computed('firstName', 'lastName')
   get fullName() {
      return `${firstName} ${lastName}`;
   }
}

Angle Brackets



{{!-- Old Style --}}
{{site-header user=this.user class=(if this.user.isAdmin "admin")}}

{{#super-select selected=this.user.country as |option|}}
  {{#each this.availableCountries as |country|}}
    {{#s.option value=country}}{{country.name}}{{/s.option}}
  {{/each}}
{{/super-select}}



<!-- New style -->
<SiteHeader @user={{this.user}} class={{if this.user.isAdmin "admin"}} />

<SuperSelect @selected={{this.user.country}} as |Option|>
  {{#each this.availableCountries as |country|}}
    <Option @value={{country}}>{{country.name}}</Option>
  {{/each}}
</SuperSelect>

Elimination of jQuery



// Old style
import Component from '@ember/component';

export default Component.extend({
    didRender() {
      this._super(...arguments);

      this.$('.button').click();
    }
});


// New style
import Component from '@ember/component';

export default class MyComponent extends Component {
    didRender() {
      super(...arguments);

      this.element.querySelector('.button').click();
    }
}

¿Qué diferencia a Ember de otros frameworks?

Release Management

Version Management

Deprecation Policy

Optional Features

Release Management

Draft

Canary

Beta

Stable

LTS

Long Term Support

Every 4 versions (aprox)

30 weeks of bug fixes

54 weeks of security patches

Release Management

Version Management

Semantic Versioning

Deprecation Policy

@ember/optional-features

$ ember feature:list
$ ember feature:enable some-feature
$ ember feature:disable some-feature

Sergio del Valle Salvador

Software Engineer

BBVA IT Spain

EmberJS Madrid Organizer

@svsalvador

Recapitulemos

  • Una nueva visión del framework
  • Cambios no retrocompatibles se introducen progresivamente en el framework durante el ciclo de una major.
  • Todos los cambios son opcionales
  • El coste de evolucionar un framework es muy alto
  • Los breaking changes dificultan la adopción de nuevas features y la migración de las aplicaciones existentes
  • Lecciones muy duras aprendidas de Ember 1.X
  • Native Clases
  • Decoradores
  • Glimmer components
  • Tracked properties
interface GlimmerComponent<T = object> {
  args: T;

  isDestroying: boolean;
  isDestroyed: boolean;

  constructor(owner: Opaque, args: T): void;
  willDestroy(): void;
}

Glimmer Components

Glimmer Components

// app/templates/simple-button.js
import Component from '@ember/component';

export default Component.extend({
  tagName: 'button',
  classNames: ['btn'],
  attributeBindings: ['role'],
  role: 'button',
});
<!-- app/templates/components/simple-button.hbs -->
Haz click!
<!-- app/templates/components/simple-button.hbs -->
<button class="btn" role="button">
    Hello, world!
</button>

Tracked properties

@tracked name;

get message() {
  return `My name is ${this.name}!`;
}

Tracked properties

export default class PersonalDataComponent extends Component {
  @tracked firstName;
  @tracked lastName;

  get message() {
    return `My name is ${this.firstName} ${this.lastName}`;
  }

  @action
  updateName(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

¿Y después?

2019-2020

  • RFC's!!!!
  • Continuar simplificando Ember
  • Modernizar el pipeline de construcción
  • Mejoras en la accesibilidad (proyecto ember-a11)
  • Optimizar para el crecimiento

Simplificando un framework

  • Eliminar funcionalidad deprecada o que otras librerías hacen mejor (lodash)
  • Disminuir el mapa de skills necesarios para comenzar a usarlo (Ember Octane obra tu magia)
  • Evolucionar Ember Data (Orbit.js)

Embroider

Crecer

  • Mejores guías y una curva de aprendizaje más suave
  • Mejorar como comunidad
  • Compartir nuestra experiencia
  • Habilitar la capacidad de experimentación

Mejorar nuestra productividad

Made with Slides.com