Gatsby js چیست؟
Gatsby را می‌توان به عنوان یک پلت فرم مبتنی بر کامپوننت React و زبان پرس و جوی گراف کیوال (Graph-QL) در نظر گرفت که برای تولید سایت های ایستا کاربرد دارد. ولی این اصطلاحات به چه معنا است؟ در اصل در این پلت فرم، از برترین بخش‌های کامپوننت های React، وب پک (WebPack)، React-Router و گراف کیوال و سایر ابزار ها استفاده شده تا یک تجربه‌ی بسیار لذت بخش توسعه‌ی وب سایت ها را در اختیار شما قرار دهد. البته نباید از این پلت فرم تنها به عنوان یک ابزار تولید کننده‌ی وب سایت ایستا یاد کرد. این پلت فرم را می‌توان به عنوان یک چارچوب مدرن‌تری نسبت به یک پلت فرم سازنده‌ی وب سایت ایستا در نظر گرفت.
در این پلت فرم از یک سری پیکربندی پیش‌فرض قدرتمند برای ایجاد یک وب سایت استفاده می‌شود، به گونه‌ای که تنها از فایل های ایستا برای بار گذاری بسیار سریع تر صفحات، سرویس ورکر، تفکیک کد، رندرینگ در سمت سرور، بار گذاری هوشمندانه‌ی تصاویر، بهینه‌سازی دارائی ها و پیش واکشی داده‌ها استفاده می‌شود. همه‌ی این ها تنها توسط این پلت فرم صورت می‌گیرد. البته بنده این قابلیت ها را باور نداشتم تا اینکه خودم به شخصه آن‌ها را امتحان کردم.
شما اقدام به کد نویسی و توسعه‌ی وب سایت تان می‌کنید و Gatsby نیز آن را به یک دایرکتوری تبدیل می‌کند که تنها شامل یک فایل HTML و یک سری آیتم ایستا می‌باشد. این فولدر بر روی سرویس دهنده‌ی هاست شما آپلود می‌شود.
وب سایت شما تا بخشی توسط نرم افزار جکیل (Jekyll) و تا بخشی توسط کامپوننت React ساخته می‌شود.
چه چیزی باعث خاص شدن پلت فرم Gatsby گردیده است
شاید با خودتان فکر کنید که ” من یک پیکربندی پیش فرض مطلوب از وب سایت ها در اختیار دارم” و یا ” اپلیکیشن های مبتنی بر React مختص به خودم را طراحی و توسعه می‌دهم ” و یا اینکه فکر کنید که ” نرم افزار جکیل برای تولید یک سایت ایستا برای من کافی است”. به نظر من باید گفت که سه چیز وجود دارد که باعث متمایز شدن Gastby نسبت به سایر ابزار ها گردیده است.
اول اینکه Gastby از گراف کیوال برای ساخت لایه‌ی داده‌ای مختص به خودش استفاده می‌کند. منظور چیست؟ Gastby با هدف جمع‌آوری داده‌ها از هر مکان ممکن طراحی شده است: فایل هایی با فرمت Markdown، JSON، CMS، توابع API ثالث و هر جای دیگر! و در زمان ساخت نیز یک سرور گراف کیوال داخلی از همه‌ی این داده‌ها ایجاد می‌کند. بنابراین در کامپوننت های React، همه‌ی داده‌ها در زمان ساخت تنها از همان محل مورد پرس و جو قرار می‌گیرند که البته این کار توسط زبان پرس و جوی گراف کیوال صورت می‌گیرد.
دومین دلیل مبنی بر خاص بودن این پلت فرم، اکوسیستم غنی Gatsby می‌باشد. البته مدت زیادی نیست که Gatsby به دنیای توسعه‌ی وب سایت معرفی شده است ولی در حال حاضر مستندات بسیاری برای آن عرضه شده است و کسب و کارهای نوپای بسیاری برای راه اندازی سریع یک وب سایت برای خودشان از آن استفاده نموده‌اند. کلکسیون داده‌ای گراف کیوال که قبلاً مطرح نمودم ممکن است در نگاه اول عجیب و درک آن سخت به نظر برسد ولی با توجه به افزونه‌های مستند داده‌ای در Gatsby، می‌توان به سادگی نوشتن چند خط کد در یک فایل پیکربندی از آن استفاده نمود.
در نهایت در این پلت فرم توجه زیادی به کارائی گردیده است. هر جنبه از کارائی و دسترسی پذیری در این پلت فرم مورد تأکید قرار گرفته است به گونه‌ای که واقعاً می‌توانید محصول نهاییِ حاصل از این پلت فرم را به صورت واقعی حس کنید. این پلت فرم بیش از قابلیت‌هایی که به عنوان یک سازنده‌ی وب سایت ایستا عنوان کردم، بسیار مورد قبل و توجه همگان در عرصه‌ی برنامه نویسی وب قرار گرفته است.
آیا باید از کامپوننت و گراف کیوال اطلاع داشته باشم؟
یکی از بزرگ‌ترین چالش‌هایی که پیش روی افرادی که با Gatsby کار می‌کنند قرار گرفته است این است که آن‌ها میگویند ” خب! من هیچ اطلاعی از گراف کیوال ندارم و یا هیچ چیزی درباره‌ی React نمی‌دانم و یا اینکه زمان و انرژی کافی برای یادگیری آن‌ها ندارم؛ پس بهتر است از Gatsby شروع کنم”. اگر بخواهیم منصفانه باشیم و بخواهم در جایگاه یک فردی که با React آشنایی دارد و البته با گراف کیوال نیز آشنایی دارد صحبت کنیم ، باید بگویم که زمان بسیار زیادی برای یادگیری Gatsby پس از اولین باری که اسم آن را شنیده‌اید نیاز است. ولی با اطمینان میگویم که در صورتی که با یکی از پلت فرم های React یا گراف کیوال آشنایی داشته باشید، Gatsby می‌تواند برای شما یک نقطه‌ی آغازین ایده آل باشد. مستندات و مثال‌های بسیاری از کاربرد React و گراف کیوال در Gastby وجود دارد چرا که Gatsby ساختار خود را مدیون پلت فرم React و گراف کیوال می‌داند.
با توجه به مباحثی که مطرح شد آیا می‌توان از Gatsby و آن هم بدون در نظر گرفتن زبان پرس و جوی گراف کیوال و کامپوننت React استفاده نمود؟ من این کار را انجام داده‌ایم. همان‌طور که عنوان کردم، من با React آشنایی دارم ولی اطلاعی از گراف کیوال ندارم و اگرچه من از گراف کیوال استفاده نمی‌کنم ولی از توابع API در کامپوننت هایم استفاده می‌کنم. البته این کار را به شما پیشنهاد نمی‌کنم. چرا که باید این کار کل هدف Gatsby که در بالا نیز مطرح شد عملی نخواهد شد و شما را به صورت کامل ناامید خواهد کرد. پرسش دیگری که مطرح است این است که آیا می‌توان از React و آن هم بدون JSX استفاده نمود یا خیر.
به طور کلی باید گفت که React و گراف کیوال دو مؤلفه‌ی ضروری برای Gastby هستند ولی در صورتی که هیچ اطلاعی از آن‌ها نداشته باشید، می‌توان از Gatsby به عنوان یک ابزار ایده آل برای یادگیری این دو پلت فرم استفاده نمود و نباید جای بهانه‌ای برای عدم یادگیری آن‌ها باقی مانده باشد.
از کجا شروع کنم؟
برای شروع کار همان‌طور که قبلاً گفتم، مستندات و آموزش‌های بسیاری برای Gastby ارائه شده است؛ بهتر است وارد وب سایت Gatsbyjs.org شوید و مراحل زیر را دنبال کنید:
- بر روی docs کلید کنید و دستورالعمل ها را دنبال کنید.
- فایل CLI مربوط به Gatsby را نصب کنید
- فرمان ‘new’ در Gatsby را اجرا کرده و نام سایت تان را وارد کنید. سپس cd را در دایرکتوری جدیدی که باز می‌شود وارد کنید.
- Gatsby develop را اجرا کرده و بر روی لینک Localhost در کنسول کلیک کنید.
خب حال سایت Gatsby شما آماده و در حال اجرا می‌باشد. برای کامپایل این سایت باید گزینه‌ی ‘Develop’ را متوقف کرده و ‘gatsby build’ را اجرا کرد. حال شما یک فولدر با نام ‘build’ را مشاهده خواهید کرد که بر روی سرویس دهنده‌ی هاست شما آپلود شده است.
در Gatsby ایده ای با نام استارتر ‘starters’ نیز وجود دارد. این ایده مشابه با قالب ها و کامپوننت Boilerplate می‌باشد. در صورتی که از محل منابع داده‌ای شما مشخص می‌باشد و یا وب سایت شما عملکردی قابل پیش‌بینی دارد (مانند یک وبلاگ)، به احتمال یک استارتر وجود داشته که دارای یک سری منبع داده‌ای از قبل پیکربندی شده بوده و یک ساختار کامپوننت و الگو نیز وجود خواهد داشت که می‌توان آن را راه اندازی و پیکربندی کرد. این باعث شده تا بتوان سایت را به صورت سریع‌تر و آسان تر اجرا کرد. در صورتی که هیچ استارتری مطابق با خواسته‌های شما وجود نداشته باشد می‌توانید از استارتر پیش‌فرض در Gatsby استفاده کنید و پلاگین دیتا سورس خودتان را پیدا کرده و آن را نصب کنید. به نظر من بهتر است از استارتر پیش‌فرض Gatsby شروع کنید و این اطمینان را می‌دهم که از راحتی کار با آن و جمع‌آوری منابع داده‌ای دلخواه و یا CMS های دلخواهتان شگفت زده خواهید شد.
جایگاه آینده‌ی Gatsby کجاست؟
مدت زمان زیادی نیست که از عرضه‌ی Gatsby گذشته است. نسخه‌ی اول آن در جولای 2017 میلادی منتشر شد. از آن زمان به بعد شاهد رشد قابل ملاحظه‌ی این پلت فرم بوده‌ایم و نسخه‌ی 2 ( نسخه بتا) آن نیز در ژوئن 2018 میلادی منتشر شد. البته تغییرات فناورانه ی بسیاری در Gatsby رخ داده است و اعتقاد من بر آن است که تغییراتی اساسی در چشم انداز این پلت فرم رخ خواهد داد. بعضی از بروز رسانی های فناورانه ی مهم در نسخه‌ی 2 از این پلت فرم به شرح زیر است:
ارتقای بسته‌ی وب پک از نسخه‌ی 1 به نسخه‌ی 4 که در آن شاهد افزایش قابل ملاحظه‌ی کارائی مخصوصاً در گام ساخت بوده‌ایم. بکار گیری روتر Reach Router مشابه با پروژه‌ی React-Router که البته تنها از طریق اپلیکیشن های وب تک صفحه‌ای می‌توان به آن دسترسی پیدا کرد.
البته در بعضی از موارد نمی‌توان از گراف کیوال در Gatsby استفاده نمود که از جمله‌ی آن می‌توان به محدودیت در استفاده از آن در بالاترین سطح از کامپوننت های React اشاره کرد و یا نمی‌توان به تعریف یک پرس و جو در هر کامپوننتی پرداخت.
کامپوننت React نیز در این پلت فرم به نسخه‌ی 16 ارتقا پیدا کرده است و از این رو می‌توان از ابزارهای Context، Fragment و سایر جنبه‌های موجود در آخرین نسخه از React استفاده نمود.
به طور کلی، اصطلاح چارچوب قدرتمند تولید کننده‌ی سایت ایستا (مانند Gatsby) به سرعت در حال رشد است. به اعتقاد من، تحولات و پیشرفت‌های بیشتری در ابزارهایی مانند Gatsby رخ خواهد داد به گونه‌ای که این پلت فرم جای خود را در بخش‌های وسیعی از ساخت وب سایت باز خواهد کرد. در بسیاری از زبان ها و نه تنها React، ابزارهای تولید وب سایت های ایستا به عنوان راهکاری برای ساخت وب سایت های آینده در نظر گرفته شده‌اند. خود Gatsby از مدرن‌ترین فناوری‌های رو به رشد امروزی اعم از React، گراف کیوال و وب پک استفاده می‌کند. البته من نمی‌توانم به اندازه‌ی کافی قدرت این پلت فرم در ساخت وب سایت ها را بیان کنم ولی به اعتقاد من، آینده‌ی این پلت فرم، روشن و البته بسیار روشن خواهد بود.
کتابخانه ای متن باز و مبتنی بر جاوا اسکریپت که برای ساخت واسط های کاربری پیشرفته کاربرد دارد.
Service worker
Code-splitting
