در طول سال گذشته، تیم Polymer زمان زیادی را صرف آموزش توسعه دهندگان کرده است که چگونه عناصر خود را ایجاد کنند. این منجر به یک اکوسیستم به سرعت در حال رشد شده است که تا حد زیادی توسط عناصر هسته و کاغذ پلیمر و عناصر آجری ایجاد شده توسط تیم موزیلا تقویت شده است.
همانطور که توسعه دهندگان با ایجاد عناصر خود بیشتر آشنا می شوند و شروع به فکر کردن در مورد ساخت برنامه های کاربردی می کنند، تعدادی از سوالات را باز می کند:
- چگونه باید UI برنامه خود را ساختار دهید؟
- چگونه از حالت های مختلف عبور می کنید؟
- چند استراتژی برای بهبود عملکرد چیست؟
- و چگونه باید یک تجربه آفلاین ارائه دهید؟
برای Chrome Dev Summit، سعی کردم با ساختن یک اپلیکیشن مخاطبین کوچک و تجزیه و تحلیل فرآیندی که برای ساخت آن طی کردم، به این سوالات پاسخ دهم. این چیزی است که من به آن رسیدم:
ساختار
شکستن یک برنامه به قطعات ماژولار که می توانند ترکیب شوند و دوباره مورد استفاده قرار گیرند، مستاجر اصلی Web Components است. عناصر هسته-* و کاغذ-* پلیمر شروع را با قطعات کوچک، مانند نوار ابزار کاغذ و دکمه نماد کاغذ، آسان می کند.
و از طریق قدرت ترکیب، آنها را با هر تعداد عنصر ترکیب کنید تا یک داربست کاربردی ایجاد کنید.
هنگامی که یک داربست عمومی در جای خود دارید، می توانید سبک های CSS خود را برای تبدیل آن به تجربه ای منحصر به فرد برای برند خود اعمال کنید. زیبایی انجام این کار با کامپوننت‌ها این است که شما را قادر می‌سازد تا تجربیات بسیار متفاوتی ایجاد کنید و در عین حال از همان برنامه‌های اولیه ساخت اپلیکیشن استفاده کنید. با یک داربست در جای خود می توانید به فکر کردن در مورد محتوا بروید.
یکی از عناصری که مخصوصاً برای برخورد با تعداد زیادی محتوا مناسب است، core-list است.
core-list می توان به یک منبع داده (در اصل آرایه ای از اشیا) متصل کرد و برای هر آیتم در آرایه، یک نمونه الگو را حذف می کند. در قالب می توانید از قدرت سیستم اتصال داده های پلیمر برای سیم کشی سریع محتوای خود استفاده کنید.
انتقال ها
با طراحی و پیاده‌سازی بخش‌های مختلف برنامه‌تان، کار بعدی این است که بفهمید چگونه می‌توانید بین آنها حرکت کنید.
اگرچه هنوز یک عنصر آزمایشی است، core-animated-pages یک سیستم انیمیشن قابل اتصال را ارائه می دهد که می تواند برای انتقال بین حالت های مختلف در برنامه شما استفاده شود.
اما انیمیشن تنها نیمی از معما است، یک برنامه باید آن انیمیشن ها را با یک روتر ترکیب کند تا URL های خود را به درستی مدیریت کند.
در دنیای وب کامپوننت‌ها، مسیریابی به دو صورت است: امری و اعلامی. ترکیب core-animated-pages با هر رویکرد بسته به نیاز پروژه شما می تواند معتبر باشد.
یک روتر ضروری (مانند Flatiron's Director ) می‌تواند به مسیر منطبق گوش دهد و سپس core-animated-pages دستور دهد تا آیتم انتخابی خود را به‌روزرسانی کنند.
این می تواند مفید باشد اگر شما نیاز به انجام برخی کارها پس از مسابقات مسیر و قبل از انتقال بخش بعدی دارید.
از سوی دیگر، یک روتر اعلامی (مانند برنامه-روتر ) در واقع می تواند مسیریابی و core-animated-pages در یک عنصر واحد ترکیب کند، بنابراین مدیریت این دو کارآمدتر می شود.
اگر می‌خواهید کنترل دقیق‌تری داشته باشید، می‌توانید به کتابخانه‌ای مانند مسیریابی بیشتر نگاه کنید، که می‌تواند با core-animated-pages با استفاده از اتصال داده ترکیب شود و احتمالاً بهترین‌های هر دو دنیا را به شما ارائه دهد.
کارایی
همانطور که برنامه شما در حال شکل گیری است، باید مراقب گلوگاه های عملکرد، به ویژه هر چیزی که با شبکه مرتبط است باشید، زیرا این اغلب کندترین بخش یک برنامه وب تلفن همراه است.
یک برد آسان عملکرد از بارگیری مشروط پلی‌فیل‌های Web Components حاصل می‌شود.
اگر پلتفرم از قبل پشتیبانی کامل داشته باشد، دلیلی برای متحمل شدن این همه هزینه وجود ندارد! در هر نسخه از مخزن جدید webcomponents.js ، پلی‌فیل‌ها نیز به فایل‌های مستقل تقسیم می‌شوند. اگر می خواهید زیرمجموعه ای از polyfills را به صورت مشروط بارگذاری کنید، این مفید است.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
همچنین مزایای شبکه قابل توجهی از اجرای تمام واردات HTML شما از طریق ابزاری مانند Vulcanize وجود دارد.
Vulcanize واردات شما را به یک بسته متصل می کند و تعداد درخواست های HTTP را که برنامه شما می کند به میزان قابل توجهی کاهش می دهد.
آفلاین
اما تنها ساختن یک برنامه کاربردی معضل کاربری با اتصال کم یا بدون اتصال را حل نمی کند. به عبارت دیگر، اگر برنامه شما به صورت آفلاین کار نمی کند، در واقع یک برنامه موبایل نیست. امروزه می‌توانید از حافظه پنهان برنامه‌های بدخیم برای آفلاین کردن منابع خود استفاده کنید، اما با نگاهی به آینده، Service Worker باید به زودی تجربه توسعه آفلاین را بسیار زیباتر کند.
جیک آرچیبالد اخیراً یک کتاب آشپزی شگفت‌انگیز از الگوهای کارکنان خدماتی منتشر کرده است، اما من به شما شروع سریعی می‌دهم تا شما را شروع کنید:
نصب یک سرویسکار آسان است. یک فایل worker.js ایجاد کنید و زمانی که برنامه شما بوت شد آن را ثبت کنید.
مهم است که worker.js خود را در ریشه برنامه خود قرار دهید، این به آن اجازه می دهد تا درخواست ها را از هر مسیری در برنامه شما رهگیری کند.
در کنترل‌کننده نصب کارگر، حجمی از منابع (از جمله داده‌هایی که برنامه را نیرو می‌دهد) را در حافظه پنهان ذخیره می‌کنم.
این به برنامه من اجازه می دهد تا در صورت دسترسی آفلاین به آن، حداقل یک تجربه بازگشتی به کاربر ارائه دهد.
رو به جلو!
اجزای وب افزودنی بزرگ به پلتفرم وب هستند و هنوز در مراحل ابتدایی خود هستند. همانطور که آنها در مرورگرهای بیشتری فرود می آیند، این به ما، جامعه توسعه دهندگان، بستگی دارد که بهترین روش ها را برای ساختاربندی برنامه هایمان کشف کنیم. راه حل های بالا به ما یک نقطه شروع می دهند، اما هنوز چیزهای بیشتری برای یادگیری وجود دارد. به سمت ساختن برنامه های بهتر!