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

Clarify app structure and more import examples #356

Merged
merged 8 commits into from Apr 8, 2016

Conversation

Projects
None yet
4 participants
@skirunman
Contributor

skirunman commented Apr 7, 2016

If my merge upstream commit f7cf78b is an issue let me know. Still learning idiosyncrasies of git and github and not sure if this pollutes upstream commit history.

skirunman added some commits Apr 6, 2016

Merge upstream
* Add info on npm install requirements for builds

`meteor build` requires that npm dependencies are installed manually first. This isn't in the guide yet.

* Remove unnecessary extra --production

* Add back in build tool default loading order rules

* Add back in build tool default loading order and cleanup

* Fix typo

* Update README.md

* Delete research.md

File isn't relevant anymore

* Move old organizational files into meta dir

* Recommend against overriding config.xml and mention alternative

* Add more details about App.accessRule usage

* Add CHANGELOG and CONTRIBUTING files

* Improve link to changelog

* Delete mkdocs.yml

* Add more content on using Atmosphere packages

- Update README.md
- Clarification on meteor add for packages
- Add link to meteor publish command

* Fix typo

* Fix bad link

* Change export name to myName

* Updated the createContainer section to match the latest version of the todos app (react branch).

* Update linter-eslint screen capture and npm prefix command

* Update code-style.md

* Update atom-configuration.png

* Fix a small typo.

* Fix a small typo.

* Fix a few broken links.

* chore(docs): Add recommended changes to angular meteor apps

* Link directly to CSS pre-processor section
@skirunman

This comment has been minimized.

Contributor

skirunman commented on f652a39 Apr 7, 2016

Should resolve #348, but @tmeasday please make sure it clarifies the issue.

In Meteor, it is also simple and straightforward to use the `import` syntax to load npm packages on the client or server, and access the package's exported symbols as you would with any other module. You can also import from Atmosphere packages, but the import path must be prefixed with `meteor/` to avoid conflict with the npm package namespace. For example, to import `HTTP` you could use `import { HTTP } from 'meteor/http'`.
Meteor allows you to `import` not only JavaScript in your application, but also CSS and HTML:

This comment has been minimized.

@stubailo

stubailo Apr 7, 2016

Contributor

I think it's not really clear from this what importing HTML and CSS does.

This comment has been minimized.

@skirunman

skirunman Apr 7, 2016

Contributor

How about:

Meteor allows you to import not only JavaScript in your application, but also CSS and HTML if you want to control their load order:

```js
export const listRenderHold = LaunchScreen.hold(); // named export
export { Todos }; // named export
export default { Lists }; // default export

This comment has been minimized.

@stubailo

stubailo Apr 7, 2016

Contributor

I think a default export wouldn't have brackets. Like so:

// Exporting
export default Lists;
export default new Collection('lists');

// Importing
import AnyName from './path';

This comment has been minimized.

@skirunman

skirunman Apr 7, 2016

Contributor

Yep.

<h2 id="load-order">Default file load order</h2>
Even though it is recommended that you write your application to use ES2015 modules and the `imports/` directory, Meteor 1.3 continues to support eager loading of files, using these default load order rules, to provide backwards compatibility with applications written for Meteor 1.2 and earlier.
Even though it is recommended that you write your application to use ES2015 modules and the `imports/` directory, Meteor 1.3 continues to support eager loading of files, using these default load order rules, to provide backwards compatibility with applications written for Meteor 1.2 and earlier. You may combine both eager loading and lazy loading using `import` in a single app. Any import statements are evaluated in order they are listed in a file when that file is loaded and evaluated using these rules.

This comment has been minimized.

@stubailo

stubailo Apr 7, 2016

Contributor

"in order" => "in the order"

@stubailo

This comment has been minimized.

Contributor

stubailo commented Apr 7, 2016

Looks really good, a few comments!

@stubailo

This comment has been minimized.

Contributor

stubailo commented Apr 7, 2016

(BTW probably what you want to do to fix this PR is git rebase against the upstream master branch)

@skirunman skirunman changed the title from Rework to add more examples and clarify imports to Clarify app structure and more import examples Apr 7, 2016

@skirunman

This comment has been minimized.

Contributor

skirunman commented Apr 7, 2016

@stubailo Let me know if this looks OK now. If not, I can start over...

```js
import '../../api/lists/methods.js'; // import from relative path
import '/imports/startup/client'; // import module with index.js from absolute path
import './loading.html'; // import HTML from relative path

This comment has been minimized.

@tmeasday

tmeasday Apr 7, 2016

Contributor

This is maybe not quite correct. I'm not sure what the best one liner is, but it's something like "import Blaze-compiled HTML"

@@ -145,7 +166,20 @@ import '../../ui/accounts/accounts-templates.js';
// Below here are the route definitions
```
On the server, we import various modules into our `server/main.js` to set up the server environment:
We then import both of these files in `/imports/startup/client/index.js`:

This comment has been minimized.

@tmeasday

tmeasday Apr 7, 2016

Contributor

When referencing files in the app (in text), let's not use a leading /, even if it is more correct.

@tmeasday

This comment has been minimized.

Contributor

tmeasday commented Apr 7, 2016

This is looking great @skirunman

skirunman added some commits Apr 7, 2016

@skirunman

This comment has been minimized.

Contributor

skirunman commented Apr 8, 2016

@stubailo Anything else you want done to this PR?

@tmeasday

This comment has been minimized.

Contributor

tmeasday commented Apr 8, 2016

LGTM!

@stubailo

This comment has been minimized.

Contributor

stubailo commented Apr 8, 2016

Love it!

@stubailo stubailo merged commit 003a39f into meteor:master Apr 8, 2016

2 checks passed

CLA Author has signed the Meteor CLA.
Details
ci/circleci Your tests passed on CircleCI!
Details
There are several load order rules. They are *applied sequentially* to all applicable files in the application, in the priority given below:
1. HTML template files are *always* loaded before everything else
1. HTML template files are **always** loaded before everything else
2. Files beginning with `main.` are loaded **last**
3. Files inside **any** `lib/` directory are loaded next

This comment has been minimized.

@batjko

batjko Apr 10, 2016

Contributor

It's a bit odd to say something gets "loaded next", when the previous point said what will be "loaded last".

This comment has been minimized.

@skirunman

skirunman Apr 10, 2016

Contributor

Yes, it can be a bit confusing, but the order listed is the priority order that the rules are evaluated, not files are loaded, as shown in the little example below this section. If you can come up with a better way to express this I'm sure MDG will accept the change.

This comment has been minimized.

@stubailo

stubailo Apr 10, 2016

Contributor

Yeah I think the fact that this is so confusing is one reason why we don't recommend it anymore, and instead encourage people to use modules.

@skirunman skirunman deleted the skirunman:fixes-structure branch Apr 16, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment