اجزای وب هر چیزی را که فکر می کنید در مورد ساختن برای وب می دانید تغییر می دهد. برای اولین بار، وب دارای API های سطح پایینی خواهد بود که به ما امکان می دهد نه تنها تگ های HTML خود را ایجاد کنیم، بلکه منطق و CSS را نیز محصور کنیم. دیگر خبری از سوپ شیت جهانی یا کد دیگ بخار نیست! این یک دنیای جدید شجاع است که در آن همه چیز یک عنصر است.
در صحبت‌هایم از DotJS ، آنچه را که Web Components ارائه می‌دهد و نحوه ساخت آنها با استفاده از ابزار مدرن را بررسی می‌کنم. من به شما Yeoman را نشان خواهم داد، یک گردش کاری از ابزارها برای ساده سازی ایجاد برنامه های وب با استفاده از Polymer ، کتابخانه ای از polyfills و شکر برای توسعه برنامه ها با استفاده از Web Components در مرورگرهای مدرن امروزی.
عناصر سفارشی ایجاد کنید و عناصر ایجاد شده توسط دیگران را نصب کنید
در این سخنرانی خواهید آموخت:
- درباره چهار مشخصات مختلف که اجزای وب را تشکیل می دهند: عناصر سفارشی ، الگوها ، Shadow DOM و واردات HTML .
- چگونه عناصر سفارشی خود را تعریف کنید و عناصر ایجاد شده توسط دیگران را با استفاده از Bower نصب کنید
- زمان کمتری را برای نوشتن جاوا اسکریپت و زمان بیشتری را برای ساخت صفحات اختصاص دهید
- از ابزار مدرن جلویی ( Yeoman ) برای ساخت داربست برنامه با استفاده از پلیمر با ژنراتور-پلیمر استفاده کنید.
- چگونه پلیمر فوق العاده تغییر می کند و اجزای وب را ایجاد می کند.
به عنوان مثال، برای نصب Polymer's Web Component polyfills و خود کتابخانه، می توانید این یک خط را اجرا کنید:
bower install --save Polymer/platform Polymer/polymer
این یک پوشه bower_components اضافه می کند و بسته های بالا را اضافه می کند. --save آنها را به فایل bower.json برنامه شما اضافه می کند.
بعداً، اگر می خواستید عنصر آکاردئون پلیمر را نصب کنید، می توانید اجرا کنید:
bower install --save Polymer/polymer-ui-accordion
و سپس آن را در برنامه خود وارد کنید:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
برای صرفه جویی در زمان، ساخت داربست یک برنامه جدید پلیمر با تمام وابستگی های مورد نیاز، کد دیگ بخار و ابزار برای بهینه سازی برنامه خود را می توان با Yeoman با این لاینر دیگر انجام داد:
yo polymer
پیشرفت پاداش
من همچنین یک توضیح 30 دقیقه ای جایزه از برنامه Polymer Jukebox را که در گفتگو نشان می دهم ضبط کردم.
پوشش داده شده در ویدیوی جایزه:
- مانترا «همه چیز یک عنصر است» به چه معناست
- نحوه استفاده از Bower برای نصب پلی‌فیل‌ها و عناصر پلتفرم پلیمر
- داربست برنامه Jukebox ما با ژنراتور Yeoman و فرعی
- درک ویژگی‌های پلتفرم که از طریق دیگ بخار بیرون می‌آیند
- چگونه به طور عملکردی روی یک برنامه Angular به پلیمر منتقل کردم.
ما همچنین از مولدهای فرعی Yeoman برای داربست بندی عناصر پلیمری جدید خود استفاده می کنیم. به عنوان مثال برای ایجاد صفحه دیگ برای یک عنصر foo اجرا می کنیم:
yo polymer:element foo
که از ما می خواهد بدانیم که آیا مایلیم عنصر به طور خودکار وارد شود، آیا سازنده مورد نیاز است و چند اولویت دیگر.
آخرین منابع برای برنامه نشان داده شده در هر دو گفتگو اکنون در GitHub موجود است. من آن را کمی بیشتر تغییر داده ام تا منظم تر و خواندن آن کمی آسان تر باشد.
پیش نمایش برنامه:
بیشتر خواندن
به طور خلاصه، Polymer یک کتابخانه جاوا اسکریپت است که کامپوننت های وب را اکنون در مرورگرهای وب مدرن فعال می کند، در حالی که منتظر هستیم تا آنها به صورت بومی پیاده سازی شوند. ابزار مدرن می تواند به بهبود گردش کار شما با استفاده از آنها کمک کند و ممکن است هنگام توسعه برچسب های خود از امتحان Yeoman و Bower لذت ببرید.
چند مقاله دیگر که ارزش بررسی در این زمینه را دارد: