कई HTML टेम्पलेट फ़ाइलों के साथ एक बड़े उल्का ऐप को संरचित करने के लिए सर्वोत्तम अभ्यास क्या हैं? [बन्द है]


165

सभी उदाहरणों (लीडरबोर्ड, वर्डप्ले, आदि) में उनके पास एक ही HTML टेम्पलेट फ़ाइल है। क्या कई अलग-अलग HTML टेम्पलेट फ़ाइलों के साथ कुछ बड़ा खुला स्रोत उल्का परियोजना है जो हम एक सर्वोत्तम अभ्यास उदाहरण के रूप में उपयोग कर सकते हैं? सब कुछ एक बड़े अनुप्रयोग की जरूरत है एक टेम्पलेट फ़ाइल में डाल करने के लिए व्यावहारिक नहीं लगता है।


उल्का नया सामान है, मुझे इसके बारे में कुछ भी सबसे अच्छा अभ्यास नहीं मिलता है। मुझे इस बारे में कुछ गिल्डलाइन की उम्मीद है
नवजात शिशु

10
क्या आपने मैनुअल में अपने एप्लिकेशन को संरचित करने के बारे में पढ़ा है ? HTML फ़ाइलों की स्कैनिंग और समवर्ती करने के बारे में कुछ स्पष्टीकरण है।
zwippie

1
उल्का आधिकारिक गाइड एक बहुत ही शांत फ़ाइल संरचना का सुझाव देता है। यहां देखें: guide.meteor.com/structure.html#javascript-structure
वकास

जवाबों:


16

यह सब एक साथ गांठ! डॉक्स से:

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

29
हालांकि यह पोस्टर की चिंता है। लम्पिंग ठीक है, लेकिन आप देख सकते हैं कि आसन के साथ क्या होता है - इसे लोड स्क्रीन की आवश्यकता होती है, जबकि यह डाउनलोड करता है> क्लाइंट कोड का 1 एमबी। यह बहुत सी साइटों के लिए स्वीकार्य नहीं है। हम यह देखने जा रहे हैं कि क्या हम मुख्य स्क्रीन लोड के बाद लोडिंग टुकड़े टुकड़े में से कुछ नहीं कर सकते हैं, लेकिन मुझे अभी संदेह है। मुझे लगता है कि इसके लिए चीजों को थोड़ा तोड़ने की एक विशेषता होने की आवश्यकता है।
डेव सैंडर्स

36
यह उत्तर Google में # 1 परिणाम है लेकिन यह विश्वसनीय रूप से पुराना है। अन्य, मेरे जैसे भावी आगंतुक; नीचे देखें!
क्लोवर

1.1.0.2 तक, सरल टूडू ऐप वे डेमो को 1.7MB फ़ाइलों में स्थानांतरित करता है जब आप हार्ड ड्राइव को ब्राउज़र कैश से हटाते हैं। यह बहुत से उपयोग के मामलों के लिए अस्वीकार्य है। : संपत्ति के कैश होने के बाद चीजें बेहतर होती हैं, लेकिन पहले लोड पर, यह बहुत क्रूर है।
जेसन किम

विचार: वेबपैक का उपयोग करें, चीजों के लिए बंडल बनाएं, जब जरूरत हो तो आलसी उन्हें लोड करें।
trusktr

हाँ आसन को लोड होने में कुछ समय लगता है। आसन भी एक अविश्वसनीय रूप से अच्छी तरह से किया गया, प्रतिक्रियाशील ऐप है जिसमें उपयोगकर्ताओं ने 2014 में 175 मिलियन कार्य बनाए। ऐसे ऐप्स जो तेजी से लोड होते हैं वे हमेशा बेहतर नहीं होते हैं। ऐप्स को आपके फ़ोन पर भी शुरू होने में कुछ समय लगता है। लोगों को इसकी आदत हो जाएगी।
अधिकतम हॉज

274

अनौपचारिक उल्का faq में के रूप में, मुझे लगता है कि यह बहुत बड़ी व्याख्या करता है कि एक बड़े ऐप को कैसे बनाया जाए:

मुझे अपनी फाइलें कहां रखनी चाहिए?

उल्का में उदाहरण एप्लिकेशन बहुत सरल हैं, और बहुत अंतर्दृष्टि प्रदान नहीं करते हैं। यहाँ यह करने के लिए सबसे अच्छा तरीका है पर मेरी वर्तमान सोच है: (किसी भी सुझाव / सुधार बहुत स्वागत है!)

