Meteor.js: به روزرسانی بسته های FlowRouter – Community Dev

سلام توسعه دهندگان دیگر!

من هیجان زده ام که آخرین به روزرسانی ها را در سه کتابخانه Essential Meteor.js که از سال 2015 حفظ کرده ام به اشتراک بگذارم: ostrio:flow-router-extraبا ostrio:flow-router-titleوت ostrio:flow-router-metaبشر

این بسته ها وظایف مربوط به مدیریت مسیریابی ، عناوین اسناد و برچسب های متا را در برنامه های Meteor ساده تر می کنند. با انتشار اخیر Meteor V3 و Blaze V3 ، من این کتابخانه ها را برای اطمینان از سازگاری و معرفی سازگاری با الگوهای ناهمزمان مدرن به روز کردم و آنها را ابزارهای قدرتمندی برای ساخت برنامه های وب مقیاس پذیر امروز برای فردا ایجاد کردم.

درباره FlowRouter و تکامل آن

هنگامی که من برای اولین بار وارد توسعه Meteor.js شدم ، نیاز به ابزارهای انعطاف پذیر تر و غنی تر برای مدیریت مسیریابی و مدیریت ابرداده را تشخیص دادم. اصلی flow-router یک پایه محکم بود ، اما من فرصت هایی را برای گسترش توانایی های آن دیدم ، که منجر به ایجاد آن شد ostrio:flow-router-extraبشر این بسته اصلی برتری داشت جریان دهنده کتابخانه به عنوان 9 سال گذشته به روز نشده است. ostrio:flow-router-extra یک راه حل مسیریابی متنوع تر ، پشتیبانی از چندین چارچوب جلویی از جمله Blaze ، Vue ، React ، Svelte و فراتر از آن را ارائه می دهد. بر اساس این کار ، ostrio:flow-router-title وت ostrio:flow-router-meta برای ارائه مدیریت یکپارچه از document.title و برچسب های متا با پشتیبانی از منابع داده واکنشی.

چه جدید در ostrio:flow-router-extra@3.12.0

آخرین نسخه ، نسخه 3.12.0 ، چندین پیشرفت قابل توجه را به ارمغان می آورد:

• قلاب های ناهمزمان: actionبا dataوت onNoData قلاب ها اکنون از توابع ناهمزمان پشتیبانی می کنند و امکان واکشی داده های کارآمدتر و ارائه گردش کار را فراهم می کنند
• سازگاری بهبود یافته: بسته برای اطمینان از ادغام یکپارچه با یکپارچه به روز شده است meteor@3 و سایر بسته های مدرن ، افزایش ثبات و عملکرد کلی
• پشتیبانی از نوع پیشرفته: تعاریف TypeScript تصفیه شده است ، ارائه نوع بهتر و تجربه توسعه دهنده

برای یک مرور کلی ، می توانید به v3.12.0 یادداشت های انتشار

چه چیزی در مورد FlowRouter منحصر به فرد است و چگونه از آن استفاده می شود؟

در اینجا موارد استفاده اخیر من و برخی از کارهای توسعه که با استفاده از بسته های FlowRouter حل شده اند:

• جلوی ترکیبی: پروژه را با داشبورد React ، صفحات بازاریابی Vue و Blaze برای صفحات استراحت و میراث تصور کنید. از آنجا که Flow-Router-Extra Framework-Agnostic است ، به تیم من این امکان را می دهد که منطق را در داخل Flowrouter نگه دارد و از سه چارچوب مختلف در برنامه و پروژه واحد استفاده کند
• پلت فرم تجارت الکترونیکی: سایتی را با هزاران محصول تصور کنید. با استفاده از بارگذاری پویا ، ما با بارگذاری داده های محصول و قطعات فقط در هنگام بازدید کاربر از یک صفحه محصول خاص ، بار بارگذاری را کاهش داده ایم. در data() وت waitOn قلاب هایی که این داده های یکپارچه و منتقل شده را مستقیماً به قالب ها منتقل می کنند. این همچنین باعث کاهش اندازه بسته و بهبود عملکرد WebApp می شود
• بهینه سازی سئو: جفت شده با FlowRoutermeta و FlowRoutertitle ، تضمین می کند که هر مسیر متناسب با برچسب ها و عناوین متناسب است. برای یک بستر وبلاگ که اخیراً روی آن کار می کردیم ، این رتبه بندی جستجو را بدون زحمت افزایش داد

ادغام کننده ostrio:flow-router-extra با چارچوب های مختلف جلو

