You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guides/release/upgrading/editions.md
+41-48Lines changed: 41 additions & 48 deletions
Original file line number
Diff line number
Diff line change
@@ -5,9 +5,9 @@ If you're new to Ember, we recommend starting with the [Quick start and Tutorial
5
5
6
6
## What is Ember Octane?
7
7
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.
11
11
12
12
Here are some of the core features in Octane:
13
13
@@ -40,7 +40,7 @@ These have been replaced or made optional in Octane:
40
40
values and DOM creation. Use Angle Brackets instead.
41
41
-**The run loop**. App developers should never have to write code that interacts
42
42
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
44
44
configure a component's root element, like `tagName`, `classNameBindings`,
45
45
etc. Now, there's no wrapping element.
46
46
@@ -123,16 +123,22 @@ Angle Brackets have a number of benefits:
123
123
124
124
As you can see, both literal and bound values can be set on attributes, and
125
125
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.
131
131
132
132
#### Getting used to Angle Brackets
133
133
134
134
Here is what is different about using Angle Bracket syntax.
135
135
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
+
136
142
_Arguments_ are passed by adding `@` to the front of the argument name:
137
143
138
144
```handlebars
@@ -143,12 +149,6 @@ _Arguments_ are passed by adding `@` to the front of the argument name:
143
149
<Todo @item={{item}}/>
144
150
```
145
151
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
-
152
152
When you pass a bound value to a component, remember that it needs to be wrapped in curly braces:
153
153
154
154
```handlebars
@@ -184,13 +184,13 @@ HTML attributes (HTML attributes without `=` default to truthy). If you still
184
184
need positional arguments, you _must_ use the component with curly bracket
185
185
syntax.
186
186
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.
188
188
189
189
Angle bracket syntax works for invoking components of any type, whether they are classic style or not.
190
190
191
191
### Named Arguments
192
192
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."
194
194
195
195
```handlebars {data-filename=application.hbs}
196
196
<!-- 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
207
207
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
208
208
was ever mutated by the component's class.
209
209
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:
211
211
212
212
```handlebars {data-filename=application.hbs}
213
213
{{blog-post title="Hello, world!"}}
@@ -220,11 +220,13 @@ Teams can gradually refactor an app to use named arguments, separately from upgr
220
220
221
221
#### Getting used to Named Arguments
222
222
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:
226
226
227
227
```js {data-filename=blog-post.js}
228
+
importComponentfrom'@ember/component';
229
+
228
230
exportdefaultComponent.extend({
229
231
init() {
230
232
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
256
258
257
259
Finally, one thing you may have noticed in the above examples is a lot more
258
260
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.
260
262
The local context is the component or controller instance that backs the template.
261
263
262
264
```handlebars
@@ -277,7 +279,7 @@ a helper, a local variable, or a component property.
277
279
278
280
#### Getting used to `this` in templates
279
281
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.
281
283
282
284
Local variables,
283
285
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
312
314
313
315
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.
314
316
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`.
316
318
Now that classes are available in JavaScript, we can do away with some of the
317
-
`EmberObject` quirks.
319
+
`@ember/object` quirks.
318
320
319
321
### Getting used to Native Classes
320
322
@@ -460,18 +462,16 @@ values have changed, you must either decorate them with the `@computed`
460
462
decorator, or use _tracked properties_.
461
463
462
464
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:
464
466
465
467
```js
466
468
exportdefaultEmberObject.extend({
467
469
firstName:'Katie',
468
470
lastName:'Gengler',
469
471
470
-
fullName:descriptor({
471
-
get() {
472
-
return`${this.firstName}${this.lastName}`;
473
-
},
474
-
}),
472
+
getfullName() {
473
+
return`${this.firstName}${this.lastName}`;
474
+
},
475
475
});
476
476
```
477
477
@@ -514,7 +514,7 @@ export default class Person {
514
514
```
515
515
516
516
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
518
518
in place. Existing computed properties and computed property macros, including
519
519
custom ones you've defined, can be used with this new syntax:
0 commit comments