lib/                       # <- any common code for client/server.
lib/environment.js         # <- general configuration
lib/methods.js             # <- Meteor.method definitions
lib/external               # <- common code from someone else
## Note that js files in lib folders are loaded before other js files.

collections/               # <- definitions of collections and methods on them (could be models/)

client/lib                 # <- client specific libraries (also loaded first)
client/lib/environment.js  # <- configuration of any client side packages
client/lib/helpers         # <- any helpers (handlebars or otherwise) that are used often in view files

client/application.js      # <- subscriptions, basic Meteor.startup code.
client/index.html          # <- toplevel html
client/index.js            # <- and its JS
client/views/<page>.html   # <- the templates specific to a single page
client/views/<page>.js     # <- and the JS to hook it up
client/views/<type>/       # <- if you find you have a lot of views of the same object type
client/stylesheets/        # <- css / styl / less files

server/publications.js     # <- Meteor.publish definitions
server/lib/environment.js  # <- configuration of server side packages

public/                    # <- static files, such as images, that are served directly.

tests/                     # <- unit test files (won't be loaded on client or server)

बड़े अनुप्रयोगों के लिए, असतत कार्यक्षमता को उप-निर्देशिका में तोड़ा जा सकता है जो स्वयं उसी पैटर्न का उपयोग करके व्यवस्थित होते हैं। यहां विचार यह है कि अंततः कार्यक्षमता के मॉड्यूल को एक अलग स्मार्ट पैकेज में विभाजित किया जा सकता है, और आदर्श रूप से, चारों ओर साझा किया जाता है।

feature-foo/               # <- all functionality related to feature 'foo'
feature-foo/lib/           # <- common code
feature-foo/models/        # <- model definitions
feature-foo/client/        # <- files only sent to the client
feature-foo/server/        # <- files only available on the server

अधिक जानकारी प्राप्त करें: अनौपचारिक उल्का FAQ


12
IMHO यह स्वीकृत उत्तर से बेहतर है। मैं इसे अब कोशिश करूँगा।
हकन

17
0.6.0 के बाद से, आप उस गड़बड़ी से बचने और अपने ऐप को पूरी तरह से स्मार्ट पैकेज से चलाने से बहुत बेहतर हैं। मैं इस ब्लॉग पोस्ट में थोड़ा और विस्तार में जाता हूं
matb33

1
किसी को भी एक सुराग है जहां डाल करने के लिए mobile-config.js?
यार

1
उत्तर के लिए धन्यवाद और अनौपचारिक-faq के लिंक के लिए (मैं उल्का की दुनिया में नया हूं), उन्हें "किसी और से सामान्य कोड" से क्या मतलब है? धन्यवाद!
कोहरों

3
उल्का 1.3 के लिए, मैं कहूंगा कि यह ES6 मॉड्यूल आयात के कारण पुराना है। एप्लिकेशन संरचना पर उल्का गाइड लेख देखें: guide.meteor.com/structure.html
शमूएल

36

मैं yagooar से सहमत हूं, लेकिन इसके बजाय:

क्लाइंट / application.js

उपयोग:

क्लाइंट / main.js

main। * फाइलें आखिरी लोड की जाती हैं। यह सुनिश्चित करने में मदद करेगा कि आपके पास कोई लोड ऑर्डर समस्या नहीं है। अधिक जानकारी के लिए उल्का प्रलेखन, http://docs.meteor.com/#structuringyourapp देखें।


26

Meteor को डिज़ाइन किया गया था ताकि आप अपने ऐप को किसी भी तरह से किसी भी तरह से संरचना करें। इसलिए यदि आपको अपनी संरचना पसंद नहीं है, तो आप बस एक फ़ाइल को एक नई निर्देशिका में स्थानांतरित कर सकते हैं, या यहां तक ​​कि एक फ़ाइल को कई टुकड़ों में विभाजित कर सकते हैं, और इसके सभी को बहुत अधिक Meteor कर सकते हैं। मुख्य दस्तावेज़ पृष्ठ में निर्दिष्ट क्लाइंट, सर्वर और सार्वजनिक निर्देशिका के विशेष उपचार पर ध्यान दें: http://docs.meteor.com/

बस एक HTML भर में सब कुछ एक साथ lumping निश्चित रूप से एक सर्वोत्तम अभ्यास के रूप में नहीं उभरेगा।

यहां एक संभव संरचना का एक उदाहरण है: मेरे एक ऐप में, एक चर्चा मंच, मैं मॉड्यूल या "पृष्ठ प्रकार" (घर, मंच, विषय, टिप्पणी) द्वारा व्यवस्थित करता हूं, .css, .html और प्रत्येक के लिए .js फ़ाइल डाल रहा हूं। पेज एक निर्देशिका में एक साथ टाइप करें। मेरे पास एक "आधार" मॉड्यूल भी है, जिसमें आम .css और .js कोड और मास्टर टेम्प्लेट शामिल हैं, जो राउटर के आधार पर अन्य मॉड्यूलों में से एक को रेंडर करने के लिए {{renderPage}} का उपयोग करता है।

my_app/
    lib/
        router.js
    client/
        base/
            base.html
            base.js
            base.css
        home/
            home.html
            home.js
            home.css
        forum/
            forum.html
            forum.js
            forum.css
        topic/
            topic.html
            topic.js
            topic.css
        comment/
            comment.html
            comment.js
            comment.css

आप फ़ंक्शन द्वारा भी व्यवस्थित कर सकते हैं

my_app/
    lib/
        router.js
    templates/
        base.html
        home.html
        forum.html
        topic.html
        comment.html
    js/
        base.js
        home.js
        forum.js
        topic.js
        comment.js
    css/
        base.css
        home.css
        forum.css
        topic.css
        comment.css

मुझे उम्मीद है कि कुछ और विशिष्ट सर्वोत्तम अभ्यास संरचनाएं और नामकरण परंपराएं उभरती हैं।


2
यह मेरा पसंदीदा उत्तर है। उल्का के बारे में मेरी पसंदीदा चीजों में से एक यह है कि आप अपनी फ़ाइलों को इस तरह से तैयार कर सकते हैं जो आपके लिए काम करती हैं।
CaptSaltyJack

मुझे यह उत्तर पसंद है। मैं इसे पहली तरह से कर रहा हूं।
गाया

संबंधित चीजें एक दूसरे के करीब होनी चाहिए। मेरा जवाब आपके जैसा है लेकिन पीछे की तरफ है।
मैक्स हॉजेस


मुझे "विषय" जैसी सुविधा नाम वाली कई फ़ाइलों के नामकरण में मूल्य नहीं दिखता है। अब यदि आप फीचर नाम को "श्रेणी" में बदलना चाहते हैं तो आपको कई फ़ाइल नाम बदलने होंगे। बस उन्हें "विषय" नामक एक फ़ोल्डर के तहत व्यवस्थित करें और उन्हें उदारतापूर्वक नाम दें: घटनाओं। जेएस, विचार। html, शैलियों, सीएसएस, मार्गों। जेएस, आदि के लिए मेरा जवाब देखें।
मैक्स होजेस

14

इस विषय पर Googling के लिए हर कोई:

emकमांड लाइन टूल (EventedMind द्वारा, आयरन रूटर के पीछे लोग) बहुत उपयोगी है जब एक नई उल्का अनुप्रयोग हेराफेरी है। यह एक अच्छी फ़ाइल / फ़ोल्डर संरचना बनाएगा। यदि आप पहले से ही एक ऐप पर काम करते हैं और इसे फिर से व्यवस्थित करना चाहते हैं, तो बस एक नई परियोजना स्थापित करें emऔर आप इसे प्रेरणा के लिए उपयोग कर सकते हैं।

देखें: https://github.com/EventedMind/em

और यहाँ: /programming/17509551/what-is-the-best-way-to-organize-templates-in-meteor-js


4
नोट: इसे आयरन-क्लि (एक ही लेखक) से बदल दिया गया है। देखें: github.com/iron-meteor/iron-cli
j0e

हां, 'em' का नाम बदलकर आयरन-क्ली, समान टूल कर दिया गया है।
मिकेल लिरबैंक

11

मुझे लगता है कि डिस्कवर उल्का बुक से फ़ाइल संरचना वास्तव में अच्छी और एक ठोस शुरुआत है।

