برنامه‌های وب خود را با ابزارهای مدرن داربست‌بندی کنید
مقدمه
سلام. هرکسی که برنامه وب می‌نویسد می‌داند که حفظ بهره‌وری چقدر مهم است. وقتی مجبورید نگران کارهای خسته‌کننده مانند پیدا کردن کد تکراری مناسب، راه‌اندازی گردش کار توسعه و آزمایش، و کوچک کردن و فشرده‌سازی همه منابع خود باشید، این یک چالش است.
خوشبختانه ابزارهای مدرن فرانت‌اند می‌توانند به خودکارسازی بخش زیادی از این فرایند کمک کنند و به شما اجازه دهند روی نوشتن یک برنامه عالی تمرکز کنید. این مقاله به شما نشان می‌دهد که چگونه از Yeoman، یک گردش کار ابزارها برای برنامه‌های وب، استفاده کنید تا ایجاد برنامه‌ها را بااستفاده از Polymer، کتابخانه‌ای از شبیه‌سازهای مرورگر و ویژگی‌های تسهیل‌کننده برای توسعه برنامه‌ها بااستفاده از Web Components، ساده‌تر کنید.
با Yo، Grunt، و Bower آشنا شوید
Yeoman مردی است با کلاهی که سه ابزار برای بهبود بهره‌وری شما دارد:
- yo یک ابزار داربست است که اکوسیستمی از داربست‌های خاص چارچوب را ارائه می‌دهد، به نام مولدها که می‌توانند برای انجام برخی از کارهای خسته‌کننده‌ای که قبلاً ذکر کردم استفاده شوند.
- grunt برای ساخت، پیش‌نمایش، و آزمایش پروژه شما استفاده می‌شود، که این امر به‌لطف کمک از تکالیف انتخاب‌شده توسط تیم Yeoman و grunt-contrib است.
- bower برای مدیریت وابستگی استفاده می‌شود، بنابراین دیگر لازم نیست به‌صورت دستی اسکریپت‌هایتان را بارگیری و مدیریت کنید.
فقط با یک یا دو فرمان، Yeoman می‌تواند کد متن استاندارد برای برنامه‌تان (یا بخش‌های مجزا مثل Models) بنویسد، Sass شما را کامپایل کند، CSS، JS، HTML، و تصاویرتان را کوچک و الحاق کند، و یک وب‌سرور ساده در دایرکتوری فعلی‌تان راه‌اندازی کند. همچنین می‌تواند آزمایش‌های واحد شما و موارد دیگر را اجرا کند.
می‌توانید مولدها را از Node Packaged Modules (npm) نصب کنید و اکنون بیش‌از ۲۲۰ مولد دردسترس است که بسیاری از آن‌ها توسط انجمن متن‌باز نوشته شده‌اند. تولیدکننده‌های محبوب عبارتند از generator-angular، generator-backbone و generator-ember.
با نصب نسخه اخیر Node.js، به نزدیک‌ترین پایانه بروید و این دستور را اجرا کنید:
$ npm install -g yo
فقط همین! اکنون Yo، Grunt، و Bower را دارید و می‌توانید آن‌ها را مستقیماً از خط فرمان اجرا کنید. این برونداد اجرای yo است:
مولد Polymer
همان‌طور که قبلاً اشاره کردم، Polymer کتابخانه‌ای از شبیه‌سازهای مرورگر و سینتکس‌های ساده‌تر است که امکان استفاده از «مؤلفه‌های وب» را در مرورگرهای نو فراهم می‌کند. این پروژه به توسعه‌دهندگان امکان می‌دهد بااستفاده از پلاتفرم آینده برنامه بسازند و به W3C اطلاع دهند که مشخصات درحال توسعه را در کجا می‌توان بیشتر بهبود بخشید.
generator-polymer یک تولیدکننده جدید است که به شما کمک می‌کند تا برنامه‌های Polymer را بااستفاده از Yeoman داربست‌بندی کنید، به شما امکان می‌دهد تا به‌راحتی عناصر Polymer (سفارشی) را ازطریق خط فرمان ایجاد و سفارشی‌سازی کنید، و آن‌ها را بااستفاده از HTML Imports وارد کنید. این کار با نوشتن کد متن استاندارد برای شما، در زمانتان صرفه‌جویی می‌کند.
سپس، با اجرای دستور زیر، تولیدکننده Polymer را نصب کنید:
$ npm install generator-polymer -g
همین! اکنون برنامه شما دارای قدرت‌های فوق‌العاده Web Component است!
مولد جدیدی که نصب کرده‌ایم چند بخش خاص دارد که به آن‌ها دسترسی خواهید داشت:
- از
polymer:elementبرای داربست‌بندی عناصر Polymer جدید استفاده می‌شود. برای مثال:yo polymer:element carousel polymer:appبرای داربست‌بندی index.html اولیه شما، Gruntfile.js حاوی پیکربندی زمان ساخت برای پروژه شما، و همچنین کارهای Grunt و ساختار پوشه توصیه‌شده برای پروژه استفاده می‌شود. همچنین به شما این امکان را می‌دهد که از Sass Bootstrap برای سبک‌های پروژه خود استفاده کنید.
بیایید برنامه Polymer بسازیم
می‌خواهیم بااستفاده از چند عنصر Polymer سفارشی و تولیدکننده جدیدمان، وبلاگی ساده بسازیم.
برای شروع، به پایانه بروید، دایرکتوری جدیدی بسازید و بااستفاده از mkdir my-new-project && cd $_ به آن cd کنید. اکنون می‌توانید برنامه Polymer خود را با اجرای دستور زیر راه‌اندازی کنید:
$ yo polymer
این کار جدیدترین نسخه Polymer را از Bower دریافت می‌کند و یک index.html، ساختار دایرکتوری، و وظایف Grunt را برای گردش کار شما آماده می‌کند. تا برنامه آماده شود، چرا قهوه‌ای ننوشید؟
بسیار خوب، در مرحله بعد می‌توانیم grunt server را اجرا کنیم تا پیش‌نمایش ظاهر برنامه را ببینیم:
این سرور از LiveReload پشتیبانی می‌کند، یعنی می‌توانید ویرایشگر نوشتار را باز کنید، عنصر سفارشی را ویرایش کنید، و مرورگر پس‌از ذخیره کردن مجدداً بار می‌شود. این کار نمای هم‌زمان خوبی از وضعیت فعلی برنامه‌تان به شما می‌دهد.
سپس، بیایید یک عنصر Polymer جدید برای نمایش پست وبلاگ ایجاد کنیم.
$ yo polymer:element post
Yeoman چند سؤال از ما می‌پرسد، مثلاً اینکه آیا می‌خواهیم سازنده‌ای را اضافه کنیم یا از «وارد کردن HTML» برای اضافه کردن عنصر پست در index.html استفاده کنیم. بیایید فعلاً به دو گزینه اول «نه» بگوییم و گزینه سوم را خالی بگذاریم.
$ yo polymer:element post
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? No
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)
create app/elements/post.html
با این کار، عنصر Polymer جدیدی در فهرست راهنمای /elements با نام post.html ایجاد می‌شود:
<polymer-element name="post-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
</template>
<script>
Polymer('post-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
این اطلاعات شامل موارد زیر می‌شود:
- کد متن استاندارد برای عنصر سفارشی شما، که به شما امکان می‌دهد از نوع عنصر DOM سفارشی در صفحه‌تان استفاده کنید (مثلاً
<post-element>) - برچسب الگو برای الگوهای سمت مشتری «بومی» و سبک‌های محدود نمونه برای کپسوله‌سازی سبک‌های عنصر شما
- ثبت عنصر boilerplate و رویدادهای چرخه حیات.
کار کردن با منبع واقعی داده‌ها
وبلاگ ما به جایی برای نوشتن و خواندن پست‌های جدید نیاز دارد. برای نشان دادن کار با یک سرویس داده واقعی، از Google Apps Spreadsheets API استفاده می‌کنیم. این کار به ما امکان می‌دهد به‌راحتی محتوای هر صفحه‌گسترده‌ای را که بااستفاده از «سندنگار Google» ایجاد شده است بخوانیم.
بیایید این را راه‌اندازی کنیم:
در مرورگرتان (برای این مراحل، Chrome توصیه می‌شود) این «صفحه‌گسترده سندنگار Google» را باز کنید. این فایل حاوی نمونه داده‌های پست تحت فیلدهای زیر است:
- شناسه
- عنوان
- نویسنده
- محتوا
- تاریخ
- کلیدواژه‌ها
- ایمیل (نویسنده)
- نامک (برای نشانی وب نامک پست شما)
به منو فایل بروید و تهیه رونوشت را انتخاب کنید تا رونوشت خودتان را از صفحه‌گسترده ایجاد کنید. شما می‌توانید در اوقات فراغت خود محتوا را ویرایش کنید، پست‌ها را اضافه یا حذف کنید.
دوباره به منو فایل بروید و انتشار در وب را انتخاب کنید.
روی شروع انتشار کلیک کنید
در بخش دریافت پیوند به داده‌های منتشرشده، از آخرین چارگوش نوشتاری، بخش کلید نشانی وب ارائه‌شده را کپی کنید. به این شکل است: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
کلید را در نشانی وب زیر در جایی که نوشته شده your-key-goes-here جای‌گذاری کنید: https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=. نمونه‌ای که از کلید بالا استفاده می‌کند ممکن است شبیه https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script باشد.
می‌توانید نشانی وب را در مرورگرتان جای‌گذاری کنید و به آن پیمایش کنید تا نسخه JSON محتوای وبلاگتان را مشاهده کنید. نشانی وب را یادداشت کنید، سپس کمی وقت بگذارید و قالب این داده‌ها را مرور کنید، زیرا باید آن را تکرار کنید تا بعداً در صفحه نمایش داده شود.
خروجی JSON در مرورگرتان ممکن است کمی ترسناک به‌نظر برسد، اما نگران نباشید!. ما واقعاً فقط به داده‌های پست‌های شما علاقه‌مندیم.
Google Spreadsheets API هریک از فیلدهای موجود در صفحه‌گسترده وبلاگتان را با پیشوند ویژه post.gsx$ برونداد می‌کند. برای مثال: post.gsx$title.$t، post.gsx$author.$t، post.gsx$content.$t، و غیره. وقتی هر «ردیف» را در خروجی JSON تکرار می‌کنیم، به این فیلدها ارجاع می‌دهیم تا مقادیر مربوطه را برای هر پست دریافت کنیم.
اکنون می‌توانید عنصر پست جدیداً داربست‌بندی‌شده را ویرایش کنید تا بخش‌هایی از نشانه‌گذاری را به داده‌های صفحه‌گسترده‌تان متصل کنید. برای انجام این کار، مشخصه post را معرفی می‌کنیم که عنوان پست، نویسنده، محتوا، و فیلدهای دیگری را که قبلاً ایجاد کرده‌ایم می‌خواند. از مشخصه selected (که بعداً آن را پر خواهیم کرد) فقط برای نشان دادن پست درصورتی استفاده می‌شود که کاربر به نامک صحیح آن پیمایش کند.
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2>
<a href="#[[post.gsx$slug.$t]]">
[[post.gsx$title.$t ]]
</a>
</h2>
<p>By [[post.gsx$author.$t]]</p>
<p>[[post.gsx$content.$t]]</p>
<p>Published on: [[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
سپس، با اجرای yo polymer:element blog، عنصر وبلاگی ایجاد می‌کنیم که هم شامل مجموعه‌ای از پست‌ها و هم چیدمان وبلاگ شما باشد.
$ yo polymer:element blog
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? Yes
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html
create app/elements/blog.html
این بار وبلاگ را بااستفاده از وارد کردن HTML به index.html وارد می‌کنیم چون می‌خواهیم در صفحه نشان داده شود. به‌طور خاص برای پیام‌واره سوم، post.html را به‌عنوان عنصری که می‌خواهیم اضافه کنیم مشخص می‌کنیم.
مثل قبل، فایل عنصر جدیدی ایجاد می‌شود (blog.html) و به elements/ اضافه می‌شود، این بار post.html وارد می‌شود و <post-element> در برچسب الگو گنجانده می‌شود:
<link rel="import" href="post.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
<post-element></post-element>
</template>
<script>
Polymer('blog-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
ازآنجایی‌که درخواست کردیم عنصر وبلاگ بااستفاده از واردات HTML (روشی برای گنجاندن و استفاده مجدد از اسناد HTML در سایر اسناد HTML) به نمایه ما وارد شود، می‌توانیم تأیید کنیم که به‌درستی به سند <head> اضافه شده است:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- Place your HTML imports here -->
<link rel="import" href="elements/blog.html">
</head>
<body>
<div class="container">
<div class="hero-unit" style="width:90%">
<blog-element></blog-element>
</div>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
// Perform some behaviour
});
</script>
<!-- build:js scripts/vendor.js -->
<script src="bower_components/polymer/polymer.min.js"></script>
<!-- endbuild -->
</body>
</html>
فوق‌العاده بود.
افزودن وابستگی‌ها بااستفاده از Bower
سپس، بیایید عنصر خود را ویرایش کنیم تا از عنصر کمکی Polymer JSONP برای خواندن posts.json استفاده کنیم. می‌توانید آداپتور را با کلون کردن مخزن git یا نصب polymer-elements ازطریق Bower با اجرای bower install polymer-elements دریافت کنید.
وقتی ابزار کمکی را دریافت کردید، باید آن را به‌عنوان واردات در عنصر blog.html خود با این کد اضافه کنید:
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
سپس، برچسب آن را اضافه کنید و url را به صفحه‌گسترده پست‌های وبلاگ ما از قبل ارائه دهید، و &callback= را به انتها اضافه کنید:
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
با این کار، اکنون می‌توانیم الگوهایی را برای تکرار روی صفحه‌گسترده‌مان پس‌از خوانده شدن اضافه کنیم. اولی فهرست مطالب را با عنوان پیوندشده برای پستی که به نامک آن اشاره می‌کند برونداد می‌کند.
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
دومی یک نمونه از post-element را برای هر ورودی یافت‌شده ارائه می‌دهد و محتوای پست را به‌طور مناسب به آن منتقل می‌کند. توجه داشته باشید که ما درحال عبور از یک مشخصه post هستیم که نشان‌دهنده محتوای پست برای یک ردیف صفحه‌گسترده است و یک مشخصه selected که با یک مسیر پر خواهیم کرد.
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
مشخصه repeat که می‌بینید در الگوی ما استفاده می‌شود، درصورت ارائه، نمونه‌ای با [[ bindings ]] برای هر عنصر در مجموعه آرایه پست‌های ما ایجاد و حفظ می‌کند.
اکنون برای اینکه بتوانیم [[مسیر]] فعلی را پر کنیم، می‌خواهیم تقلب کنیم و از کتابخانه‌ای به‌نام Flatiron director استفاده کنیم که هروقت درهم‌سازی نشانی وب تغییر می‌کند، به [[مسیر]] متصل می‌شود.
خوشبختانه یک عنصر Polymer (بخشی از بسته more-elements) وجود دارد که می‌توانیم برای این کار از آن استفاده کنیم. پس‌از کپی شدن در دایرکتوری /elements، می‌توانیم با <flatiron-director route="[[route]]" autoHash></flatiron-director> به آن ارجاع دهیم، route را به‌عنوان ویژگی‌ای که می‌خواهیم به آن متصل شویم مشخص کنیم، و به آن بگوییم که مقدار هرگونه تغییر در درهم‌سازی را به‌طور خودکار بخواند (autoHash).
با کنار هم قرار دادن همه این‌ها، اکنون به این نتیجه می‌رسیم:
<link rel="import" href="post.html">
<link rel="import" href="polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="flatiron-director/flatiron-director.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="row">
<h1><a href="/#">My Polymer Blog</a></h1>
<flatiron-director route="[[route]]" autoHash></flatiron-director>
<h2>Posts</h2>
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
</div>
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
</template>
<script>
Polymer('blog-element', {
created: function() {},
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
هورا! اکنون وبلاگ ساده‌ای داریم که داده‌ها را از JSON می‌خواند و از دو عنصر Polymer که با Yeoman داربست‌بندی شده‌اند استفاده می‌کند.
کار کردن با عناصر طرف سوم
بوم‌سازگان عنصر در اطراف «عناصر وب» اخیراً با سایت‌های گالری عنصر مانند customelements.io که درحال ظهور هستند، درحال رشد بوده است. با نگاه کردن به عناصر ایجادشده توسط انجمن، یکی را برای واکشی نمایه‌های gravatar پیدا کردم و درواقع می‌توانیم آن را بگیریم و به سایت وبلاگمان هم اضافه کنیم.
منابع عنصر gravatar را در دایرکتوری /elements کپی کنید، آن را ازطریق وارد کردن HTML در post.html اضافه کنید، و سپس
<link rel="import" href="gravatar-element/src/gravatar.html">
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>
<p>By [[post.gsx$author.$t]]</p>
<gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>
<p>[[post.gsx$content.$t]]</p>
<p>[[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
بیایید ببینیم این به ما چه می‌دهد:
زیبا!
در مدت زمان نسبتاً کوتاهی، یک برنامه ساده متشکل از چندین مؤلفه وب ایجاد کرده‌ایم بدون اینکه نگران نوشتن کد متن استاندارد، بارگیری دستی وابستگی‌ها، یا راه‌اندازی سرور محلی یا گردش کار ساخت باشیم.
درحال بهینه‌سازی برنامه شما
گردش کار Yeoman شامل پروژه متن‌باز دیگری به‌نام Grunt است - یک اجراکننده تکلیف که می‌تواند تعدادی تکلیف خاص ساخت (تعریف‌شده در Gruntfile) را برای تولید نسخه بهینه‌شده برنامه شما اجرا کند. اجرای grunt به‌تنهایی یک تکلیف default را اجرا می‌کند که مولد برای بررسی کد، آزمایش، و ساختن راه‌اندازی کرده است:
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
تکلیف jshint بالا فایل .jshintrc شما را بررسی می‌کند تا اولویت‌هایتان را یاد بگیرد، سپس آن را در همه فایل‌های جاوا اسکریپت در پروژه‌تان اجرا می‌کند. برای دریافت خلاصه کامل گزینه‌هایتان با JSHint، اسناد را بررسی کنید.
تکلیف test کمی شبیه به این است و می‌تواند برنامه شما را برای چارچوب آزمایشی که به‌طور پیش‌فرض توصیه می‌کنیم (Mocha) ایجاد و ارائه کند. همچنین آزمایش‌هایتان را برای شما اجرا می‌کند:
grunt.registerTask('test', [
'clean:server',
'createDefaultTemplate',
'jst',
'compass',
'connect:test',
'mocha'
]);
ازآنجایی‌که برنامه ما در این مورد نسبتاً ساده است، نوشتن آزمون‌ها را به‌عنوان تمرینی جداگانه به شما واگذار می‌کنیم. چند مورد دیگر وجود دارد که باید فرایند ساخت ما آن‌ها را مدیریت کند، بنابراین بیایید نگاهی به آنچه تکلیف grunt build تعریف‌شده در Gruntfile.js ما انجام خواهد داد بیندازیم:
grunt.registerTask('build', [
'clean:dist', // Clears out your .tmp/ and dist/ folders
'compass:dist', // Compiles your Sassiness
'useminPrepare', // Looks for <!-- special blocks --> in your HTML
'imagemin', // Optimizes your images!
'htmlmin', // Minifies your HTML files
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and app/ into dist/
'usemin' // Updates the references in your HTML with the new files
]);
grunt build را اجرا کنید و نسخه آماده تولید برنامه‌تان باید ساخته شود و آماده ارسال باشد. بیایید آن را امتحان کنیم.
موفقیت‌آمیز بود.
اگر گیر کردید، نسخه ازپیش ساخته‌شده polymer-blog برای بررسی در https://github.com/addyosmani/polymer-blog دردسترس است.
چه چیزهای دیگری در راه است؟
«مؤلفه‌های وب» هنوز درحال تکامل هستند و ابزارهای مربوط به آن‌ها نیز همین‌طور.
درحال‌حاضر درحال بررسی این موضوع هستیم که چگونه می‌توان واردات HTML را برای بهبود عملکرد بارگیری ازطریق پروژه‌هایی مانند Vulcanize (ابزاری از پروژه Polymer) به هم متصل کرد و چگونه بوم‌سازگان مؤلفه‌ها ممکن است با مدیر بسته‌ای مانند Bower کار کند.
هرگاه پاسخ‌های بهتری برای این پرسش‌ها داشته باشیم به شما اطلاع می‌دهیم، اما زمان‌های هیجان‌انگیز زیادی در پیش است.
نصب Polymer مستقل با Bower
اگر ترجیح می‌دهید Polymer را با حجم کمتری شروع کنید، می‌توانید آن را به‌صورت مستقل و مستقیماً از Bower با اجرای دستور زیر نصب کنید:
bower install polymer
که آن را به دایرکتوری bower_components شما اضافه می‌کند. سپس می‌توانید به‌طور دستی در نمایه برنامه‌تان به آن ارجاع دهید و آینده را بسازید.
نظر شما چیست؟
اکنون می‌دانید که چگونه بااستفاده از «مؤلفه‌های وب» با Yeoman، یک برنامه Polymer را داربست‌بندی کنید. اگر بازخوردی درباره تولیدکننده دارید، لطفاً در نظرات به ما اطلاع دهید یا اشکالی را ثبت کنید یا در ردیاب مشکل Yeoman پست کنید. دوست داریم بدانیم آیا چیز دیگری هست که بخواهید تولیدکننده بهتر انجام دهد، چون فقط ازطریق استفاده و بازخورد شما می‌توانیم بهبود پیدا کنیم :)