What are the best practices for structuring a large Meteor app with many HTML template files? [closed]

后端未结

关注

 14  1736

陌清茗

相关标签:

14条回答

你的背包

2020-11-28 17:55
There are a lot of different approaches to structuring your app. For example if you have a router and different page templates, and inner each page template your have many page parts and so on, I would structure it depend on the semantics from higher > lower level..

For Example:
```
client
  views
    common
      header
        header.html
        header.js
        header.css
      footer
        footer.html
        footer.js
        footer.css
    pages
      mainPage
        mainPage.html
        mainPage.js
        mainPage.css
        articles
          articles.html
          articles.js
          articles.css
        news
          news.html
          news.js
          news.css
     ...
```
Of course, you could put your news templates in the common folder, as you could use your news template on different pages.

I think it's the best you structure your app in a way you are comfortable with.

I wrote a little app here: http://gold.meteor.com And it's so small, I use only one html file and only one template.js file.. :)

I hope it helps a little bit
0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2020-11-28 17:56
I agree with yagooar, but instead of:
```
client/application.js
```
Use:
```
client/main.js
```
main.* files are loaded last. This will help ensure that you do not have any load order issues. See the Meteor documentation, http://docs.meteor.com/#structuringyourapp, for more details.
0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2020-11-28 17:59

I am following the mattdeom boilerplate format, which already includes the iron router & Model (Collection2) . See below :

client/                 # Client folder
    compatibility/      # Libraries which create a global variable
    config/             # Configuration files (on the client)
    lib/                # Library files that get executed first
    startup/            # Javascript files on Meteor.startup()
    stylesheets         # LESS files
    modules/            # Meant for components, such as form and more(*)
    views/              # Contains all views(*)
        common/         # General purpose html templates
model/                  # Model files, for each Meteor.Collection(*)
private/                # Private files
public/                 # Public files
routes/                 # All routes(*)
server/                 # Server folder
    fixtures/           # Meteor.Collection fixtures defined
    lib/                # Server side library folder
    publications/       # Collection publications(*)
    startup/            # On server startup
meteor-boilerplate      # Command line tool

0 讨论(0)

盖世英雄少女心

2020-11-28 18:01

Lump it all together! From the docs:

> HTML files in a Meteor application are treated quite a bit differently
> from a server-side framework. Meteor scans all the HTML files in your
> directory for three top-level elements: <head>, <body>, and
> <template>. The head and body sections are seperately concatenated
> into a single head and body, which are transmitted to the client on
> initial page load.
> 
> Template sections, on the other hand, are converted into JavaScript
> functions, available under the Template namespace. It's a really
> convenient way to ship HTML templates to the client. See the templates
> section for more.

0 讨论(0)

面向向阳花

2020-11-28 18:02

After a while out from meteorjs coding, I'm happy to have some spare time to devote to building a fairly complex online game. App structure has been one of my first concerns, and it looks like several very good programmers have championed the package-only method of structuring an app, which allows you to loosely couple functionally distinct packages. There are other advantages to the approach, and 2 very good articles explaining the approach can be found here:

http://www.matb33.me/2013/09/05/meteor-project-structure.html http://www.manuel-schoebel.com/blog/meteorjs-package-only-app-structure-with-mediator-pattern

0 讨论(0)
发布评论:

提交评论
- 加载中...

醉梦人生

2020-11-28 18:04

We have a large project (probably one of the largest Meteor project anyone has built to date as it was in full-time development for 1.5 years). We use the same set of filenames in each view. It's very consistent and helps us quickly navigate to exactly what we are looking for:

events.js
helpers.js
templates.html
routes.js
styles.less
etc.

Looks like this in a project:


       ├── consolidationRequests
       │   ├── events.js
       │   ├── helpers.js
       │   ├── routers.js
       │   └── templates.html
       ├── customerSpoof
       │   └── routers.js
       ├── dashboard
       │   ├── events.js
       │   ├── helpers.js
       │   ├── onDestroyed.js
       │   ├── onRendered.js
       │   ├── routers.js
       │   └── templates.html
       ├── emailVerification
       │   ├── events.js
       │   ├── helpers.js
       │   ├── routers.js
       │   └── templates.html
       ├── loading
       │   ├── styles.css
       │   └── templates.html
       ├── mailbox
       │   ├── autoform.js
       │   ├── consolidationRequestConfirmation
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onCreated.js
       │   │   ├── onRendered.js
       │   │   └── templates.html
       │   ├── events.js
       │   ├── helpers.js

Related templates are just stored together in the same file. Contents of view/order/checkout/templates.html shown collapsed here:

<template name="orderCheckout"></template>

<template name="paymentPanel"></template>

<template name="orderCheckoutSummary"></template>

<template name="paypalReturnOrderCheckout"></template>

We use subfolders when views get complex with lots of parts:

       ├── cart
       │   ├── addItem
       │   │   ├── autoform.js
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onRendered.js
       │   │   ├── routers.js
       │   │   ├── styles.less
       │   │   └── templates.html
       │   ├── checkout
       │   │   ├── autoform.js
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onRendered.js
       │   │   ├── routers.js
       │   │   └── templates.html
       │   └── view
       │       ├── autoform.js
       │       ├── deleteItem
       │       │   ├── events.js
       │       │   ├── helpers.js
       │       │   └── templates.html
       │       ├── editItem
       │       │   ├── autoform.js
       │       │   ├── events.js
       │       │   ├── helpers.js
       │       │   └── templates.html
       │       ├── events.js
       │       ├── helpers.js
       │       ├── onDestroyed.js
       │       ├── onRendered.js
       │       ├── routers.js
       │       ├── styles.less
       │       └── templates.html

We also develop with WebStorm, an extremely powerful and flexible editor for Meteor development. We find it immensely helpful when searching and organizing our code and working productively.

Happy to share details on request.

0 讨论(0)

热议问题