/app: 
 /client
   main.html
   main.js
 /server 
 /public
 /lib
 /collections
  • / सर्वर निर्देशिका में कोड केवल सर्वर पर चलता है।
  • / क्लाइंट निर्देशिका में कोड केवल क्लाइंट पर चलता है।
  • क्लाइंट और सर्वर दोनों पर सब कुछ चलता है।
  • / Lib में फ़ाइलें कुछ और से पहले लोड की जाती हैं।
  • कोई भी मुख्य। * फ़ाइल सब कुछ के बाद भरी हुई है।
  • आपकी स्थिर संपत्ति (फ़ॉन्ट, चित्र, आदि) / सार्वजनिक निर्देशिका में जाती हैं।

10

पैकेज बनाएँ

बेशक इस दृष्टिकोण में सब कुछ फिट नहीं है, लेकिन बड़े एप्लिकेशन में आपके पास बहुत सारी कार्यक्षमताएं होंगी जिन्हें अलग किया जा सकता है। कुछ भी अलग और पुन: प्रयोज्य पैकेजों में फिट बैठता है, बाकी सामान्य निर्देशिका संरचना में जाता है, जैसा कि अन्य उत्तरों में वर्णित है। यहां तक ​​कि अगर आप ओवरहेड से बचने के लिए पैकेज नहीं बनाते हैं, तो कोड को मॉड्यूलर तरीके से संरचित करना एक अच्छा विचार है ( इन सुझावों को देखें )

उल्का आपकी फ़ाइलों को लोड करने के तरीके (लोडिंग ऑर्डर, जहां: क्लाइंट / सर्वर / दोनों) और क्या पैकेज निर्यात करता है, इस पर ठीक-ठीक नियंत्रण की अनुमति देता है।

मैं विशेष रूप से संबंधित फाइलों के बीच तर्क साझा करने का आसान तरीका ढूंढता हूं। उदाहरण के लिए, उदाहरण के लिए, आप विभिन्न फ़ाइलों में कुछ उपयोग फ़ंक्शन और उपयोग करना चाहते हैं। आप इसे केवल "वैश्विक" (बिना var) और उल्का के इसे पैकेज के नाम स्थान में लपेटेंगे, इसलिए यह वैश्विक नाम स्थान को प्रदूषित नहीं करेगा

यहाँ आधिकारिक डॉक्टर है


6

उल्कापिंड कोडिंग से थोड़ी देर के बाद, मैं एक काफी जटिल ऑनलाइन गेम के निर्माण के लिए समर्पित होने के लिए कुछ खाली समय के लिए खुश हूं। ऐप संरचना मेरी पहली चिंताओं में से एक रही है, और ऐसा लगता है कि कई बहुत अच्छे प्रोग्रामर ने ऐप को संरचित करने के पैकेज-केवल विधि को चैंपियन बनाया है, जो आपको कार्यात्मक रूप से अलग-अलग पैकेजों को ढीला करने की अनुमति देता है। दृष्टिकोण के अन्य लाभ हैं, और दृष्टिकोण की व्याख्या करने वाले 2 बहुत अच्छे लेख यहां मिल सकते हैं:

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


6

हमारे पास एक बड़ी परियोजना है (शायद सबसे बड़ी उल्का परियोजना में से किसी ने आज तक बनाया है क्योंकि यह 1.5 साल के लिए पूर्णकालिक विकास में थी)। हम प्रत्येक दृश्य में फ़ाइलनाम के समान सेट का उपयोग करते हैं। यह बहुत ही सुसंगत है और हमें जो हम ढूंढ रहे हैं, उसे वास्तव में नेविगेट करने में मदद करता है:

  • events.js
  • helpers.js
  • templates.html
  • routes.js
  • styles.less
  • आदि।

एक परियोजना में इस तरह दिखता है:

       ├── समेकन
       ।। घटनाओं.जेएस
       Ers ers हेल्पर्स.जेएस
       Ers ers routers.js
       .Html .html template.html
       ├── customerSpoof
       Ers ers routers.js
       ├── डैशबोर्ड
       ।। घटनाओं.जेएस
       Ers ers हेल्पर्स.जेएस
       │। OnDestroyed.js
       │ ├── onRendered.js
       Ers ers routers.js
       .Html .html template.html
       ├── emailVerification
       ।। घटनाओं.जेएस
       Ers ers हेल्पर्स.जेएस
       Ers ers routers.js
       .Html .html template.html
       ├── लोड हो रहा है
       ।। Style.css
       .Html .html template.html
       ├── मेलबॉक्स
       Of of autoform.js
       │ irm समेकन
       ├── │ │ घटनाओं.जेएस
       ├── ├── │ हेल्पर्स.जेएस
       │ s │ onCreated.js
       │ s │ onRendered.js
       └── │ │ template.html
       ।। घटनाओं.जेएस
       Ers ers हेल्पर्स.जेएस

