ربحت 1.125 مليون ريال سنويًا من مكتبة مكونات Vue.js

مرحبا انا جون لايدير مؤسس شركة Vuetify اسسست شركتي عشان اساعد المطورين وخصوصا اللي ما يقدرون يصمموا او عندهم خبرة قليلة يبنوا تطبيقات ويب جميلة

انا كاتب ومطور رئيسي لمكتبة مفتوحة المصدر مشهورة اسمها Vuetify وهي مكتبة واجهة مستخدم مبنية على إطار العمل جافاسكريبت الشهير Vue.js توفر للمطورين مئات العناصر او اللي يسمونها مكونات يستخدموها في بناء أي شيء من موقع ويب إلى امتداد كروم إلى تطبيق سطح مكتب بالاضافة إلى ان Vuetify مشروع مفتوح المصدر نوع من البرمجيات اللي تقدر تغيرها وتكسب منها وتباعها أو تستخدمها بأي شكل تحت رخصة MIT وانا المسؤول الرئيسي عن صيانتها بمساعدة زوجتي هيذر ومجموعة صغيرة من المطورين الأساسيين والمجتمع الأوسع

اربح من خلال تقديم محتوى وخدمات رقمية مرتبطة بـ Vuetify مثل محتوى مدفوع في متجر Vuetify أو دعم مباشر عن طريق الاستشارات واكسب ايضا من اعلانات Carbon اللي تظهر في معظم صفحات الوثائق وأتلقى تبرعات أو رعايات من خلال GitHub و Patreon

Vuetify تركّز كثير على كونها مجانية من بغيضني اخلي ميزات أو وظائف إضافية وراء دفع، مفتوح المصدر معناه تشارك وتحسّن الكود من خلال دعم المجتمع وعلى طول السنين ساعدني هذا التفكير ابني قاعدة مستخدمين ضخمة ونظام بيئي محيط بالإطار

انتهيت من خدمتي في الجيش الأمريكي في يناير 2013 وقررت اكمل مساري في مجال تكنولوجيا المعلومات وحصلت على شهادات A+ و Security+ و Network+ وبما أن الدراسة كانت أولويتي رجعت لولاية فلوريدا وواصلت دراستي وانتهى بي المطاف اشتغل مع أصدقاء بوكالة ويب

كنت استخدم بشكل رئيسي PHP و jQuery و MySQL وقضيت معظم وقتي في كتابة كود من ناحية السيرفر في أواخر 2014 صادفت مكتبة اسمها Laravel إطار عمل PHP شهير وبعد بضعة أشهر بدأت استخدمها في مشاريع شخصية واحترافية ومن خلال Laravel وجدت موقع يقدّم فيديوهات تعليمية لتعلم الإطار اسمه Laracasts وفي بعض الفيديوهات المدرب جيفري واي استخدم نسخة ألفا مبكرة من إطار Vue.js وحبيت الفكرة مباشرة كانت بسيطة وواضحة وتناسب أسلوبي في التطوير

ركز دايم على القيمة اللي تقدمها منتجاتك أو خدماتك فهم ايش يشد قاعدة المستخدمين عندك أكثر ولا تخف تدخل في التفاصيل تواصل معهم وابين لهم انك تهتم بتجربتهم هذا يبني علاقات طويلة المدى تساعد على النمو المستمر

بدأت ابني تطبيقات فورا من النسخ الأولية لـ Vue من زمان كان اسمه Seed وواصلت لحد إصدار 1 بعدين جا نسخة Vue 2 التجريبية بسرعة بعد الإصدار الأول واحتوت على تغييرات كبيرة منها ما يتطلب عملية ترقية اردت ابدأ مبكر مع الميزات الجديدة وفكرت ابني إطار واجهة مستخدم باسم vue-materials

كان هذا الإطار عبارة عن مجموعة مكونات Vue نفذت أنماط وبرمجة مكتبة Materialize CSS كنت راضي عن النتيجة لكن قررت ما أكمل جهد تحويل كود jQuery عشان يشتغل مع Vue.js ما حبيت اكون مقيد بتطور Materialize واردت اشوف اذا استطيع اطبق مواصفات Material Design على المكونات من الصفر على الأقل استخدمه في مشاريع جانبية أو مشاريع صغيرة للعملاء حتى لو طلع رديء

