سلام، امیدوارم خوب باشید. من نیما عمرانی هستم و امروز می‌خواهم به مناسبت شروع حساب گیت‌هاب استودیو گروسیان، سه پروژه‌ی خام یا استارتری (starter) را که اولین‌ ریپوهای ما در گیت‌هاب هستند به شما معرفی کنم. 

پروژه‌ی استارتر یا استارتر کیت (Starter Kit) از تعدادی فولدر و فایل تشکیل شده که چارچوب یک پروژه را مشخص می‌کند. با کمی بالا و پایین کردنِ فایل‌ها و مطالعه‌ی مستندات می‌توانید شروع به کد زدن کنید و نگران ابزارها و کانفیگ‌های عجیب و غریب نباشید. برای مثال کیت‌های مختلفی برای فریم‌ورک react وجود دارد که شما با توجه به نوع استفاده و ابزار مورد علاقه می‌توانید یکی را clone کرده و شروع به کار کنید.

کیت‌های استودیوی ما در طول زمان تکامل پیدا کردند و در نهایت بعد از کنار گذاشتنِ وسواس‌های ناکارآمد تصمیم گرفتیم آن‌ها را در گیت‌هاب منتشر کنیم تا دوستان دیگر هم ببینند، نظر دهند، استفاده کنند و در نهایت مسیر تکامل هموارتر شود. 

هسته‌ی اصلی سه کیت، ساختار sass در آن‌ها است. نوع نگاه ما به کامپوننت‌های UI براساس آموخته‌هایمان در OOCSS و SMACSS بوده و از BEM به عنوان روشی برای نام‌گذاری کلاس‌ها در جهت ماژولار دیدنِ  بخش‌های مختلف یک طرح استفاده می‌کنیم.

بسیار خب برویم سراغ معرفی کیت‌ها. با قدیمی‌ترین‌شان شروع می‌کنم.

1. starter-gulp-browserify-sass-php

در این کیت از ابزار gulp برای build system استفاده می‌کنیم. تسک‌های اصلی مربوط به js، sass و sprite.svg هستند. چند تسک کوچک دیگر هم برای favicon، browser-sync و  build پروژه برای deploy کردن داریم. دستورهای اصلی با npm اجرا می‌شوند و در package.json ست شده‌اند.

همانطور که می‌دانید برای جداسازیِ فایل‌های جاوااسکریپت و همینطور استفاده مجدد از آن‌ها می‌توانیم از module managerی که در node.js وجود دارد استفاده کنیم. اما حالا که در فضای بروزر هستیم چه کنیم؟ browserify ابزاری‌ست که قابلیت module manager node.js را که همان require/export کردن فایل‌هاست در بروزر برایمان فراهم می‌کند. 

با sass که حتما آشنا هستید و نیاز به توضیح بیشتر ندارد. 

استفاده ما از php در این کیت و یک کیت دیگر صرفا کاربرد template engine آن است. ما markup قسمت‌های مختلف یک صفحه در طرح را در یک ساختار منظم و در فایل‌های جداگانه قرار می‌دهیم. ضمن اینکه تیم‌های فنیِ بیشتر مشتریان ما با این زبان کار می‌کنند. علاوه بر آن ممکن است پروژه در آینده به CMS (برای مثال وردپرس) متصل شود. 

2. starter-webpack-es6-sass-php

در این کیت با gulp خداحافظی و به webpack سلام کردیم! 

Webpack فراتر از gulp تنها ابزاری برای مثلا چسباندن فایل‌های js نیست. در یک پروژه‌ی فرانت‌اند با حضور webpack مدیریت کلیه‌ی فایل‌ها بر عهده‌ی این ابزار قرار می‌گیرد به طوری که  webpackیک گراف وابستگی (dependency graph) ایجاد کرده تا هر ماژولی که در پروژه استفاده کردید را در نهایت وارد bundle نهایی مربوط به آن کند. 

در این کیت می‌توانید از قابلیت‌های es2015 یا همان es6 استفاده کنید. خروجی نهایی با استفاده از babel به es5 کامپایل می‌شود درنتیجه نگرانی از بابت پشتیبانی در مرورگرهای مختلف نخواهید داشت. 

3. starter-webpack-react-es6-sass

استارتر کیت‌های زیادی برای react وجود دارد. کافی‌ست عبارتی مانند react starter kit را گوگل کنید تا در میان ریپوهای بزرگ و کوچک گم شوید. آنچه باعث شد به فکر ساختن ریپویی مستقل بیافتیم تلاش برای نزدیکی به ساختارِ تکامل یافته‌ی پروژه‌هایمان در استودیو، نوع نگاه و نیازهای فنی خودمان بود. 

در این کیت از react به عنوان کتابخانه‌ای برای تولید کامپوننت‌های UI و همینطور redux برای مدیریت state در کل پروژه استفاده کردیم. 

خب کیت‌ها را به اختصار معرفی کردم. امیدوارم برای شما هم مفید باشند.  

نکته‌ی نهایی اینکه دغدغه‌ی اصلی ما از عمومی کردن این کیت‌ها فرار از لاکِ داخلی‌‌ست که بعد از مدتی هر تیم فنی گرفتار آن خواهد شد. کاملا طبیعی‌ست که بعد از گذشت مدت زمان طولانی هر تیمی به روشِ مرسوم خود فارغ از بهینه بودن یا نبودن عادت می‌کند. تنها چیزی که می‌تواند روش انجام کاری را بهبود بخشد آشنایی با روش‌های دیگر انجام آن کار و در واقع تغییر نوع نگاه است. 

پیشنهاد می‌کنم شما هم ساختار پروژه‌های مجموعه‌ی خودتان را در گیت‌هاب قرار دهید تا با ایده‌ی فضای آزاد، نکات مثبت و منفیِ راه و روش‌های مرسوم‌تان مشخص شود. 

@garousian_ir 

https://goo.gl/P322kf