संबंधित टेम्प्लेट केवल एक ही फ़ाइल में एक साथ संग्रहीत किए जाते हैं। view/order/checkout/templates.htmlदिखाए गए सामग्री यहां समाप्‍त हो गई है:

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

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

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

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

जब दृश्य बहुत सारे भागों के साथ जटिल हो जाते हैं तो हम सबफ़ोल्डर का उपयोग करते हैं:

       ├── गाड़ी
       │ It addItem
       ├──। │ autoform.js
       ├── │ │ घटनाओं.जेएस
       ├── ├── │ हेल्पर्स.जेएस
       │ s │ onRendered.js
       ├── ├── │ routers.js
       ├── │ │ style.less
       └── │ │ template.html
       Out out चेकआउट
       ├──। │ autoform.js
       ├── │ │ घटनाओं.जेएस
       ├── ├── │ हेल्पर्स.जेएस
       │ s │ onRendered.js
       ├── ├── │ routers.js
       └── │ │ template.html
       └── └── दृश्य
       Of of autoform.js
       │ It डिलीट इट
       ├── │ │ घटनाओं.जेएस
       ├── ├── │ हेल्पर्स.जेएस
       └── │ │ template.html
       It It editItem
       ├──। │ autoform.js
       ├── │ │ घटनाओं.जेएस
       ├── ├── │ हेल्पर्स.जेएस
       └── │ │ template.html
       ।। घटनाओं.जेएस
       Ers ers हेल्पर्स.जेएस
       │। OnDestroyed.js
       │ ├── onRendered.js
       Ers ers routers.js
       ।। Style.less
       .Html .html template.html

हम वेबस्टोर के साथ भी विकसित होते हैं, जो उल्का विकास के लिए एक अत्यंत शक्तिशाली और लचीला संपादक है। हमें अपने कोड को खोजने और व्यवस्थित करने और उत्पादक रूप से काम करने पर यह बेहद मददगार लगता है। वेबस्टॉर्म दृश्य

अनुरोध पर विवरण साझा करने में प्रसन्नता।


3
यदि आपको लगता है कि इस उत्तर को बेहतर बनाया जा सकता है, तो कृपया एक टिप्पणी जोड़ने पर विचार करें।
मैक्स हॉजेज

महान पद। प्रश्न: उल्का के साथ इस समय के बाद, आप अभी भी इसे बड़ी परियोजनाओं के लिए सुझाते हैं, जैसे ईकॉमर्स? या एक ऐसे ढांचे का उपयोग करने पर विचार करें जो आपको लूपबैक या हैप्पी के रूप में और अधिक "स्वायत्तता" दे सकता है।
लीको

हम उल्का से प्यार करते हैं और उसमें सभी नए विकास करते हैं। दुर्भाग्य से मैं एक राय होने के लिए लूपबैक या हैप्पी के साथ पर्याप्त रूप से परिचित नहीं हूं।
मैक्स हॉजेस

1
LoopBacks एंड-टू-एंड रेस्ट एपीआई पर ध्यान केंद्रित करता है जो इसे पारंपरिक वेब डेवलपमेंट फ्रेमवर्क (जैसे RoR) की तरह ध्वनि देता है। RoR को REST API सही मिला, लेकिन हमें लगता है कि Meteor को रियलटाइम राइट मिला।
मैक्स हॉजेज 16

प्रतिक्रिया के लिए धन्यवाद। आपने सुविधाओं के लिए भी सर्वर साइड का आयोजन किया?
Liko

5

लोहे-सीएलआई मचान सीएलआई का उपयोग करें। चीजों को बहुत आसान बना देता है।

https://github.com/iron-meteor/iron-cli

एक बार स्थापित। iron create my-appएक नई परियोजना बनाने के लिए उपयोग करें। यह आपके लिए निम्नलिखित संरचना तैयार करेगा। आप इसका उपयोग मौजूदा परियोजनाओं पर भी कर सकते हैं। iron migrateपरियोजना निर्देशिका में उपयोग करें ।