في 14 ديسمبر 2016 وبعد حوالي 3 إلى 4 شهور من التطوير نشرت أول نسخة ألفا من Vuetify على GitHub تحت رخصة برمجيات MIT كان الرد كبير ومثير وحفزني اصرف آلاف الساعات في تطوير ميزات جديدة واصلاح المشاكل وتقديم مستويات دعم مختلفة للمجتمع وفي أكتوبر 2017 أعلنت اني راح استقيل من وظيفتي عشان اصير مطور مفتوح المصدر بدوام كامل

شكل وتصميم Vuetify مبني على مواصفات Material Design من Google ويُنفّذ باستخدام إطار Vue.js. هذه المواصفات تقسم الأجزاء الشائعة في التطبيقات إلى وحدات وظيفية صغيرة اسمها مكونات. المكونات هي عناصر تستخدم مجموعة من المعطيات لتحديد شكلها. المطورين يأخذون هذه المكونات الجاهزة ويجمعونها في ملفات متعددة اسمها قوالب Vue

القوالب تتكون من 3 أقسام رئيسية؛ قالب HTML، سكربت javascript، وقسم للتنسيق باستخدام CSS أو SCSS. هذا يبسّط كثيرًا عملية تطبيق مواصفات Material Design على المكونات. ولدعم متطلبات التصميم المختلفة، نأخذ مفاهيم التفاعل مع التطبيق ونختصرها في واجهة بسيطة تسهل التعديل على شكل وعمل Vuetify

النسخة الأولى ما قبل ألفا من Vuetify نُشرت في سبتمبر 2016 ودخلت مرحلة ألفا علنًا في 14 ديسمبر من نفس العام. وقتي كان مقسوم بين تطوير ميزات جديدة، إصلاح الأخطاء، إيجاد مطورين آخرين مفتوحي المصدر، وتقديم دعم مباشر لمستخدمي الشركات. المشاريع مفتوحة المصدر تتقدم بدعم المطورين في المجتمع وغالبًا ما ما يكون لها تكاليف تشغيلية بسيطة ما عدا حالات قليلة

هذا النموذج الفريد يسمح لي بدفع تكاليف التطوير بشكل منفصل عن دخل البزنس، والمطورين يقدمون فواتير لكيان مختلف. الأبحاث والتطوير، إصلاح الأخطاء، والإضافات الجديدة كلها تُدفع عبر فواتير من خلال منصة اسمها Open Collective. وبعض أعضاء الفريق الأساسي يأخذون مكافأة شهرية إضافية تصل إلى 1000 دولار، والآن المنصة تعيد أكثر من 2500 دولار شهريًا

التمويل الأولي جا من تبرعات ورعاية من شركات وأفراد، وبلغ شهريًا أكثر بقليل من 500 دولار. مع الوقت، دعم Patreon وGitHub نما إلى مجموع شهري حوالي 6500 دولار. ولدعم الفريق الأساسي، يستخدم Vuetify منصة اسمها Open Collective تزيلني من كونني وسيط مالي وتعرض بشكل شفاف كل المبالغ الداخلة والخارجة من صندوق التمويل. Open Collective أُضيف لاحقًا في دورة تطوير Vuetify، وحاليًا متوسط دخله أكثر بقليل من 2000 دولار شهريًا

لكن التكاليف التشغيلية المنخفضة كانت مرتبطة بدخل منخفض أو معدوم. كان الدخل غالبًا يُكمله الدعم المباشر لـ Vuetify وأعمال جانبية مع عملاء. حاولت أطوّر التمويل الجماعي لـ Vuetify وقضيت سنين أحاول أطور حزمة ميزات تحفّز المطورين والشركات على الدعم. رغم جهودي، ما قدرت أطور فوائد تسرّع وتيرة الرعاية أكثر مما كانت عليه

عشان أنوّع دخل البزنس، أطلقت متجر Vuetify عشان أبيع ملابس ومستلزمات ماركة ومنتجات رقمية مثل الثيمات الجاهزة. دخله كان ضعيف جدًا أول سنة، لكنه نما ببطء من أقل من 100 دولار معظم الشهور إلى 15000 إلى 20 ألف ريال شهريًا. مع السنين، المتجر صار المصدر الرئيسي للدخل وساعدني أستثمر مبالغ أكبر في الإطار، وأدفع مكافآت مالية لفريق المطورين الأساسي

