Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP - Octane Guides #455

Draft
wants to merge 467 commits into
base: master
from

Conversation

@mansona
Copy link
Member

commented Feb 14, 2019

This PR is intended to be a "tracking PR" to show the differences that the octane branch has from master

This 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/

@MelSumner

This comment has been minimized.

Copy link
Member

commented Feb 14, 2019

Thank you for setting this up!

@mike-north

This comment has been minimized.

Copy link
Contributor

commented Mar 6, 2019

@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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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}

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

should this be reverted, in light of MU project layout not shipping with octane?

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

cleanup issue: #584

@@ -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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

grammar/clarity issues

properties of the component object,
or values passed into the component.

To use a property you prefix it with `this`, like so:

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor
Suggested change
To use a property you prefix it with `this`, like so:
To use a property, prefix it with `this` like so:
super(...arguments);
}
@tracked

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

needs an import to make this example complete

headers: computed('session.authToken', function() {
export default class ApplicationAdapter extends JSONAPIAdapter {
@service session;
@tracked session.authToken;

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

invalid syntax

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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor
Suggested change
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);

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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({

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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({

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

ajax HTTP b/c it's 2019 馃挜

To define a component, run:
Component definitions consist of:

1. A template

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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

This comment has been minimized.

Copy link
@pzuraq

pzuraq Mar 12, 2019

Contributor

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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

remove "the"

This comment has been minimized.

Copy link
@pzuraq

pzuraq Mar 12, 2019

Contributor

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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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|}} or const 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.

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

I don't see a target here

This comment has been minimized.

Copy link
@pzuraq

pzuraq Mar 12, 2019

Contributor

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`

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

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}} />

This comment has been minimized.

Copy link
@mike-north

mike-north Mar 12, 2019

Contributor

you have @post post and Post all in scope here. May be worth picking more distinct variable names for clarity.

@jenweber

This comment has been minimized.

Copy link
Contributor

commented Mar 16, 2019

If we ever merge this, we need to revert the following changes:

  • hiding the edit pencil and the search bar
  • changes to app/router for Google analytics
  • changes to robots.txt that prevented crawling the staging app
mansona and others added 22 commits Mar 18, 2019
Turning on CI for the Octane branch (and PRs)
Octane: Quickstart a11y improvements
Fix blueprint name
Because this example is showing how to create defaulted args, it should actually use them.
Fix arg defaults example
quickstart not working: fix component syntax to use @
Slight fix to SimpleCache example in Octane guide
Typo fix
Spelling fix to resolve CI errors
鈥omponent-arguments

Fix example for invocation of component arguments
鈥ipt

Proofread 'Working with JavaScript' section of Octane preview guides
Co-Authored-By: chancancode <godfreykfc@gmail.com>
jenweber and others added 30 commits Sep 15, 2019
Style improvements
Co-Authored-By: Jen Weber <j@jenweber.me>
[FEAT] Updates State Management Docs
Resync octane with master. yolo.
* Merge ember-learn/super-rentals-tutorial#50

Don't add data-current.zip by accident

---

Commit:  ember-learn/super-rentals-tutorial@fe9b233
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/fe9b233dd3a11a47217b5b814a3949ddce0bafa3/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/585878794

* Merge ember-learn/super-rentals-tutorial#51

Update component tests to match latest blueprint

---

Commit:  ember-learn/super-rentals-tutorial@6e632e0
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/6e632e0f4e030a264c888cdc085d1b05eb5efe95/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/586618448

* Merge ember-learn/super-rentals-tutorial#51

Update component tests to match latest blueprint

---

Commit:  ember-learn/super-rentals-tutorial@6e632e0
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/6e632e0f4e030a264c888cdc085d1b05eb5efe95/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/586750062

* Merge ember-learn/super-rentals-tutorial#52

Use new component generators

---

Commit:  ember-learn/super-rentals-tutorial@3536a78
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/3536a7866dcd57ea42aaa3e2bf7df75e3261ed56/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/586815398

* Merge ember-learn/super-rentals-tutorial#53

* Tell the user to go into the super-rentals dir

We end up adding `cwd=super-rentals` to all the run commands after this but we never tell the user

* Added some text around cding into SR dir

---

Commit:  ember-learn/super-rentals-tutorial@f15e9bd
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/f15e9bde9b9b1c848f9ff8509afa87958f5c9d88/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/587227702

* Merge ember-learn/super-rentals-tutorial#56

Fix CI

---

Commit:  ember-learn/super-rentals-tutorial@0fbc7ad
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/0fbc7ad878e2ac8d931d5f6515ef2ef6e51b31df/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/587568894

* Merge ember-learn/super-rentals-tutorial#57

Scrub stack traces in deterministic mode

---

Commit:  ember-learn/super-rentals-tutorial@eb33989
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/eb33989e922920f109157f296dfc1ede966f1d87/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/587594175
鈥-usage-examples

Use Ember Data decorators without parens where possible (#669)
Removed alternate texts for Zoey & Tomster images in the release version
Remove apostrophe
Add section on stubs to unit testing basics
* Merge ember-learn/super-rentals-tutorial#74

Remove alt text for decorative image

---

Commit:  ember-learn/super-rentals-tutorial@6062aa2
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/6062aa21fe7d3f2718d994d0d4d9f4d40158db09/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592222136

* Merge ember-learn/super-rentals-tutorial#73

Copy edit pass

---

Commit:  ember-learn/super-rentals-tutorial@f2fcd9d
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/f2fcd9d9cec3b71d5185ede26953292b24da2df5/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592251594

* Use backtick for `qunit-dom`

---

Commit:  ember-learn/super-rentals-tutorial@7502df1
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/7502df14b5267648f8442f590b709c1d9f10e181/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592593660

* Merge ember-learn/super-rentals-tutorial#77

Add summary images

---

Commit:  ember-learn/super-rentals-tutorial@4c1524e
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/4c1524ee26279bb87a31606573eadda2fd28c2b0/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592686563

* Merge ember-learn/super-rentals-tutorial#78

Fix bug in screenshot DSL parsing

---

Commit:  ember-learn/super-rentals-tutorial@28ebcc3
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/28ebcc38de56c77d50fcf0c3bab011dc0deb575a/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592719662

* Merge ember-learn/super-rentals-tutorial#79

Use regex correctly (锛嶁羔儦)

---

Commit:  ember-learn/super-rentals-tutorial@c76a874
Script:  https://github.com/ember-learn/super-rentals-tutorial/blob/c76a8744e1f2fa72e261009b7ecc3757cb45f7c5/scripts/deploy.sh
Logs:    https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592774277
update octane banner
Update octane to latest master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can鈥檛 perform that action at this time.