Marco Otte-Witte marcoow

Moduliarzing Ember.js while keeping sane defaults

These are some thoughts I had about Ember.js' future and potential areas to focus on. I did miss the #EmberJS2019 (by quite a lot) but I still though this might be worth sharing.

In the EmberConf 2017 keynote, Tom and Yehuda announced Glimmer.js and the idea of starting apps with Glimmer.js and then allowing people to install their way up to full Ember.js package by package. I've always been a huge fan of the idea (we even built and open-sourced a showcase PWA with Glimmer.js and our own website simplabs.com is a Glimmer.js app as well) but it never really took off.

I think it's time to go back to this idea and make it a reality. Providing a slimmer subset of Ember.js would open it up for many more use-cases that are not currently great fits (obviously mobile apps with hard requirements on minimal bundle size come t

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	init() {
	this._super(...arguments);

	console.log(Ember.get(undefined, 'property'));
	}

	import Ember from 'ember';
	import { equal, raw, collect } from 'ember-awesome-macros';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',
	isGood: equal(collect(raw('test')), collect(raw('test'))),
	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',
	actions: {
	clickcircle() {
	debugger;
	alert('clicked');
	}
	}

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	import Ember from 'ember';

	export default Ember.Component.extend({
	});

	<h1>ember-test-selectors and ...attributes</h1>
	<p>Have a look at the markup generated by this component.</p>
	<MyComponent data-test-foo="bar" class="test" />

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	things: Ember.A([1,2,3]),
	firstA: Ember.computed.oneWay('things.firstObject'),
	firstB: Ember.computed.oneWay('things.0'),
	firstC: Ember.computed(function() {
	return this.get('things').objectAt(0);