meteor - এইচটিএমএল টিউটোরিয়াল




অনেক এইচটিএমএল টেম্পলেট ফাইল দিয়ে একটি বড় মিটার অ্যাপ্লিকেশন গঠন করার জন্য সর্বোত্তম অনুশীলন কি? (10)

সমস্ত উদাহরণে (লিডারবোর্ড, ওয়ার্ডপ্লে, ইত্যাদি) তাদের একক HTML টেমপ্লেট ফাইল রয়েছে। অনেক ভাল এইচটিএমএল টেমপ্লেট ফাইলের সাথে কিছু বড় ওপেন সোর্স মিটার প্রকল্প আছে যা আমরা সর্বোত্তম অনুশীলন উদাহরণ হিসাবে ব্যবহার করতে পারি? সবকিছু একটি বড় অ্যাপ্লিকেশন এক টেমপ্লেট ফাইল সব প্রয়োজন বাস্তব রাখা বলে মনে হচ্ছে না।


প্যাকেজ তৈরি করুন

অবশ্যই এই পদ্ধতিতে সবকিছুই ফিট করে না তবে বড় অ্যাপ্লিকেশানগুলিতে আপনার অনেকগুলি কার্যকারিতা থাকবে যা বিচ্ছিন্ন হতে পারে। প্যাকেজগুলিতে বিভাজক এবং পুনঃব্যবহারযোগ্য কিছু ফিট করে, বাকিগুলি উত্তরগুলিতে স্বাভাবিক ডিরেক্টরি কাঠামোতে যায়, যেমন অন্য উত্তরগুলিতে উল্লেখ করা হয়েছে। এমনকি যদি আপনি ওভারহেড এড়াতে প্যাকেজ না তৈরি করেন, এমনকি মড্যুলার পদ্ধতিতে কোডটি গঠন করা একটি ভাল ধারণা ( এই পরামর্শগুলি দেখুন )

উল্কা আপনি আপনার ফাইলগুলি লোড করার উপর একটি সূক্ষ্ম-দাগযুক্ত নিয়ন্ত্রণের অনুমতি দেয় (লোডিং অর্ডার, যেখানে: ক্লায়েন্ট / সার্ভার / উভয়) এবং প্যাকেজগুলি কী রপ্তানি করে।

আমি বিশেষভাবে সম্পর্কিত ফাইলের মধ্যে যুক্তি শেয়ার করার জন্য সহজ উপায় খুব সহজ উপায় খুঁজে পেতে। বলুন, উদাহরণস্বরূপ, আপনি কিছু ফাইল ব্যবহার করতে চান এবং বিভিন্ন ফাইল ব্যবহার করতে চান। আপনি কেবল এটি "বিশ্বব্যাপী" ( var ছাড়া) তৈরি করুন এবং মিটার প্যাকেজের নামস্থানতে মোড়ানো হবে, সুতরাং এটি গ্লোবাল নামস্থান দূষিত করবে না

Here অফিসিয়াল ডক


Meteorjs কোডিং থেকে কিছুক্ষণ পরে, আমি একটি মোটামুটি জটিল অনলাইন খেলা নির্মাণ করতে উত্সর্গ করার জন্য কিছু অতিরিক্ত সময় আছে খুশি। অ্যাপ স্ট্রাকচারটি আমার প্রথম উদ্বেগগুলির মধ্যে একটি, এবং এটি দেখে মনে হচ্ছে যে অনেকগুলি ভাল প্রোগ্রামার প্যাকেজ-কেবলমাত্র একটি অ্যাপ্লিকেশন গঠন করার পদ্ধতিটি চ্যাম্পিয়ন করেছেন, যা আপনাকে স্বল্পভাবে কার্যকরীভাবে স্বতন্ত্র প্যাকেজগুলি যুক্ত করতে দেয়। পদ্ধতির অন্যান্য সুবিধা রয়েছে, এবং ২ টি খুব ভাল নিবন্ধ এখানে ব্যাখ্যা করা যেতে পারে:

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


আপনার অ্যাপ্লিকেশন গঠন করার বিভিন্ন পদ্ধতির অনেক আছে। উদাহরণস্বরূপ, যদি আপনার রাউটার এবং বিভিন্ন পৃষ্ঠার টেমপ্লেট থাকে এবং অভ্যন্তরীণ প্রতিটি পৃষ্ঠার টেমপ্লেটটিতে আপনার অনেক পৃষ্ঠা অংশ থাকে তবে আমি এটি গঠন করবো উচ্চতর নিম্নতর স্তর থেকে সেমিক্টগুলিতে নির্ভর করে ..

উদাহরণ স্বরূপ:

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 ফাইল এবং শুধুমাত্র একটি টেম্পলেট.জেএস ফাইল ব্যবহার করি .. :)

আমি এটা সামান্য বিট সাহায্য আশা করি