یکی از نقاط قوت ostrio:flow-router-extra طراحی چارچوب-آگنوستیک آن است که ادغام را با Blaze ، Vue ، React ، Svelte و موارد دیگر امکان پذیر می کند. بیشتر بخوانید تا نمونه هایی از نحوه استفاده از FlowRouter با چارچوب های مختلف را ببینید.

ostrio:flow-router-extra از “تقسیم کد دقیق” از طریق داده های پویا و بارگیری مؤلفه پشتیبانی می کند-امکان بارگیری اجزای و داده های مرتبط با آن در هر مسیر به استثنای آن پرونده ها از “بسته نرم افزاری برنامه” ، این راه حل عالی برای عملکرد و انعطاف پذیری است.

یکپارچه سازی

از آنجا که Blaze Engine بخشی از اکوسیستم Meteor است-Flowrouter با موتور رندر و قالب بندی داخلی برای Blaze حمل می شود. this.render() روش در داخل قلاب های مسیر موجود است.

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/', {
  name: 'home',
  action() {
    // render directly to 
    this.render('homeTemplate');
  }
});

FlowRouter.route('/', {
  name: 'home',
  action() {
    // render into {{> yield}} placeholder inside layout
    this.render('layout', 'home');
  }
});

توجه: kadira:blaze-layout منسوخ شده است و در 10 سال گذشته به روز نشده است ، توصیه می شود از داخلی استفاده کنید this.render() روش ارائه الگوهای Blaze.

برای کسب اطلاعات در مورد همه ویژگی های مربوط به Blaze-Templating-آموزش “قالب بندی” دقیق را بخوانید.

نمای ادغام

ایجاد کردن app با استفاده از new Vue() یا createApp، سپس اجزای VUE را در داخل وارد و ارائه دهید action() قلاب

import Vue from 'vue';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

const app = new Vue({
  el: '#app',
  data: {
    currentComponent: null
  },
  render(h) {
    // Render the current component, or a fallback if it's not set
    return this.currentComponent ? h(this.currentComponent) : h('div', 'Loading...');
  }
});

FlowRouter.route('/', {
  name: 'home',
  async action() {
    // Dynamically import the HomeComponent
    const HomeComponent = await import('/imports/ui/HomeComponent.vue');
    // Update the reactive property with the imported component.
    app.currentComponent = HomeComponent.default || HomeComponent;
  }
});

یکپارچه سازی

با استفاده از اجزای React واردات و ارائه دهید react-dom درون action() قلاب

import React from 'react';
import { render } from 'react-dom';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/', {
  name: 'home',
  async action() {
    const { default: HomeComponent } = await import('/imports/ui/HomeComponent.jsx');
    render(<HomeComponent />, document.getElementById('app'));
  }
});

همان می تواند با استفاده از mount برای قالب بندی بهتر با App به عنوان طرح

import React from 'react';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { mount } from 'react-mounter';
import App from '/imports/ui/App.jsx';

FlowRouter.route('/', {
  name: 'home',
  async action() {
    const { default: HomeComponent } = await import('/imports/ui/HomeComponent.jsx');
    mount(App, {
      content: <HomeComponent />
    });
  }
});

یکپارچه سازی

واردات و ارائه اجزای svelte در داخل action() قلاب

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/', {
  name: 'home',
  async action() {
    const { default: HomeComponent } = await import('/imports/ui/HomeComponent.svelte');
    new HomeComponent({
      target: document.getElementById('app')
    });
  }
});

نمونه های اصلی ویژگی ها

بیشتر بخوانید تا ببینید که چگونه API به روز شده در کارهای روزانه می تواند استفاده شود.

داده ها از Meteor.Method

همه ما می دانیم که Pub/Sub فقط باید در مورد به روزرسانی داده های زنده “باید” برای هر چیز دیگری که ما استفاده می کنیم استفاده شود Meteor.callAsync در مشتری و Meteor.Methods روی سرور در اینجا و مثال نحوه استفاده از آن در مسیر FlowRouter و data() قلاب داده های برگشتی از این قلاب به عنوان آرگومان سوم به سایر قلاب های دیگر در همان مسیر منتقل می شوند:

FlowRouter.route('/post/:_id', {
  name: 'post',
  async data(params) {
    const post = await Meteor.callAsync('post.get', params._id);
    if (!post) {
      return;
    }
    return { post };
  },
  action(params, queryParams, { post }) {
    this.render('postTemplate', { post });
  },
  title(params, queryParams, { post }) {
    return post?.title || 'Post not found';
  },
  onNoData() {
    this.render('page404');
  }
});

بارگیری ماژول پویا با waitOn قلاب

