NullVoxPopuli

Vite

For more details: The embroider roadmap

• See actively maintained demos:
  • https://github.com/NullVoxPopuli/polaris-starter
  • https://github.com/embroider-build/embroider/tree/main/tests/vite-app
• Additional Work Needed
• embroider-build/embroider#1744

NullVoxPopuli

import Component from '@ember/component';

export default class ItemComponent extends Component {
  didInsertElement() {
    console.log(`item ${this.item} was inserted`); 
  }
}

NullVoxPopuli

RFC#570: Background, motivation, reasoning.

Converting an addon to the v2/native format is described in detail here

NOTE: "v2 addons" are also known as "native packages", "native addons", "npm native", etc.

---

benefits tl;dr:

• Vite compatible (along with other packagers, rollup, etc)

NullVoxPopuli

What's new since Octane?

All of this will be part of what makes up the next edition, Polaris (which is still being defined and explored)

NullVoxPopuli

Learning Resources

• The Ember Tutorial
• How to think about Templates
• Rack and Roll with EmberJS
• Book: Pro Ember Data by @iamdtang
• @wycats is starting a video series
• @Shawn Chen's Ember.JS tutorial for beginners
• @knownasilya YouTube tutorials
• Gavin Joyce painting game in 20 minutes
• The latest emberconf

NullVoxPopuli

import React from 'react';

export const Foo = <>
  test {expression + expression} test
  
  {[].map(item => {
     return <div>{item}</div>
  })}
  
  <div></div>

NullVoxPopuli

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

export default class ApplicationController extends Controller {
  queryParams = ['test'];

  appName = 'Ember Twiddle';

  @service router;

NullVoxPopuli

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

export default class ApplicationController extends Controller {
  @tracked records = freshArray();

	@action addFirst() {
    log('add:first, expect one each log');
    this.records = [{ id: this.records.length + 1 }, ...this.records ];

NullVoxPopuli

<h2>Checkbox</h2>
<input
  checked={{this.value}}
  type='checkbox'
	{{on 'input' this.handleInput}}
  {{on 'change' this.handleChange}}
>

<button {{on 'click' this.changeValue}}>Change the value externally</button>

NullVoxPopuli

import Controller from '@ember/controller';

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