আপনি চান আপনার উপায়ে আপনার অ্যাপ্লিকেশন বেশিরভাগ ভাবে গঠন তাই উল্কা ডিজাইন করা হয়েছে। সুতরাং যদি আপনি আপনার কাঠামোটি পছন্দ করেন না তবে আপনি কেবল একটি ফাইলটিকে একটি নতুন ডিরেক্টরিতে সরাতে পারেন, বা এমনকি একটি ফাইলকে অনেক টুকরাতে বিভক্ত করতে পারেন এবং মিটারে এটির বেশিরভাগই একই রকম। প্রধান ডকুমেন্টেশান পৃষ্ঠায় উল্লেখ হিসাবে ক্লায়েন্ট, সার্ভার, এবং পাবলিক ডিরেক্টরি বিশেষ চিকিত্সা নোট করুন: http://docs.meteor.com/

শুধু একটি এইচটিএমএল পূরণে একসঙ্গে সবকিছু 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

আমি আরো কিছু নির্দিষ্ট সর্বোত্তম অনুশীলন কাঠামো এবং নামকরণ কনভেনশন যদিও আবির্ভূত আশা করি।


আমি mattteom boilerplate ফর্ম্যাট অনুসরণ করছি, যা ইতিমধ্যে লোহা রাউটার এবং মডেল (সংগ্রহ 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

আমি yagooar সঙ্গে একমত, কিন্তু এর পরিবর্তে:

client/application.js

ব্যবহার করুন:

client/main.js

প্রধান। * ফাইল শেষ লোড করা হয়। এটি আপনাকে লোড অর্ডার সংক্রান্ত সমস্যাগুলি না নিশ্চিত করতে সহায়তা করবে। আরো বিস্তারিত জানার জন্য আবহাওয়া ডকুমেন্টেশন, http://docs.meteor.com/#structuringyourapp দেখুন।


আমি একটি ভাল কল্পিত স্থাপত্য মাধ্যমে আমার অ্যাপ্লিকেশন উন্নত এবং স্কেল করার জন্য ভাল অনুশীলন খুঁজছেন। উপরের উল্লিখিত অনুশীলনগুলি ছোট থেকে মাঝারি আকারের অ্যাপ্লিকেশানগুলির জন্য কাজ করে তবে আপনি বড় দলের মধ্যে কাজ করার সময় ব্যর্থ হবেন। আমি চেষ্টা করেছি বিভিন্ন উপায় আছে:

1) আমি এই কৌশল অনুসরণ করেছি: https://github.com/aldeed/meteor-autoform টেম্পলেটগুলি স্কেল এবং পুনরায় ব্যবহার করতে। লেখক উপাদান এবং ক্ষেত্র নকশা উপর একটি খুব ভাল ধারণা আছে। আমি বর্তমানে এটি বাস্তবায়ন করছি কারণ সম্প্রদায়টি প্রায় 36 টি প্যাকেজ তৈরি করেছে যা প্রায় প্রতিটি ক্ষেত্রে আচ্ছাদিত করে এবং আমি TypeScript উন্নয়ন পর্যায়ে নিরাপদ হতে ব্যবহার করতে পারি।

<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/read/Blaze_Notes

2) এই এক তাই প্রতিশ্রুতিশীল কিন্তু সাম্প্রতিক আপডেট করা হয়েছে। এটি একটি কফি লিপির মধ্যে লিখিত প্যাকেজ বলা হয়। উল্কা উপাদানগুলির জন্য ( https://github.com/peerlibrary/meteor-blaze-components ) সহজেই জটিল UI টি উপাদান তৈরির একটি সিস্টেম যা আপনার আবহাওয়া অ্যাপ্লিকেশনের কাছাকাছি পুনঃব্যবহৃত করতে হবে। আপনি তাদের কফিস্ক্রিপ্ট, ভ্যানিলা জাভাস্ক্রিপ্ট এবং ES6 ব্যবহার করতে পারেন। সেরা জিনিস, উপাদান OOP হয়। এখানে তাদের উদাহরণ এক:

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) meteor-template-extension - কোড পুনঃব্যবহারের অনুমতি দিয়ে টেম্পলেটগুলির মধ্যে টেমপ্লেট সহায়ক, ইভেন্ট হ্যান্ডলার এবং হুকগুলি অনুলিপি করার বিভিন্ন উপায় সরবরাহ করে; একটি নেতিবাচক দিক হল যে সমস্ত অনুলিপি বিকাশকারীর দ্বারা যত্ন নিতে হবে, প্রায়শই বারবার, যা কোডবেজ বৃদ্ধি হিসাবে সমস্যাযুক্ত হয়ে যায়; তদ্ব্যতীত, একটি পরিষ্কারভাবে সংজ্ঞায়িত API সম্প্রদায় ছাড়া উপাদান তৈরি এবং ভাগ করতে পারবেন না