در waitOn در ostrio:flow-router-extra بارگذاری پویا کد جلویی را به صورت هر مسیر تسهیل می کند و الگوی “کد دقیق-نمونه برداری” را اجرا می کند. این رویکرد تضمین می کند که فقط کد لازم برای یک مسیر خاص بارگیری می شود و عملکرد را بهینه می کند. استفاده کردن whileWaiting در حالی که داده ها و ماژول ها در حال بارگیری هستند. waitOn قلاب به عنوان مثال:

import LoadingComponent from '/imports/ui/LoadingComponent.jsx';

const publicRoutes = FlowRouter.group({
  title: "'Meteor App Title', // Default title for public routes"
  whileWaiting() {
    // Render Loading... spinner template between navigation
    render(<LoadingComponent />, document.getElementById('app'));
  }
});

publicRoutes.route('/about', {
  name: 'about',
  waitOn() {
    return import('/imports/ui/AboutComponent.jsx');
  },
  async action() {
    // import() will resolve instantly as it was cached after calling the same import inside `waitOn` hook
    const { default: AboutComponent } = await import('/imports/ui/AboutComponent.jsx');
    render(<AboutComponent />, document.getElementById('app'));
  },
});

در این مثال ، AboutComponent فقط به صورت پویا وارد می شود /about دسترسی به مسیر ، کاهش اندازه بسته نرم افزاری اولیه و بهبود زمان بار برای کاربران است.

داده های ناهمزمان واکشی با data قلاب

در data هوک اکنون از توابع ناهمزمان پشتیبانی می کند و به توسعه دهندگان این امکان را می دهد تا قبل از ارائه مسیر ، داده ها را واکشی کنند و مستقیماً به الگوی یا مؤلفه منتقل کنند. مقدار بازگشت از data() هوک به عنوان آرگومان سوم به همه قلاب های دیگر در همان مسیر منتقل شد:

FlowRouter.route('/post/:_id', {
  name: 'post',
  waitOn(params) {
    return Meteor.subscribe('post.get', params._id);
  },
  async data(params) {
    const post = await PostsCollection.findOneAsync({ _id: params._id });
    if (!post) {
      return;
    }
    return { post };
  },
  action(params, queryParams, { post }) {
    this.render('postTemplate', { post });
  },
  title(params, queryParams, { post }) {
    return post?.title || 'Post not found';
  },
  onNoData() {
    this.render('page404');
  }
});

در اینجا ، data قلاب به طور غیر همزمان یک پست را توسط آن بازیابی می کند _id و آن را به postTemplate برای ارائه

از موارد و حل مسئله استفاده کنید

در اینجا مثال های بیشتری آورده شده است که چگونه بسته های FlowRouter می توانند حل کارهای روز به روز را بهبود بخشند

مدیریت عناوین سند با ostrio:flow-router-title

نگه داشتن عنوان سند در همگام سازی با مسیر فعلی ، تجربه کاربر و سئو را افزایش می دهد. با ostrio:flow-router-title، می توانید عنوان و عناوین جهانی را در هر مسیر تعریف کنید:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';

FlowRouter.globals.push({
  title: 'My App Title'
});

FlowRouter.route('/about', {
 name: 'about',
 title: 'About Us',
 action() {
   this.render('aboutTemplate');
 }
});

درست کردن نان document.title با استفاده از titlePrefix گزینه در group و گروه های تو در تو:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';

// My App > Profile
const profileRoutes = FlowRouter.group({
  title: 'Profile'
  titlePrefix: 'My App > '
});

profileRoutes.route('/profile', {
  action() {
    this.render('profile');
  }
});

// My App > Profile > Settings
const settingsRoutes = profileRoutes.group({
  title: 'Settings'
  titlePrefix: 'Profile > '
});

settingsRoutes.route('/profile/settings', {
  action() {
    this.render('profileSettings');
  }
});

در مورد مدیریت بیشتر بدانید document.title در ostrio:flow-router-title مستندات بسته بندی

برچسب های متا پویا با ostrio:flow-router-meta

برچسب های متا نقش مهمی در اشتراک SEO و رسانه های اجتماعی دارند. با ostrio:flow-router-meta، می توانید برچسب های متا را به صورت پویا بر اساس مسیر تنظیم کنید:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterMeta } from 'meteor/ostrio:flow-router-meta';

FlowRouter.route('/product/:id', {
 name: 'product',
 async data(params) {
   const product = await ProductsCollection.findOneAsync({ _id: params.id });
   return { product };
 },
 meta(params, qs, { product }) {
   return {
     'description': product.description,
     'og:image': product.imageUrl
   };
 },
 action(params, queryParams, { product }) {
   this.render('productTemplate', { product });
 }
});