my-app/    
 .iron/    
   config.json    
 bin/    
 build/    
 config/    
   development/    
     env.sh    
     settings.json    
 app/    
   client/    
     collections/    
     lib/    
     stylesheets/    
     templates/    
     head.html    
   lib/    
     collections/    
     controllers/    
     methods.js    
     routes.js    
   packages/    
   private/    
   public/    
   server/    
     collections/    
     controllers/    
     lib/    
     methods.js    
     publish.js    
     bootstrap.js

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।
user2314737

@ user2314737 यह कहने के लिए कि उत्तरदाता ने अपने पोस्ट को संपादित किया है। इसमें अब हाथ में समस्या के लिए आवश्यक आवश्यक डेटा शामिल है।
Kyll

4

मैं mattdeom बॉयलरप्लेट प्रारूप का पालन कर रहा हूं, जिसमें पहले से ही लोहे के राउटर और मॉडल (संग्रह 2) शामिल हैं। निचे देखो :

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

3

आपके ऐप को संरचित करने के लिए बहुत सारे अलग-अलग तरीके हैं। उदाहरण के लिए यदि आपके पास एक राउटर और अलग-अलग पेज टेम्प्लेट हैं, और प्रत्येक पेज टेम्प्लेट में आपके कई पृष्ठ भाग हैं और इसी तरह, मैं संरचना करता हूं कि यह उच्च> निम्न स्तर से शब्दार्थ पर निर्भर करेगा।

उदाहरण के लिए:

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

बेशक, आप अपने समाचार टेम्प्लेट को सामान्य फ़ोल्डर में रख सकते हैं, क्योंकि आप विभिन्न पृष्ठों पर अपने समाचार टेम्पलेट का उपयोग कर सकते हैं।

मुझे लगता है कि यह सबसे अच्छा तरीका है कि आप अपने ऐप को इस तरह से तैयार करें जैसे आप सहज हैं।

मैंने यहां एक छोटा सा ऐप लिखा है: http://gold.meteor.com और यह इतना छोटा है, मैं केवल एक html फ़ाइल और केवल एक टेम्पलेट का उपयोग करता हूं ।js फ़ाइल .. :)

मुझे उम्मीद है कि यह थोड़ा मदद करता है


मुझे "लेख" जैसे सुविधा नाम के साथ कई फ़ाइलों के नामकरण में मूल्य नहीं दिखता है। अब यदि आप फीचर नाम को "पोस्ट" में बदलना चाहते हैं तो आपको फ़ाइल नाम बदलना होगा। बस उन्हें "लेख" नामक एक फ़ोल्डर के तहत व्यवस्थित करें और उन्हें "ईवेंट्स.जेएस", विचार। Html, शैली, सीएसएस, आदि के लिए मेरा जवाब देखें।
मैक्स होजेस

3

ईवेंटेड माइंड पर एक नया वर्ग सेट अप किया गया है जिसे उल्कापिंड प्रोजेक्ट्स कहा जाता है जो इसे संबोधित करता है, लेकिन प्रोजेक्ट कॉन्फ़िगरेशन और आपके विकास के वातावरण को स्थापित करने के बारे में भी बात करता है।

से आवेदन संरचना कक्षा में वीडियो: उल्का कैसे अपने आवेदन संरचित किया जाना चाहिए, लेकिन यहाँ कुछ नियम हैं के बारे में एक बहुत मजबूत राय नहीं है:

1) लोड ऑर्डर - उल्का पहले फाइल डायरेक्टरी में सबसे गहरे स्थान पर जाती है और फाइलों को अल्फाबेटिकल ऑर्डर में प्रोसेस करती है

2) क्लाइंट और सर्वर विशेष फ़ोल्डर हैं जो उल्का पहचानता है

हमारी संरचना इस तरह दिखती है:

both/
    collections/
        todos.js
    controllers/
        todos_controller.js
    views/
        todos.css
        todos.html
        todos.js
    app.js - includes routes
client/
    collections/
    views/
        app.js
server/
    collections/
    views/
        app.js
packages/
public/

टॉडोस_कंट्रोलर, रूटकंट्रोलर का विस्तार करता है, जो कि आयरन राउटर के साथ आता है।

emजैसा कि ऊपर उल्लेख उपकरण भी अभी एक बड़ा अद्यतन हो रही है और ज्यादा बेहतर और कम से उपलब्ध होना चाहिए: https://github.com/EventedMind/em


अंदर क्या विचार है / सर्वर / विचार /?
स्टेफुड