أكبر درس تعلمته من كل هذا أن معظم الشركات ما تبديش اهتمام بالخدمات المقدمة مقابل دعم مشاريع مفتوحة المصدر

هذا كان خصوصًا صحيح مع الشركات الكبيرة اللي غالبًا كانت تحتاج إجراءات معقدة عشان ترعى Vuetify. كان يجب أن أتقبل مبكرًا أن نموذج العمل القائم على الرعاية وحدها غير فعّال؛ على الأقل بالنسبة لي

ركز على العرض الأساسي للمشروع

أهم شيء في حفظ العملاء هو التركيز على العرض الأساسي. قيمة Vuetify تأتي من كونها مكتبة واجهات كبيرة ومليانة ميزات، أي أحد يقدر يستخدمها مجانًا. هذه الطريقة جذبت قاعدة مستخدمين كبيرة نقدر نتفاعل معها بعدة طرق مثل الرسائل الإخبارية، والمنشورات في وسائل التواصل، ومناقشات GitHub، والسيرفر الخاص بنا في Discord

تعاون مع جهات مشابهة

أنا أشتغل مع كثير جهات في نظام Vue مثل Vuejobs و MadeWithVue عشان نشارك معلومات مفيدة بين المنصات. غالبًا يكون الشكل صفحة مخصصة أو إعلان بسيط داخل وثائق Vuetify، أو حتى بانر لمحتوى وموارد خاصة بـ Vue.js. بناء العلاقات والتعاون مع الآخرين يقوي علامتك ويفتح طرق جديدة للناس يكتشفونك

فيديو تعليمي من Vue Mastery عن Vuetify

اصنع محتوى منسق ومحبوك

في حالة Vuetify، أغلب الزوار يجيون من خلال المطورين اللي يستخدمون وثائقنا كمصدر لكل الميزات المتاحة، ونادرًا ما يكون هدفهم الشراء. وجود محتوى منسق يبقي المستخدمين مهتمين، ويزيد مدة بقائهم في الموقع، ويرفع احتمال دخولهم في مسار البيع سواء بشراء قالب من متجر Vuetify، أو دعمنا كراعٍ، أو طلب دعم مباشر

تحليلات Google

ابني مجتمع

المجتمع المتنوع والشامل هو أفضل طريقة للتواصل مع عملائك على المدى الطويل. يوفر فرصة للمطورين يناقشون المشاكل، ويتحدثون عن التحديثات الحالية أو القادمة، ويكشف عن مستخدمين نشطين جدًا لمنتجك يمكنهم يساعدونك في تطوير التجربة وتحسينها

النسخة الجديدة من إطار عمل Vuetify قيد التطوير بشكل أو بآخر من بداية العام الماضي. لكن عام 2020 كان فيه كثير عقبات وصعوبات في تأمين الموارد والتمويل. هذا أخر موعد الإطلاق إلى أكتوبر 2021، ونحن الآن في الطريق الصحيح لتحقيق هذا الهدف

مجموعة الميزات في النسخة القادمة هي نتيجة آلاف المشاكل المحلولة، ومئات الميزات الجديدة، وكم كبير من الأخطاء الساذجة، ودروس صعبة تعلمناها. فكرة بسيطة بدأت كفكرة شخصية مني تطورت لشيء مميز جدًا، صنعه المجتمع بإرشاد وتوجيه من مجموعة صغيرة من المطورين الرائعين. هي رسالتنا الحب لتطوير واجهات الويب، وستكون عملي الأهم في حياتي

في المستقبل، أنا متحمس أدعم الإطلاق القادم ببناء أدوات وخدمات جديدة تحسّن تجربة المطور. عندي أيضًا تطلعات أصنع محتوى مرئي حول Vuetify، وأعتقد أن هذا هو التطور الطبيعي لي في قصة Vuetify. مساعدة الناس دايمًا كانت شغفي، وستضل القوة الدافعة لي

الدخول المبكر على Vue.js كان من قبيل الصدفة وكان من أكبر العوامل اللي ساهمت في نجاح Vuetify بالبداية ولا يمكن التقليل من أهميته. كنت جديد على تطوير الويب وشيء صنعته ينتشر بسرعة أعطاني شعور حقيقي بالحظ.

