jenweber

Improving the hello world app experience

We have learned from our users that it can be confusing to generate a new app and not be able to edit what you see when you run the app locally. We want to give our new users the chance to make small changes to the welcome page experience, as part of their learning journey.

How things work today

Today, by default, all new apps come with the ember-welcome-page, which

jenweber

Outline

Intro

touch on the overall goals what is different than Vue or React You can store state locally, and you can strongly relate records like a database would Tie in with attrs and belongs-to Managing models You have choices if you want to do something different Why use Ember Data over fetch (avoiding unnecessary queries, CRUD logic is not intermingled with the logic for the rest of your app, reactivity)

jenweber

- Intro - establish Ember as well-used a JavaScript framework. Include marketing differentiators.
- Philosophy - instead of philosophy and design - composition
- Features - un-editorialized
    - Zero Config
    - Components?, Component↔Service
    - HTML First
    - State management (tracked)
    - Testing (& Debugging?)
    - Decorators/it's just JavaScript
    - VM

jenweber

/* some buttons align left, others right, adjusts dynamically! */

.themer--top-edge-container {
  display: grid;
  position: fixed;
  top: var(--ch-spacing);
  right: var(--ch-spacing);
  left: var(--ch-spacing);
  z-index: var(--ch-actions-z-index);
  grid-template-columns: auto auto;

jenweber

<div class="grid-container">
  <div class="left-col">
    <h1>Customize the style of the {{@cardName}} Card</h1>
    <div class="display-wrapper">
      {{yield}}
    </div>
    <style id="card-styles"></style>
  </div>

  <div class="right-col">

jenweber

// Octane

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';

export default class MyOctaneComponent extends Component{
  @tracked status = null

  @(task(function * () {

jenweber

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
  	something(info) {
    	this.sendTheForm(info)
    }
  }
});

jenweber

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  firstname: '',
  lastname: '',
  fullName: Ember.computed('firstname', 'lastname', function() {
  	return `${this.get('firstname')} ${this.get('lastname')}`
  }),
  actions: {

jenweber

How to grow or save your favorite Open Source project

Link to slides

Transcript

Hi, my name is Jen Weber! I'm a member of the Ember.js core teams and soon I'll be working at Cardstack.

In the next five minutes, I’ll share proven grassroots organizing and sales strategies that you can use to grow your favorite open source project.

jenweber

import Ember from 'ember';

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