سری اولی که وبلاگ شخصیم رو درست کردم قالب استاندارد ۲۰۱۴ وردپرس رو برداشتم و Style و Markup اش رو عوض کردم و نتیجه‌اش راضی کننده بود ولی مشکل اینجا بود که من PHP developer نبودم(هنوز هم نیستم!) و میخواستم قابلیت جدیدی اضافه کنم مجبور میشدم از سرویس‌های جداگانه مثل
Disqus comment system, Jetpack sharing buttons, Plugins for contact forms and such …

استفاده کنم که هرکدوم یه مشکلی داشتند. مثلا Disqus که سرویس نظردهی هستش زبان فارسی نداشت بعد نشستیم زبان فارسی براش نوشتیم! (یه پروژه باز تو Transifex بود) که خب این حل شد ولی باز فونت فارسی که استفاده میکرد Arial بود که خیلی مضخرف بود و تغییر این دیگه دست ما نبود چون کدش Iframe تو صفحه گذاشته میشه دیگه هیچ حرکتی نمیشه زد (همون مشکل Domain origin policy) بعدها هم که با فیلتر کردن Disqus خیال همه رو راحت کردند!

مشکلای اینجوری رو تیکه تیکه به مرور زمان با جستجو کردن درست کردم و آخرسر با این که راضی‌کننده بود ولی طراحیش چه از نظر فنی چه از نظر ظاهری مثل یه ربات بازیافتی بود که هرچی دم دستشون اومده باشه به هم چسبوندن!

این بعدا دلیل شد که بشینم بکوبمش و از اول بسازم.

وقتی میخوایم از یه CMS مهاجرت کنیم تیکه بزرگش جابه‌جا کردن دیتاست. وردپرس که خودش یه خروجی XML میده و افزونه‌هایی هستن که خروجی JSON هم میگیرن پس از این نظر مشکلی نداریم.

چیزی که برای من مهم بود به ترتیب:

  1. راحتی نوشتن
  2. بالابودن سرعت بازشدن صفحه‌ها
  3. توسعه پذیر بودن
  4. راحت‌بودن اضافه کردن قابلیت‌های ژانگولری!

Static Generators

اون موقع Static generator ها خیلی پاپ شده بود. مخصوصا برنامه‌نویس‌ها زیاد از وردپرس مهاجرت میکردن به یکی از این‌ها. اگه نمیدونید Static generator چیه کارش ساده‌است. شما نوشته رو در قالب Markdown مینویسید و اون به نوشته Style و چیزهای دیگه رو میچسبونه و خروجی HTML میده، همون چیزی که شما تو مرورگرتون میبینید. فرق بزرگش با سیستم‌های مثل وردپرس اینه که سیستم‌های نظیر وردپرس دیتابیس دارن و صفحه HTML رو موقع بارگیری کردن کاربر درست میکنن ولی Static generator ها همون اول(موقع Deploy) صفحه HTML رو میسازن و دیتابیس ندارن. مزیت بزرگ این‌ها سریع بودن باز شدن صفحه‌هاست چون دیتابیسی وجود نداره که کاربر بخواد دونه دونه ازش دیتا بگیره. ولی بخاطر همین Static بودن ممکنه مهاجرت کردن به سیستم دیگه بعدا مشکل ساز بشه. من Hexo رو که با Node.js صفحه‌ها رو تبدیل میکرد تست کردم و نتیجه خوب بود ولی مورد اول که راحتی نوشتن بود رو فدا میکرد. بنظر من ادیتور دیداری وردپرس از نوشتن در قالب Markdown راحت‌تره.

Flat-file CMS

بعدش چیزی به اسم Flat-file CMS رو تست کردم. دیتا تو این مدل سیستم‌ها تو یک فایل JSON نوشته میشه و پنل مدیریت با ادیتور نوشتن هم دارن. اون موقع که ۳-۴ سال پیش بود اول راه بودن و از مشکلاتی که من باهاشون داشتم زبان فارسی و تاریخ شمسی بود. بنظرم الان این‌ها بزرگ‌تر شدن و ارزش امتحان دوباره رو دارن. یکی از باحال‌هاشون هم Grav هست جالبه بدونید یه افزونه وردپرس هم زده بودن که خروجی دیتابیس وردپرس رو به مدلی که Grav میخوند تبدیل می‌کرد.

پس دوباره آخرش میرسیم به وردپرس! وردپرس راحتی نوشتن رو داره و حتی میشه با ساختن Short-code ها داخل ادیتور بهترش هم کرد، چیزی که باید بهترش کنیم اول بالابردن سرعت صفحه‌ها، دوم بهتر کردن توسعه پذیری هستش. گزینه آخر هم که حرکت‌های ژانگولری باشه وردپرس خوراکشه

بالابردن سرعت

ابزارهایی که من استفاده کردم:

  • Ubuntu server with 512mb ram
  • Apache web server
  • MySQL database
  • Redis cache
  • CloudFlare CDN service

شاید سوال باشه که چرا از NGINX استفاده نکردم. باید در جواب بگم که بعد از غیرفعال کردن Module های بی‌مصرف Apache و تنظیمش، اختلاف سرعت این دو وب‌سرور خیلی کم بود. ضمن اینکه تنظیمات Apache ساده تره.

