Skip to content

Commit 2bb5f66

Browse files
author
Robert Jackson
committed
Copy edits for upgrading/editions.md.
1 parent 8934766 commit 2bb5f66

File tree

1 file changed

+41
-48
lines changed

1 file changed

+41
-48
lines changed

guides/release/upgrading/editions.md

Lines changed: 41 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ If you're new to Ember, we recommend starting with the [Quick start and Tutorial
55

66
## What is Ember Octane?
77

8-
Over the past few years, many new features have been added to Ember with the goal of finally introducing a new programming model for the framework.
9-
This new model brings major gains in productivity and performance, via minor (non-breaking) releases.
10-
This allows for new apps to have the best features enabled automatically, while teams working on big apps can migrate over time, while still keeping their apps up-to-date with the latest release.
8+
Over the past few years, many new features have been added to Ember with the goal of introducing a new programming model for the framework.
9+
This new model brings major gains in productivity and performance, incrementally via a series of minor (non-breaking) releases.
10+
This allows for new apps to have the best features enabled automatically, while teams working on existing apps can migrate over time, while still keeping their apps up-to-date with the latest release.
1111

1212
Here are some of the core features in Octane:
1313

@@ -40,7 +40,7 @@ These have been replaced or made optional in Octane:
4040
values and DOM creation. Use Angle Brackets instead.
4141
- **The run loop**. App developers should never have to write code that interacts
4242
with the Ember run loop, even in tests.
43-
- **Ember "inner HTML" components**, and the confusing JavaScript API used to
43+
- **"inner HTML" components**, and the confusing JavaScript API used to
4444
configure a component's root element, like `tagName`, `classNameBindings`,
4545
etc. Now, there's no wrapping element.
4646

@@ -123,16 +123,22 @@ Angle Brackets have a number of benefits:
123123

124124
As you can see, both literal and bound values can be set on attributes, and
125125
attributes can be used _without_ setting a value at all, just like HTML
126-
attributes. The component decides where to put these attributes with the
127-
special `...attributes` syntax. This will be discussed later in the section on
128-
components.
129-
For classic components, attributes were placed on the
130-
component's wrapper element.
126+
attributes. The component you are invoking decides where to put these attributes
127+
by using the special `...attributes` syntax. This will be discussed later in
128+
the section on components.
129+
For classic components, only attributes that were explicitly listed by the component
130+
you are invoking would be placed on the component's wrapper element.
131131

132132
#### Getting used to Angle Brackets
133133

134134
Here is what is different about using Angle Bracket syntax.
135135

136+
The component name is in `CapitalCase` instead of `kebab-case`. `{{my-component}}` becomes `<MyComponent />`.
137+
138+
Components open and close in the same way as HTML elements. Components that do not accept
139+
a block can use the self closing syntax (a trailing slash) just like `<img />` or other
140+
tags.
141+
136142
_Arguments_ are passed by adding `@` to the front of the argument name:
137143

138144
```handlebars
@@ -143,12 +149,6 @@ _Arguments_ are passed by adding `@` to the front of the argument name:
143149
<Todo @item={{item}}/>
144150
```
145151

146-
The component name is in `CapitalCase` instead of `kebab-case`. `{{my-component}}` becomes `<MyComponent />`.
147-
148-
Components open
149-
and close in the same way as HTML elements. Self closing components require
150-
a trailing slash just like `<img />` or other tags.
151-
152152
When you pass a bound value to a component, remember that it needs to be wrapped in curly braces:
153153

154154
```handlebars
@@ -184,13 +184,13 @@ HTML attributes (HTML attributes without `=` default to truthy). If you still
184184
need positional arguments, you _must_ use the component with curly bracket
185185
syntax.
186186

187-
You can use Angle Bracket components with curly brackets within the same app, and even within the same template. This allows for gradual migration.
187+
You can use either angle bracket or curly brackets invocation for a given component within the same app, and even within the same template. This allows for gradual migration.
188188

189189
Angle bracket syntax works for invoking components of any type, whether they are classic style or not.
190190

191191
### Named Arguments
192192

193-
How can you tell if an argument in a template was passed in, or if it is defined on the component itself? Arguments that were passed in should use the `@` symbol. This style is called "named arguments."
193+
How can you tell if a given dynamic value in a template was passed in, or if it is defined on the component itself? Arguments that were passed in should use the `@` symbol. This style is called "named arguments."
194194

195195
```handlebars {data-filename=application.hbs}
196196
<!-- Passing the argument to the child template -->
@@ -207,7 +207,7 @@ How can you tell if an argument in a template was passed in, or if it is defined
207207
You can know by looking at the template whether an argument came from the same component or a parent context. You can also tell whether or not a value
208208
was ever mutated by the component's class.
209209

210-
Teams can gradually refactor an app to use named arguments, separately from upgrading to Angle Brackets. You don't need to worry about whether the parent used Angle Brackets. For example, this works just fine:
210+
Teams can gradually refactor an app to use named arguments, separately from upgrading to angle bracket invocation. You don't need to worry about whether the parent used angle brackets or curly brackets. For example, this works just fine:
211211