मुझे "todos" जैसी सुविधा नाम वाली कई फ़ाइलों के नामकरण में मूल्य नहीं दिखता है। अब यदि आप फीचर नाम को "कार्यों" में बदलना चाहते हैं तो आपको 5 फाइलों के नाम बदलने होंगे। बस उन्हें "टॉडोस" नामक एक फ़ोल्डर के तहत व्यवस्थित करें और उन्हें "ईवेंट्स.जेएस", विचार। Html, शैलियों, सीएसएस, आदि के लिए मेरा जवाब देखें।
मैक्स होजेस

1

मैं अच्छी तरह से कल्पना की गई वास्तुकला के माध्यम से अपने ऐप्स को बढ़ाने और स्केल करने के लिए सर्वोत्तम अभ्यासों की तलाश कर रहा हूं। उपर्युक्त सभी अभ्यास छोटे से मध्यम आकार के ऐप के लिए काम करते हैं लेकिन जब आप किसी बड़ी टीम में काम करते हैं तो विफल हो जाएंगे। मेरे द्वारा आजमाए गए कई तरीके हैं:

1) मैंने इस रणनीति का पालन किया: https://github.com/aldeed/meteor-autoform टेम्प्लेट को स्केल और पुन: उपयोग करने के लिए। घटक और क्षेत्र डिजाइन पर लेखक का बहुत अच्छा विचार है। मैं वर्तमान में इसे लागू कर रहा हूं क्योंकि समुदाय ने 36 पैकेज विकसित किए हैं जो लगभग हर मामले को कवर करते हैं और मैं टाइपस्क्रिप्ट का उपयोग विकास चरण के दौरान सुरक्षित रखने के लिए कर सकता हूं