حالا کارهایی که میخوایم انجام بدیم:

  1. Making first response time faster (بالابردن سرعت اولین جواب از سرور)
  2. Making query response to our database faster (بالابردن سرعت جواب به درخواست از دیتابیس)

 

بالابردن سرعت اولین جواب از سرور

برای بهتر کردن این مورد من از یک سرویس Content delivery network یا به اختصار CDN استفاده کردم. کاری که CDN انجام میده اینه که اولین درخواست کاربر رو میگیره و اون رو به نزدیکترین وب‌سرور از نظر جغرافیایی هدایت میکنه.

کار دیگه‌ی این سرویس فیلتر کردن درخواست‌هاست و مثل فایروال میمونه یعنی درخواست‌هایی که از طرف ربات‌های خراب‌کار(Spam bot) ارسال میشه رو بلاک میکنه یا درخواست‌های غیرعادی با حجم زیاد DDOS attack

کارهایی که در کنارش انجام میده Cache کردن فایل‌های استاتیک هستش.

من از CloudFlare استفاده کردم.
برای استفاده از این سرویس باید Name server های دامنه‌مون روی CloudFlare تنظیم کنیم. این تغییر در پنل دامنه انجام میشه.
CloudFlare آموزش استفاده پله به پله این سرویس رو خودش گذاشته: CloudFlare guide

بالابردن سرعت جواب به درخواست از دیتابیس

برای بهتر کردن این مورد ما میتونیم درخواست‌هایی که به دیتابیس تکرار میشن رو Cache کنیم.

برای Cache کردن من از Redis cache استفاده کردم و جالب اینکه با اینکه مموری میگیره ولی روی این کامپیوتر با رم ۵۱۲ مگابایتی خیلی خوب جواب داده

ولی خب بازدید سایت کمه و اگه کاربرهای آنلاین از یه تعدادی بیشتر بشن بقیه تو صف میمونن که سرور نخوابه

آموزش استفاده از Redis:
How to config Redis caching to speed up WordPress

توسعه‌پذیرتر کردن

برای توسعه‌پذیرتر کردن میخوایم چند تا کار انجام بدیم

  1. Creating partial views when needed
  2. Using SASS
  3. Using JS bundler
  4. Using Gulp task-runner
  5. Git deployment

داخل پوشه قالب سایتمون مثلا یه همچین شکلی هست:

  • assets
    • css
    • sass
    • js
    • font
    • img
  • partials
    • menu.php
    • nav.php
  • ۴۰۴.php
  • archive.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • page.php

Creating partial views when needed

ممکنه مدل قالبمون جوری باشه که فقط Header, Footer و Sidebar توش ثابت نباشه. اون‌موقع برای اینکه این تیکه‌ها رو مجبور نباشیم تکرار کنیم، خودمون Partial درست میکنیم مثل وردپرس و اونها رو جاهایی که لازمه با روش خود وردپرس اضافه میکنیم. مثلا تو فایل index.php که صفحه نخست سایتمون هست میخوایم منو داشته باشیم، اونموقع توش مینویسیم:


<?php get_template_part('partials/menu'); ?>

 

Using SASS

SASS یک زبان هست که قابلیت‌هایی رو به CSS اضافه میکنه و آخرسر به فرمت CSS تبدیل میشه.

قابلیت‌هایی مثل خرد کردن فایل‌ها، استفاده از متغیرها و فانکشن‌ها

مثلا میتونیم یک تخته رنگ درست کنیم:

کار تبدیل SASS به CSS رو هم Gulp که یک Task runner هست انجام میده.

Using JS bundler

توضیح دادن این تیکه در این نوشته نمیگنجه ولی Bundle کردن JS یکی از کارهاییه که با Task runner انجام میشه.

Git deployment

Git یک سری Hook داره و وقتی عملیاتی در Git اجرا میشه مثل Push, Pull, Fetch این Hook ها مثل یک Event trigger کار میکنن و در اون زمان میشه یک Bash script اجرا کرد. اینجا جایی هست که ما Task runner مون که کارش

SASS compiling

و JS bundling

هست اجرا میشه. Gulp موقع اجرا شدن رم رو پر میکنه و بهتره مقداری فضای Swap روی Disk تون کنار بذارید.

آموزش Deploy کردن با Git:
Automatic deployment with Git

سخن پایانی

اول اینکه با یه سرور کوچیک با رم ۵۱۲ مگابایتی تونستیم یه سایت سریع با قابلیت Deploy راحت درست کنیم.

دوما از Deploy کردن با FTP خاک‌خورده رسیدیم به Deploy کردن با Git !

مقایسه این دوتا روش Deploy مثل مقایسه پیکان و مرسدس میمونه. تا زجری که با Deploy روش اول رو نکشیده باشیم( سواری با پیکان ) نمیتونیم راحتی Deploy خودکار رو درک کنیم( سواری مرسدس )

بازنشر
http://blog.pooriahan.name/wp-content/themes/handmade/functions-shareByEmail.php
● منتشر شده در ۱۳۹۶-۰۶-۰۶
۰ دیدگاه

می‌توانید با عضویت در ماه‌نامه٬
آخرین نوشته‌ها را در صندوق ایمیل خود دریافت کنید