mastastealth

Summary

I wish Ember, which I find to be an awesome and enjoyable framework, was more popular and brought up more often in discussions across the web. I've contemplated what are realistic options are to help it accomplish this and compiled them here.

Glimmer Angle

When I see something like this: I wish I could see an Ember logo. Or perhaps more appropriately, Glimmer. I would love for Glimmer to level up as a library, and think it can be used as the entry point for folks to play with before diving into Ember. It can be the React/Vue/Svelte to Ember's Next/Nuxt/Sveltekit. Anywhere the above logos pop up, Glimmer should be there showing off it's lovely syntax.

More examples:

mastastealth

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

class Stuff {
  constructor(label) {
		this.label = label;
  }

  @tracked toggled = false;

mastastealth

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
	@tracked items = []

  @action
  add() {

mastastealth

import Component from "@glimmer/component";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class Test extends Component {
  @tracked selectedFiles = [];
  files = ["a", "b", "c"];

  @action
  handleFileToggle(file) {

mastastealth

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

mastastealth

import Component from '@glimmer/component';

export default class Notes extends Component {
  get itemCount() {
    return `(${this.items?.length || 0})`;
  }
}

mastastealth

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  shared = {
    page: 0,
    pageUI: 1,
    pageCount: 10,
    startIndexAtZero: true
  }

mastastealth

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  list: [
    { name: "Apple", colors: ["Red","Yellow","Green"] },
    { name: "Orange", colors: ["Orange"] },
    { name: "Grape", colors: ["Green", "Purple"] }
  ],
  newGrape() {

mastastealth

import Ember from 'ember';
import Table from 'ember-light-table';

const { computed } = Ember;

export default Ember.Component.extend({
  model: null,

  columns: computed(function() {
    return [{

mastastealth

import Ember from 'ember';

export default Ember.Component.extend({
  filter: null,
	click() {
		this.sendAction('addFilter');
	}
});