أصبحت شخصية شبه عامة وآلاف المطورين يفحصون الكود اللي أكتبته وكان هذا يسبب لي نوع من الشلل الإبداعي لكن للمبرمجين. عانيت لسنوات من متلازمة المحتال. كنت دايم أنتقد أدائي بشكل مبالغ فيه وأحس دايم أنه ما يكفي.

لم أدرك كم قطعنا من طريق حتى توقفت ورجعت للوراء شفت من وين بدأنا. ما كنت أوقف أقدر النتائج اللي جاية من سنين من الجهد. الرجوع للوراء وشوف الرحلة غير نظرتي وساعدني أقدر إنجازاتي أكثر.

إدارة كل شيء خاص بـ Vuetify مهمة ضخمة وتعتمد على خدمات طرف ثالث كثيرة لأغراض مختلفة مثل إدارة المتجر عبر Shopify و Vuetify واختبار المتصفحات عبر BrowserStack أو استضافة المواقع عبر Vercel. أستخدم Zapier لأتمتة مهام كثيرة مثل نشر معلومات الإصدارات على منصات اجتماعية متعددة. للتمويل أستخدم Patreon و GitHub Sponsors و OpenCollective للفريق الأساسي.

في عملي اليومي أستخدم Shift.io لأجمع معظم هذه الخدمات في واجهة واحدة تشمل البريد الإلكتروني والتقويم والتحليلات وغيرها. للبيانات وإدارتها أستخدم Cosmic.js لكل خصائص Vuetify بطريقة أو أخرى. ومؤخرًا اشتريت جهاز Stream Deck عشان أفتح تطبيقاتي المكتبية المفضلة بسهولة.

أطور باستخدام محرر VS Code ونظام Windows 11 مع WSL2. من حيث الأجهزة أستخدم لوحة المفاتيح Das Keyboard 4 Professional وفأرة Razer Viper ووسادة خشبية لراحة المعصم أثناء الكتابة.

عندي شغف بكتابة الملاحظات باليد ومؤخرًا اشتريت جهاز reMarkable 2 وهو جهاز كتابة يشبه الورق تمامًا. مثل لعبة الرسم للأطفال لكن للبالغين وفائدته تتجاوز يوم العمل العادي.

أهم مصدر أثر في حياتي كان الفيديوهات على Laracasts. عندهم دورات تعليمية بجودة عالية واحترافية، وسبب أول ما وقعت على Vue. حتى إني ما أشتغل مع Laravel بعد الآن، بس كل من Laravel و Laracasts سببوا في تشكيل كثير من المصطلحات وطرق التصميم اللي تستخدم اليوم في Vuetify

قد أكون تقليدي بس المهم ابدأ. الشك ممكن يكون دافع قوي خصوصا إذا كان عندك شيء حقيقي على المحك. راح تلاقي صعوبات ما كنت تشوفها قبل كذا وراح تضطر تحلها. احاط نفسك بناس أذكياء واستمع لهم. اخفض رأسك وكن مستعد تتحمل مسؤولية أخطائك وأخطاء غيرك

بينما انت جالس مع أصحابك تشوف السوشيال ميديا أو تلعب ألعاب أو تشوف تلفاز، في واحد ثاني شغال بجد. عنده نفس الدافع والطموح مثل ما عندك. راح يسوي التضحيات اللي انت تتهرب منها، وراح يكون مصمم على النجاح مثل ما انت أو أكثر

تخيل نفسك في البحر وجرفك موج كبير تحت الماء شسوي؟ هل تشكي إن الصعود صعب؟ هل تحس إن الوضع ظالم لأنك مدوس؟ هل تحمل غيرك سبب ما دخلت البحر أصلا؟ ولا تقاوم بكل قوتك عشان تاخذ نفس هواء؟

إذا قاتلت كل يوم من أجل النجاح بنفس الشدة اللي تقاتل فيها عشان تتنفس لو كنت تغرق، راح تنجح

باختصار، لا. بما أن Vuetify مشروع مفتوح المصدر، فإن معظم تطويره يتم بفضل التبرع بالوقت والموارد من قبل المجتمع. إذا كنت تبغى تشارك في تطوير الإطار، تواصل معي عبر مجتمعنا في Discord.