<template name="autoForm">
  {{#unless afDestroyUpdateForm this.id}}
  {{! afDestroyUpdateForm is a workaround for sticky input attributes}}
  {{! See https://github.com/meteor/meteor/issues/2431 }}
  <form {{atts}}>
    {{> Template.contentBlock ..}}
  </form>
  {{/unless}}
</template>

यहाँ कैसे करना है पर एक अच्छा ब्लॉग पोस्ट है: http://blog.east5th.co/2015/01/13/custom-block-helpers-and-meteor-composability/ साथ ही यहाँ: http: // meteorpedia .com / पढ़ने / Blaze_Notes

2) यह एक बहुत आशाजनक लगता है, लेकिन हाल ही में अपडेट नहीं किया गया है। यह कॉफी स्क्रिप्ट में लिखा गया एक पैकेज है। Meteor के लिए Blaze Components ( https://github.com/peerlibrary/meteor-blaze-compords ) आसानी से जटिल यूआई तत्वों को विकसित करने के लिए एक प्रणाली है जो आपके उल्का ऐप के आसपास पुन: उपयोग किए जाने की आवश्यकता है। आप उन्हें कॉफीस्क्रिप्ट, वेनिला जावास्क्रिप्ट और ईएस 6 में उपयोग कर सकते हैं। सबसे अच्छी बात है, घटक ओओपी हैं। यहाँ उनके उदाहरणों में से एक है:

class ExampleComponent extends BlazeComponent {
  onCreated() {
    this.counter = new ReactiveVar(0);
  }

  events() {
    return [{
      'click .increment': this.onClick
    }];
  }

  onClick(event) {
    this.counter.set(this.counter.get() + 1);
  }

  customHelper() {
    if (this.counter.get() > 10) {
      return "Too many times";
    }
    else if (this.counter.get() === 10) {
      return "Just enough";
    }
    else {
      return "Click more";
    }
  }
}

ExampleComponent.register('ExampleComponent');

{{> ExampleComponent }}

3) मुझे ऐसे प्रकार और ट्रांसपिलर पसंद हैं जो मुझे बताते हैं कि कुछ गलत कब और कहां होगा। मैं Meteor के साथ काम करने के लिए टाइपस्क्रिप्ट का उपयोग कर रहा हूं और निम्नलिखित भंडार पाया गया: https://github.com/dataflows/meteor-typescript-utils ऐसा लगता है जैसे निर्माता ने एमवीसी दृष्टिकोण को पूरा करने की कोशिश की।

class MainTemplateContext extends MainTemplateData {
    @MeteorTemplate.event("click #heybutton")
    buttonClick(event: Meteor.Event, template: Blaze.Template): void {
        // ...
    }

    @MeteorTemplate.helper
    clicksCount(): number {
        // ...
    }
}

class MainTemplate extends MeteorTemplate.Base<MainTemplateData> {
    constructor() {
        super("MainTemplate", new MainTemplateContext());
    }

    rendered(): void {
        // ...
    }
}

MeteorTemplate.register(new MainTemplate());

<template name="MainTemplate">
    <p>
        <input type="text" placeholder="Say your name..." id="name">
        <input type="button" value="Hey!" id="heybutton">
    </p>
    <p>
        Clicks count: {{ clicksCount }}
    </p>

    <p>
        <ul>
            {{#each clicks }}
                <li> {{ name }} at <a href="{{pathFor 'SingleClick' clickId=_id}}">{{ time }}</a></li>
            {{/each}}
        </ul>
    </p>
</template>

दुर्भाग्य से, इस परियोजना का रखरखाव या सक्रिय रूप से विकास नहीं हुआ है।

4) और मुझे लगता है कि पहले से ही उल्लेख किया गया था, आप पैकेज का उपयोग करके स्केल कर सकते हैं। इसके लिए सोच का एक अच्छा सार तरीका चाहिए। यह टेलीस्कोप के लिए काम करता है: https://github.com/TelescopeJS/Telescope

5) उल्का-टेम्प्लेट-विस्तार - टेम्पलेट हेल्पर्स, ईवेंट हैंडलर और हुक को कॉपी करने के विभिन्न तरीके प्रदान करता है, जो कोड के उपयोग की अनुमति देता है; एक नकारात्मक पक्ष यह है कि सभी प्रतिलिपि को एक डेवलपर द्वारा ध्यान रखना पड़ता है, अक्सर बार-बार, जो कोडबेस बढ़ने के कारण समस्याग्रस्त हो जाता है; इसके अलावा, स्पष्ट रूप से परिभाषित एपीआई समुदाय के बिना घटकों का निर्माण और साझा नहीं किया जा सकता है

6) फ्लो कंपोनेंट - फ्लो कंपोनेंट्स एपीआई डिज़ाइन में रिएक्ट के करीब होते हैं जबकि ब्लेज़ कंपोनेंट्स डेटा कॉन्टेक्ट्स और टेम्प्लेट बियरर्स जैसी परिचित अवधारणाएँ रखते हैं; दूसरी ओर प्रवाह घटक अभी भी टेम्पलेट-आधारित ईवेंट हैंडलर का उपयोग करते हैं, जबकि ब्लेज़ कंपोनेंट्स उन्हें क्लास तरीके बनाते हैं, ताकि विरासत के माध्यम से उन्हें विस्तारित या ओवरराइड करना आसान हो; सामान्य रूप से ब्लेज़ कंपोनेंट अधिक OOP उन्मुख लगते हैं; प्रवाह घटक अभी तक आधिकारिक रूप से जारी नहीं किए गए हैं ( # 5 और # 6 https://github.com/peerlibrary/meteor-blaze-compenders#javascript-and-es6-support के लिए टेक्स्ट क्रेडिट )

नंबर 2 और 3 को कुछ उपयोग करने की आवश्यकता है, लेकिन आप समय के साथ विकास की गति प्राप्त करेंगे। नंबर चार आपको अपने कोड को और अधिक स्थिर बनाने के लिए घटकों का निर्माण और परीक्षण करने देता है। नंबर तीन, टाइपस्क्रिप्ट की पूर्ण प्रकार की सुरक्षा के लाभ के साथ आता है, जो कि एक बड़ा प्लस है जब आप खराब प्रलेखन वाली टीम में विकसित होते हैं। हालाँकि, मैं वर्तमान में नंबर दो को टाइपस्क्रिप्ट में पोर्ट कर रहा हूं क्योंकि मैं इसके साथ काम करने में बहुत सहज महसूस करता हूं और जब मैं गुलप का उपयोग नहीं कर रहा हूं तो इसे उल्का के साथ काम करने के लिए कंपाइलर पैकेज को ट्वीस्ट नहीं करना है।

उल्का के साथ काम करने का सही तरीका ढूंढना अभी भी मुश्किल है। आपको इसे अपने लिए समझने की आवश्यकता है, अन्यथा आप एक अच्छी तरह से व्यवस्थित फ़ोल्डर संरचना के साथ समाप्त होते हैं, लेकिन आपके पास कोई सुराग नहीं है कि सब कुछ कहां है। खुश कोडिंग।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.