212212
```handlebars {data-filename=application.hbs}
213213
{{blog-post title="Hello, world!"}}
@@ -220,11 +220,13 @@ Teams can gradually refactor an app to use named arguments, separately from upgr
220220

221221
#### Getting used to Named Arguments
222222

223-
The most thing to know about named argument syntax is that an argument with an `@`
224-
_always_ refers to the _original_ value of the argument. If you change that
225-
value in a classic component, it will _not_ update:
223+
The most important thing to know about named argument syntax is that an argument with an `@`
224+
_always_ refers to the _original_ value that was passed when the component was invoked. If you
225+
change that value in a classic component, it will _not_ update:
226226

227227
```js {data-filename=blog-post.js}
228+
import Component from '@ember/component';
229+
228230
export default Component.extend({
229231
init() {
230232
this.set('title', this.title.toUpperCase());
@@ -256,7 +258,7 @@ If you find yourself forgetting to the `@` symbol, it may be helpful to think of
256258

257259
Finally, one thing you may have noticed in the above examples is a lot more
258260
references to `this` in the template.
259-
Values that are rendered from the local context must have a `this`.
261+
Values that are rendered from the local context must have a `this` specified in the path.
260262
The local context is the component or controller instance that backs the template.
261263

262264
```handlebars
@@ -277,7 +279,7 @@ a helper, a local variable, or a component property.
277279

278280
#### Getting used to `this` in templates
279281

280-
You can of `this` as meaning, an argument came from `this` component or controller, not a parent context.
282+
You can think of `this` as meaning, an argument came from `this` component or controller, not a parent context.
281283

282284
Local variables,
283285
introduced via a yield, can still be referred to directly (without `this`) since they're
@@ -312,9 +314,9 @@ For developers who are not already familiar with Native Classes, it's helpful to
312314

313315
For existing Ember users, Native Classes might seem a bit strange, but for developers coming from general JavaScript backgrounds or other frameworks, it might be hard for them to imagine Ember any other way.
314316

315-
Before classes were available in JavaScript, Ember developers still got to use some class-like features thanks to `EmberObject`.
317+
Before classes were available in JavaScript, Ember developers still got to use some class-like features thanks to `@ember/object`.
316318
Now that classes are available in JavaScript, we can do away with some of the
317-
`EmberObject` quirks.
319+
`@ember/object` quirks.
318320

319321
### Getting used to Native Classes
320322

@@ -460,18 +462,16 @@ values have changed, you must either decorate them with the `@computed`
460462
decorator, or use _tracked properties_.
461463

462464
Classic classes didn't have an equivalent for native getters and setters until
463-
recently, but you can define them now with the `descriptor` decorator:
465+
recently, but you can define them now with the standard JavaScript getter syntax:
464466

465467
```js
466468
export default EmberObject.extend({
467469
firstName: 'Katie',
468470
lastName: 'Gengler',
469471

470-
fullName: descriptor({
471-
get() {
472-
return `${this.firstName} ${this.lastName}`;
473-
},
474-
}),
472+
get fullName() {
473+
return `${this.firstName} ${this.lastName}`;
474+
},
475475
});
476476
```
477477

@@ -514,7 +514,7 @@ export default class Person {
514514
```
515515

516516
Notice that you don't need to pass in the `get` function to the decorator
517-
itself. Instead, the decorator gets _applied_ to a getter function, modifying it
517+
itself. Instead, the decorator gets _applied_ to the getter function, modifying it
518518
in place. Existing computed properties and computed property macros, including
519519
custom ones you've defined, can be used with this new syntax:
520520

@@ -580,23 +580,16 @@ export default class ApplicationController extends Controller {
580580
```
581581

582582
The action decorator also _binds_ actions, so you can refer to them directly in
583-
templates without the `{{action}}` helper anymore:
583+
templates without the `{{action}}` helper:
584584

585585
```handlebars
586586
<!-- Before -->
587-
<button onclick={{action 'helloWorld'}}></button>
587+
<OtherComponentHere @update={{action 'helloWorld'}} />
588588
```
589589

590590
```handlebars
591591
<!-- After -->
592-
<button onclick={{this.helloWorld}}></button>
593-
```
594-
595-
You should still use the `{{action}}` helper if you need to pass additional
596-
parameters to the action though:
597-
598-
```handlebars
599-
<button onclick={{action this.helloWorld "some" "values"}}></button>
592+
<OtherComponentHere @update={{this.helloWorld}} />
600593
```
601594

602595
#### `super`
@@ -677,15 +670,15 @@ In native classes this can be done with the `static` keyword instead:
677670

678671
```js
679672
class Vehicle {
680-
constructor() {
681-
this.id = Vehicle.count;
682-
Vehicle.incrementCount();
683-
}
684-
685673
static count = 0;
686674
static incrementCount() {
687675
this.count++;
688676
}
677+
678+
constructor() {
679+
this.id = Vehicle.count;
680+
Vehicle.incrementCount();
681+
}
689682
}
690683
```
691684

@@ -694,7 +687,7 @@ The `static` keyword can be applied to all class elements.
694687
### Tracked Properties
695688

696689
Tracked properties replace computed properties. Unlike computed properties, which require you to annotate
697-
every getter with the values it depends on, tracked properties only require to
690+
every getter with the values it depends on, tracked properties only require you to
698691
annotate the values that are _trackable_, that is values that:
699692

700693
1. Change over time and

0 commit comments

Comments
 (0)