WIP - Octane Guides #455
WIP - Octane Guides #455
Conversation
|
Thank you for setting this up! |
|
@lisaychuang - as a newcomer to ember, can you go through the guides and provide feedback please? |
| object and Ember Data will send them along with each Ajax request. | ||
| (Note that we set headers in `init()` because default property values | ||
| object and Ember Data will send them along with each ajax request. | ||
| (Note that we set headers in `constructor()` because default property values |
There was a problem hiding this comment.
this is no longer true w/ ES6 classes.
class ApplicationAdapter extends JSONAPIAdapter {
headers = { ANOTHER_HEADER: 'Some header value' }
}will not place anything on the ApplicationAdapter prototype
| @@ -30,15 +30,15 @@ ember generate component button-with-confirmation | |||
|
|
|||
| We'll plan to use the component in a template something like this: | |||
|
|
|||
| ```handlebars {data-filename=app/templates/components/user-profile.hbs} | |||
| ```handlebars {data-filename=src/ui/components/user-profile/template.hbs} | |||
There was a problem hiding this comment.
should this be reverted, in light of MU project layout not shipping with octane?
| @@ -0,0 +1,99 @@ | |||
| In a component template you can display two types of value, | |||
| properties of the component object, | |||
| or values passed into the component. | |||
| properties of the component object, | ||
| or values passed into the component. | ||
|
|
||
| To use a property you prefix it with `this`, like so: |
There was a problem hiding this comment.
| To use a property you prefix it with `this`, like so: | |
| To use a property, prefix it with `this` like so: |
| super(...arguments); | ||
| } | ||
|
|
||
| @tracked |
There was a problem hiding this comment.
needs an import to make this example complete
| headers: computed('session.authToken', function() { | ||
| export default class ApplicationAdapter extends JSONAPIAdapter { | ||
| @service session; | ||
| @tracked session.authToken; |
guides/release/models/index.md
Outdated
| using native JavaScript methods like | ||
| [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | ||
| Some developers write all their own code to handle API requests, | ||
| using native JavaScript methods like |
There was a problem hiding this comment.
| using native JavaScript methods like | |
| using native browser APIs like |
reword so as not to imply that all JS environments provide fetch at this time
| normalize(typeHash, hash) { | ||
| hash['songCount'] = hash['song_count'] | ||
| delete hash['song_count'] | ||
| return this._super(typeHash, hash); | ||
| return super(typeHash, hash); |
There was a problem hiding this comment.
elsewhere it seems like ...arguments is used. Why are we doing things differently here?
|
|
||
| export default Route.extend({ | ||
| export default class ApplicationRoute extends Route { | ||
| @service store; | ||
| model() { | ||
| this.store.pushPayload({ |
There was a problem hiding this comment.
kind of odd that this model hook isn't returning anything. Wouldn't we want to return what we pushed?
| import $ from 'jquery'; | ||
|
|
||
| export default Route.extend({ | ||
| export default class ConfirmPaymentRoute extends Route { | ||
| @service store; | ||
| actions: { | ||
| confirm(data) { | ||
| $.ajax({ |
There was a problem hiding this comment.
might be a good time to update this to fetch, and potentially async/await
|
|
||
| ## Handling Action Completion | ||
|
|
||
| Often actions perform asynchronous tasks, such as making an ajax request to a |
There was a problem hiding this comment.
ajax HTTP b/c it's 2019 💥
| To define a component, run: | ||
| Component definitions consist of: | ||
|
|
||
| 1. A template |
There was a problem hiding this comment.
If @glimmer/component@0.14.0-alpha.3 is an indication, templates are optional too, and default to {{yield}} (or have the equivalent effect) just like we're used to w/ @ember/component
There was a problem hiding this comment.
I actually tested this out with @ember/component in Ember Twiddle, and removing the template didn't default to {{yield}}, it defaulted to nothing, which was why I assumed that this was the case with glimmer components as well.
There was a problem hiding this comment.
interesting. I tested this in a local app before making this comment. Maybe twiddle and real apps are out of alignment?
| - Component templates to exist in `app/templates/components/` | ||
| - Component classes to exist in `app/components/` | ||
|
|
||
| Ember looks for files that are the `kebab-case` version of your component name. |
There was a problem hiding this comment.
may want to call this "dasherize-case" for consistency with @ember/string utilities
|
|
||
| #### Generating a Component | ||
|
|
||
| You can create these files automatically by generating a component using the |
There was a problem hiding this comment.
This is a point of consistency, I believe we refer to it as "the Ember CLI" elsewhere in the docs. Happy to change it, but I do think we should be consistent
There was a problem hiding this comment.
I'd consistently stick with the conventions in the Ember CLI guides, which are aligned with "using Ember CLI"
|
|
||
| We'll talk more about arguments in [the next | ||
| section](../arguments-and-attributes). All arguments are prefixed with the `@` | ||
| symbol, so whenever you see `{{@...` you know its referring to any argument. |
There was a problem hiding this comment.
This is at least the third distinct place I've seen {{this.foo}} vs {{foo}} vs {{@foo}} discussed. We're in need of a single great explanation we can refer back to repeatedly.
| parameter we've provided to the function specified. So now when the action is | ||
| invoked, that parameter will automatically be passed as its argument, | ||
| effectively calling `sendMessage("info")`, despite the argument not appearing in | ||
| the calling code. |
There was a problem hiding this comment.
This explanation could benefit from an "equivalent JS" example that may be easier for people to understand than closures, partial application, etc...
(...args) => this.sendMessage("info", ...args);| } | ||
| ``` | ||
|
|
||
| In order for `confirmValue` to take on the value of the message text, we'll bind |
There was a problem hiding this comment.
I'm a little concerned about too much overloading of the term "bind". It could mean (and is used in the guides to refer to each of the following)
- data-binding
- creation of a new variable binding (i.e.,
{{#let apple as |grape|}}orconst grape = apple) Function.prototype.bind
To avoid confusion, we may want to take care to differentiate very clearly
| ``` | ||
|
|
||
| We can tell the action to invoke the `sendMessage` action directly on the | ||
| messaging service with the `target` attribute. |
There was a problem hiding this comment.
I don't see a target here
There was a problem hiding this comment.
This should be removed, yeah. The action is now bound directly on the service, so target is not needed.
| } | ||
| ``` | ||
|
|
||
| Then our `system-preferences-editor` template passes its local `deleteUser` |
There was a problem hiding this comment.
I'd avoid the use of "local" here since it clashes with the description of "local state" in the state management section
| {{#each this.myPosts as |post|}} | ||
| {{!-- either foo-component or bar-component --}} | ||
| {{#let (component post.postType) as |Post|}} | ||
| <Post @post={{post}} /> |
There was a problem hiding this comment.
you have @post post and Post all in scope here. May be worth picking more distinct variable names for clarity.
|
If we ever merge this, we need to revert the following changes:
|
… around and added more content) and (2) creating Different Types of Tests
Updated.
Update for co-located templates (Part 1: "Getting Started")
Add a link to the Octane Cheat Sheet
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Updating the octane branch with the last few releases
* Fix `rel` attributes The values should be separated by space instead of comma. --- Commit: ember-learn/super-rentals-tutorial@24dcc4b Script: https://github.com/ember-learn/super-rentals-tutorial/blob/24dcc4b11ad9c19e2f39153af36110d75db8c26f/.github/workflows/build.yml Logs: https://github.com/ember-learn/super-rentals-tutorial/commit/24dcc4b11ad9c19e2f39153af36110d75db8c26f/checks (cherry picked from commit 1e091df) * [BUGFIX] remove accidental word in octane guide Deleted an extra "do" in the Zoey says in the responding to user interactions with actions section. Changed " forget to do add" to "forget to add". --- Commit: ember-learn/super-rentals-tutorial@9962c95 Script: https://github.com/ember-learn/super-rentals-tutorial/blob/9962c95a677159f526c30641ca4fb7a6425a6fb0/.github/workflows/build.yml Logs: https://github.com/ember-learn/super-rentals-tutorial/commit/9962c95a677159f526c30641ca4fb7a6425a6fb0/checks (cherry picked from commit 9554a49) * remove references to octane blueprint --- Commit: ember-learn/super-rentals-tutorial@9dc125d Script: https://github.com/ember-learn/super-rentals-tutorial/blob/9dc125d801e78924dac35cda931bfa469f4a8097/.github/workflows/build.yml Logs: https://github.com/ember-learn/super-rentals-tutorial/commit/9dc125d801e78924dac35cda931bfa469f4a8097/checks (cherry picked from commit e0fb19a) * [CRON] Thursday Dec 19, 2019 --- Commit: ember-learn/super-rentals-tutorial@785115a Script: https://github.com/ember-learn/super-rentals-tutorial/blob/785115a55168b2871d76072a465b9acbfeb6e0c8/.github/workflows/build.yml Logs: https://github.com/ember-learn/super-rentals-tutorial/commit/785115a55168b2871d76072a465b9acbfeb6e0c8/checks (cherry picked from commit 86ebb80) * Manual edits
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Robert Jackson <me@rwjblue.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
Co-Authored-By: Jen Weber <weberj10@gmail.com>
update guidemaker version, closes #1179
Merge this just before merging `octane` branch - important infra updates
upd(configure:ember): add writeup on default-async-observers
|
It's merged! A zillion thanks to our zillion contributors who have done work for over a year on on these new guides. The guides should be live in about half an hour. |
This PR is intended to be a "tracking PR" to show the differences that the
octanebranch has frommasterThis is not going to be merged until Octane is officially released 👍
The Netlify Preview App that is associated with this PR will be the official demo of the new Octane Guides: https://deploy-preview-455--ember-guides.netlify.com/release/