6) ফ্লো উপাদানগুলি - ফ্লো উপাদানগুলি API ডিজাইনে প্রতিক্রিয়ার কাছাকাছি থাকে তবে ব্ল্যাজ উপাদানগুলি তথ্য প্রসঙ্গ এবং টেমপ্লেট সহায়কগুলির মতো পরিচিত ধারণাগুলি ধরে রাখে; অন্য দিকে ফ্লো উপাদান এখনও টেমপ্লেট ভিত্তিক ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে, যখন ব্ল্যাজ উপাদান তাদের ক্লাস পদ্ধতিগুলি তৈরি করে যাতে উত্তরাধিকারের মাধ্যমে তাদের প্রসারিত বা ওভাররাইড করা সহজ হয়; সাধারণ Blaze সামগ্রী আরো OOP ভিত্তিক বলে মনে হচ্ছে; ফ্লো উপাদানগুলি এখনও আনুষ্ঠানিকভাবে প্রকাশ করা হয়নি ( # 5 এবং # 6 এর জন্য পাঠ্য ক্রেডিটগুলি https://github.com/peerlibrary/meteor-blaze-components#javascript-and-es6-support )

সংখ্যা 2 এবং 3 কিছু ব্যবহার করা প্রয়োজন, কিন্তু আপনি সময়ের সাথে উন্নয়ন গতি পাবেন। সংখ্যা চারটি আপনাকে আপনার কোডকে আরও স্থিতিশীল করতে উপাদানগুলি তৈরি এবং পরীক্ষা করতে দেয়। সংখ্যা তিনটি টাইপস্ক্রিপ্টের সম্পূর্ণ টাইপ সুরক্ষাগুলির সুবিধা নিয়ে আসে, যা দরিদ্র ডকুমেন্টেশনের সাথে একটি দলের বিকাশের সময় একটি বিশাল প্লাস। যাইহোক, আমি বর্তমানে টাইপস্ক্রিপ্টে দ্বিতীয় নম্বর পোর্ট করে থাকি কারণ আমি এটির সাথে কাজ করার জন্য খুব আরামদায়ক বোধ করছি এবং আমি যখন গ্লুপ ব্যবহার করি না তখন এটি মিটারের সাথে কাজ করার জন্য কম্পাইলার প্যাকেজটি টিচ করতে হবে না।

মিটারের সাথে কাজ করার সঠিক উপায় খুঁজে পাওয়া এখনও কঠিন। আপনি নিজের জন্য এটি খুঁজে বের করতে হবে, অন্যথায় আপনি একটি চমত্কারভাবে সাজানো ফোল্ডার গঠন সঙ্গে শেষ পর্যন্ত, কিন্তু সবকিছু আছে যেখানে আপনি কোন সূত্র আছে। শুভ কোডিং।


এই বিষয়ে গুগলিং যারা সবাই জন্য:

em কমান্ড লাইন টুল (ইভেন্টডমিন দ্বারা, আয়রন রাউটারের পিছনে ছেলেরা) একটি নতুন মিটিয়ার অ্যাপ্লিকেশানকে রগিং করার সময় খুব সহায়ক। এটি একটি চমৎকার ফাইল / ফোল্ডার গঠন তৈরি করবে। আপনি যদি ইতিমধ্যেই একটি অ্যাপ্লিকেশানটিতে কাজ করেন এবং এটি পুনরায় সংগঠিত করতে চান তবে em দিয়ে একটি নতুন প্রকল্প সেট আপ করুন এবং আপনি অনুপ্রেরণার জন্য এটি ব্যবহার করতে পারেন।

দেখুন: https://github.com/EventedMind/em

এবং এখানে: https://.com/questions/17509551/what-is-the-best-way-to-organize-templates-in-meteor-js


লোহা-ক্লি ফাউন্ডেশন সিএলআই ব্যবহার করুন। জিনিস খুব সহজ করে তোলে।

github.com/iron-meteor/iron-cli

একবার ইনস্টল। iron create my-app ব্যবহার iron create my-app নতুন প্রকল্প তৈরি 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

ইবেডেড মাইন্ডে একটি নতুন বর্গ রয়েছে যা সেট আপ আপ মিটার প্রজেক্টসকে সম্বোধন করে যা এটির ঠিকানা দেয় তবে প্রকল্প কনফিগারেশন সম্পর্কে আলোচনা করে এবং আপনার ডেভেলপমেন্ট পরিবেশ সেট আপ করে।

ক্লাসে অ্যাপ্লিকেশন কাঠামো ভিডিও থেকে: আপনার আবেদনটি কীভাবে গঠন করা উচিত সে সম্পর্কে মিটারের খুব দৃঢ় মতামত নেই তবে এখানে কিছু নিয়ম রয়েছে:

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/

Todos_controller রুট কন্ট্রোলার প্রসারিত করে, যা আয়রন রাউটারের সাথে আসে।

উপরে উল্লিখিত em টুলটি এখনও একটি বড় আপডেট পেয়েছে এবং এটি আরও ভাল এবং পাওয়া উচিত: https://github.com/EventedMind/em