در این مثال ، برچسب های متا مانند توضیحات و تصویر نمودار باز به صورت پویا بر اساس داده های محصول ، بهبود SEO و ظاهر پیوندهای مشترک تنظیم می شوند. در مورد همه ویژگی های ostrio:flow-router-meta بسته بندی در مستندات آن. برای اطمینان از تمام برچسب های متا و محتوای صفحه که هنگام بازدید از موتورهای جستجو به درستی ارائه می شود-از سرویس پیش ارائه استفاده کنید.

Flow-Router-Extra و بسته های همراه آن ضروری برای توسعه دهندگان Meteor.js هستند. آنها به طور رسمی توسط تیم شهاب سنگ توصیه می شوند ، آنها انعطاف پذیری ، عملکرد و سازگاری بی نظیر را ارائه می دهند. این که آیا شما در حال ساخت آبگرم هستید ، بهینه سازی برای سئو یا به دست آوردن چارچوب های متعدد ، این ابزارها را پوشش داده اید. به اسناد شیرجه بزنید ، نمونه ها را امتحان کنید و به من اطلاع دهید که چگونه آنها برای شما کار می کنند – کد نویسی خوشحال!

چرا Meteor.js

همانطور که به سال 2025 می رویم ، Meteor.js یک انتخاب ستاره ای برای توسعه وب است و من اینجا هستم تا به شما بگویم که چرا از دیدگاه یک توسعه دهنده. پلت فرم JavaScript Full-Stack آن با توانایی خود در ارائه برنامه های واقعی و واکنشی خارج از جعبه ، درخشش دارد-فکر کنید چت ها ، ابزارهای مشترک یا داشبورد که به روزرسانی داده ها فوراً در بین مشتری ها بدون شکستن عرق انجام می شود.

آخرین Meteor 3.1 با Node.js 22 پشتیبانی ، آن را بر عهده نگه دارید و یکپارچه با چارچوب های مدرن جلوی مانند React ، Vue ، Svelte و Blaze محبوب ما ادغام شوید

آنچه باعث ایستادگی آن می شود ، سادگی آن است: شما یک زبان (JavaScript) را برای مشتری و سرور می نویسید ، و بار شناختی از پشته های چند فناوری را کاهش می دهد. بعلاوه ، ویژگی هایی مانند پروتکل داده توزیع شده (DDP) و واکنش پذیری داخلی به این معنی است که شما چرخ را برای همگام سازی داده ها اختراع نمی کنید-چیزی که هنوز هم در بسیاری از تنظیمات دیگر دردسر است (من آن را در دست اول می شناسم و تجربه کردم). به آن تجربه توسعه صفر کنفای آن ، استنتاج Typescript و ساخت یک فرمان اضافه کنید

Meteor.js ابزاری است که به شما امکان می دهد روی ویژگی های ساختمان تمرکز کنید ، نه کشتی گیری با دیگ بخار.

Meteor.js فقط یک چارچوب نیست-این یک محیط توسعه تمام عیار و یک ابزار ساخت و ساز چارچوب-Agnostic است که برای هر دو مرحله DEV و تولید یک مغز نیست. درخشان ترین ذهن در نرم افزار Meteor و جامعه منبع باز آن را رونق می گیرد و به روزرسانی هایی مانند ادغام اکسپرس اخیر برای API های آرام و حفظ اکوسیستم پر جنب و جوش بسته ها را تحت فشار قرار می دهد. این از سال 2012 بر روی لورهای خود استراحت نمی کند. این در حال تحول با ورودی از یک جامعه Discord اختصاصی و همکاران GitHub است.

Beyond Meteor ، DNA آن در پروژه های معروف منبع باز عمیق است: Apollo Graphql ، متولد محوری گروه توسعه شهاب سنگ تا یک لایه باطن جدید ، داده های متحول شده ، در حالی که vulcan.js یک پشته React/Graphql را در بالای بنیادهای شهاب سنگ ساخته است. حتی ابزارهایی مانند InjectDetect ریشه های خود را به اخلاق زمان واقعی Meteor ردیابی می کنند. من به عنوان یک توسعه دهنده ، من عاشق این هستم که سیستم ساخت Meteor بدون اینکه من یک فایل پیکربندی را لمس کنم – خواه من نمونه سازی و یا حمل و نقل به تولید ، این یک تقویت کننده بهره وری است که حتی در سال 2025 نیز کار سختی است.

خواندن بیشتر