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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: expand coding standards #2581

Merged
merged 2 commits into from
Jan 12, 2017
Merged

Conversation

jelbourn
Copy link
Member

All aboard!
@kara @mmalerba @andrewseguin @tinayuangao @crisbeto @EladBezalel @topherfangio @devversion @josephperrott

The coding standards were last updated just short of one year ago. Going forward, I want to update this doc much more regularly with insights that come out of code reviews.

Are there any conventions that we've been enforcing through code review that are not part of this doc?

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 10, 2017
All public APIs must have user-facing comments. These are extracted and shown in the documation
on [material.angular.io](https://material.angular.io).

Private and internal APIs should have JsDoc when they are not obvious. Ultimately it is the purview
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably mention the @docs-private directive for excluding APIs that shouldn't be user-facing.

Properties should have a concise description of what the property means:
```ts
/** The label position relative to the checkbox. Defaults to 'after' */
@Input() labelPosition: 'before' | 'after' = 'after';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps, in general, we should be turning these into types? E.g. type MdLabelPosition = 'before' | 'after'; in order to allow users to annotate their code?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably, but I don't think that is general enough for the coding guidelines.

#### Provide function descriptions
For functions that are more complicated than a simple getter/setter, provide at least a brief
sentence explaining what the function does and/or _why_ it does something.
#### Typing
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should mention that, even though TypeScript infers it, we should include the method's return type for Dgeni's sake.

```ts
/**
* Opens a modal dialog containing the given component.
* @param component Type of the component to load into the dialog.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to mention the parameter type?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The type is already in the TypeScript annotations. AFAIK Dgeni picks those up properly.

@devversion
Copy link
Member

What about mentioning the 100-column limit, because the Style Guidelines mention a 80-column limit, while we have 100-columns in our tslint.json.

decorators, and when one of the arguments for the method is a native `Event` type, this preserved
type information can lead to runtime errors in non-browser environments (e.g., server-side
pre-rendering).


### CSS

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with most of this, but the "don't use flex" part has always bothered me. Do we have an example of this weird baseline behavior that we're afraid of? It's hard to tell exactly what the issue is from reading the spec...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One from the archives!

TL;DR The text baseline display: flex and inline-flex is computed from the first child of the flex container, which is different from display: block and inline-block. If you put two of these next to each other, the browser will align the baselines and the elements will be misaligned.

Overall I think the messaging of "be cautious" with the two specific cases is good.

##### Methods
The name of a method should capture the action that is performed *by* that method.

### Angular
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we mention the forRoot replacement solution?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that's general enough to belong in the coding guidelines.

@jelbourn
Copy link
Member Author

Addressed comments

Copy link
Contributor

@topherfangio topherfangio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few notes/typos.

appropriate in your case.

For methods and properties that are part of a component's public API, all types must be explicitly
specified because our documentation tooling cannot current infer types in places where TypeScript
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"cannot current infer" -> "cannot currently infer"


Additionally, the `@docs-private` JsDoc annotation can be used to hide any symbol from the public
API docs.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the protected keyword? Do we prefer to make it public instead? A small note about best practices may be beneficial.

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Jan 11, 2017
@tinayuangao tinayuangao merged commit a8764dd into angular:master Jan 12, 2017
@jelbourn jelbourn deleted the coding-guidelines branch September 13, 2017 04:37
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants