يريد مؤلف المادة ، التي ننشر ترجمتها اليوم ، مشاركة قصة حول التقنيات التي يستخدمها لتطوير النماذج الأولية لتطبيقات الويب بسرعة. تتضمن هذه التقنيات مكتبات Fastify و Preact. كما يستخدم مكتبة هتم. يتكامل بسهولة مع Preact ويستخدم لوصف عناصر DOM باستخدام تصميمات بديهية تذكر بـ JSX. في الوقت نفسه ، ليس هناك حاجة إلى محول مثل بابل للعمل معها. بعد عرض أدوات تطوير النماذج الأولية وطرق العمل بها ، سيوضح مؤلف المادة كيفية حزم هذه التطبيقات في حاويات Docker. هذا يجعل من السهل إظهار التطبيقات لكل من يهمه الأمر.
ابدأ
لقد جئت إلى استخدام مجموعة التقنيات المذكورة أعلاه قبل بضعة أسابيع عندما كنت بحاجة لإنشاء تطبيق ويب بسيط للغاية تم تصميمه لاختبار بعض الافتراضات مع زملائي.
تجربتي كانت ناجحة للغاية. لقد تمكنت من إنشاء نموذج أولي بسرعة كبيرة ، وتمكن زملائي من تجربة ذلك بسهولة ، وتمكّنوا من التعبير عن انطباعاتهم حوله بسرعة. في الوقت نفسه ، يمكنهم اختبار المشروع حتى لو لم يتم تثبيت Node.js و NPM على أجهزة الكمبيوتر الخاصة بهم.
كل هذا دفعني إلى فكرة أنني يجب أن أكتب مواد عن مقاربي للنماذج الأولية السريعة لتطبيقات الويب. من الممكن أن يكون هذا النهج مفيدًا لشخص آخر. بالنسبة لأولئك الذين هم على دراية بـ Fastify و Preact ، سأوضح على الفور أهم شيء ، والذي سيسمح لهم بوضع أفكاري على الفور موضع التنفيذ.
الأفكار الرئيسية
إذا كنت معتادًا على Fastify و Preact وترغب في معرفة كيفية تنظيم تطوير المشاريع القائمة على هذه التقنيات ، فأنت حرفيًا على بعد خطوات قليلة مما تريد. وهي نتحدث عن الأوامر التالية:
git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project cd my-new-project rm -rf .git npm install
بالطبع ، يمكنك تغيير اسم المشروع ،
my-new-project ، إلى اسم مشروعك.
بعد تثبيت كل ما تحتاجه ، يمكنك البدء في العمل في المشروع. وهي نتحدث عن ما يلي:
- يحتوي مجلد
src/ui على ملفات جزء العميل من التطبيق (هنا يتم استخدام Preact و htm). - يحتوي مجلد
src/server على الملفات المتعلقة بجانب الخادم للتطبيق (يتم استخدام Fastify هنا).
من خلال تحرير الملفات المناسبة ، يمكنك تشغيل المشروع:
npm start
بعد ذلك ، يمكنك اختباره من خلال الانتقال إلى
localhost:3000 عنوان في المتصفح.
وأكثر شيء واحد. إذا كنت تحب تطوري ، سأكون ممتنًا جدًا للنجم على
جيثب .
الآن دعونا نلقي نظرة على التقنيات المستخدمة هنا وميزات العمل معهم.
تثبيت
Fastify هو إطار ويب سريع واقتصادي لـ Node.js. تم إنشاء هذا المشروع في الأصل من قبل اثنين من المبرمجين. يضم الآن فريق من الذين يعملون عليه 10 أشخاص ، ويساعد أكثر من 130 شخصًا في تطوير المشروع ، وقد جمع ما يقرب من 10000 نجم على جيثب.
تأثر Fastify بأطر Node.js مثل Express و Hapi ، والتي كانت موجودة منذ بعض الوقت. كان يهدف في الأصل إلى الإنتاجية ، في راحة المبرمجين وتوسيع قدراته بمساعدة المكونات الإضافية. هذا ، بالمناسبة ، هو واحد من الميزات المفضلة لدي في Fastify.
إذا لم تكن معتادًا على إطار Fastify أو كنت ترغب في معرفة ذلك بشكل أفضل ، فيمكنني أن أوصي بوثائقه الرسمية.
تجدر الإشارة إلى أنني مرتبطة Fastify. أنا عضو في فريق التطوير الرئيسي وأشارك بشكل رئيسي في دعم موقع المشروع والعمل على توثيقه.
بريكت
Preact هي مكتبة لتطوير واجهات المستخدم لمشروعات الويب ، والتي تم إنشاؤها من قبل شخص واحد كبديل مدمج وسريع لـ React. اتضح أن هذا المشروع كان ناجحًا للغاية ، والآن يشارك فيه فريق كامل من المطورين ، وفي GitHub سجل أكثر من 20000 نجم.
أحد الأسباب التي أحببت Preact هو أن هذه المكتبة تحتوي على طبقة قابلة للامتداد لوصف المكونات المرئية للتطبيق. في ظل الظروف العادية ، يمكن استخدام هذه المكتبة باستخدام JSX مع Babel لترجمة الشفرة ، ولكن إذا كنت لا ترغب في تثبيت Babel وتكوين عملية إنشاء التطبيق ، فيمكنك استخدام Preact ، على سبيل المثال ، مع مكتبة
htm ، التي تستخدم القوالب الحرفية ولا تتطلب التحويل عند إطلاق المشاريع التي يتم استخدامها في المتصفحات الحديثة.
في هذه المقالة ، سنستخدم مكتبة htm وسننظر قريبًا في بعض الأمثلة.
نظرة عامة على المشروع
هنا نلقي نظرة على العملية الكاملة لإنشاء المشروع. سيكون هدفنا هو تطوير تطبيق ويب بسيط يعرض معلومات حول الوقت على الخادم وقت إطلاقه. هنا ، من أجل توضيح ما سنسعى جاهدين لتحقيقه.
تطبيق في المتصفحهذا هو تطبيق صفحة واحدة (SPA) ، حيث يتم استخدام Preact و htm لتكوين جزء العميل الخاص به ، ويستخدم Fastify لإنشاء واجهة برمجة تطبيقات مصممة لتلقي وقت الخادم.
قد يلاحظ القارئ اليقظ أن الصفحة المعروضة في الشكل السابق بها أيقونة فافيكون جميلة. صحيح ، إنه صغير جدًا هناك ، لذلك سأقوم بتسهيل المهمة بالنسبة لأولئك الذين يحاولون أن يكسروا أعينهم. هنا نسخة موسعة منه.
فافيكونإعداد جانب الخادم للتطبيق
لنبدأ بإنشاء مجلد جديد:
mkdir server-time cd server-time
الآن تهيئة مشروع NPM وتثبيت Fastify:
npm init -y npm i --save fastify@next fastify-static@next fastify-cli
يرجى ملاحظة أنني استخدمت إنشاء
@next عند وصف بعض
@next التبعية. يتم ذلك حتى يستخدم المشروع مكتبة Fastify 2 ، التي هي حاليًا في حالة مرشح للإصدار ، ولكنها ستصبح قريبًا الإصدار المستقر الرئيسي.
يرجى ملاحظة أنه يمكنك أيضًا إنشاء مشروع جديد يعتمد على Fastify باستخدام
fastify-cli سطر الأوامر
fastify-cli :
npx fastify-cli generate server-time
في وقت كتابة هذه المادة ، يقوم هذا الفريق بإنشاء مشروع مصمم لاستخدام Fastify 1.x ، ولكن قريبًا جدًا ، بعد إصدار Fastify 2 ، سيتم تحديث هذه الأداة.
دعنا نحلل الحزم المثبتة:
fastify هو عنصر أساسي في الإطار.fastify-static مكونًا إضافيًا يتيح لك إمكانية تقديم ملفات ثابتة بسهولة من خلال خادم Fastify.fastify-cli هي أداة سطر أوامر تسمح لك بإنشاء مشاريع قائمة على Fastify.
في الوقت الحالي ، نحن على استعداد لإنشاء واجهة برمجة تطبيقات تستند إلى Fastify. لذلك دعونا نضع رمز الخادم في ملف
src/server/server.js :
const path = require('path') module.exports = async function(fastify, opts) { // `src/ui` fastify.register(require('fastify-static'), { root: path.join(__dirname, '..', 'ui'), }) // API fastify.get('/api/time', async (request, reply) => { return { time: new Date().toISOString() } }) }
أعتقد أن الكود أعلاه يوضح نفسه جيدًا ، ولكن هناك بعض التفاصيل المهمة التي تستحق الحديث عنها. سيكون هذا مفيدًا بشكل خاص لأولئك الذين ليس لديهم خبرة مع Fastify.
أول شيء يمكنك الانتباه إليه في هذا الرمز هو أن الكلمة الرئيسية غير
async تستخدم هنا. يدعم Fastify كلاً من تطوير نمط المزامنة / الانتظار وطريقة رد الاتصال التقليدية. ما تختاره بالضبط يعتمد على تفضيلات مطور معين.
تفاصيل أخرى مثيرة للاهتمام هي أننا نعرّف الخادم هنا كوحدة نمطية مُصدّرة. هذه الوحدة (في المصطلح Fastify بلغة تسمى "plugin") هي وظيفة تأخذ حجة على سبيل المثال
fastify (
fastify ) ومجموعة من الخيارات (
opts ). داخل إعلان الوحدة النمطية ، يمكننا استخدام مثيل
fastify لتسجيل المكونات الإضافية. هذا هو بالضبط ما يحدث مع البرنامج المساعد
fastify-static . يمكننا أيضًا وصف نقاط النهاية HTTP باستخدام طرق خاصة مثل
fastify.get و
fastify.post .
النهج المعياري المستخدم هنا ، رغم أنه يبدو غير عادي بعض الشيء ، له مزاياه. بادئ ذي بدء ، تجدر الإشارة إلى أنه يتيح لك الجمع بين خوادم متعددة. تخيل أنك قد أنشأت خادمًا مصممًا لخدمة مدونة ، وآخر تخيله للمنتدى. يمكن دمجها بسهولة في تطبيق موجود عن طريق إرفاقها بمسارات مثل
/blog و
/forum .
علاوة على ذلك ، يسمح لك هذا النهج بتجريد التطبيقات والتطبيقات الفرعية من روابط الخوادم (على سبيل المثال ، تجليد المقبس) ، وتمرير الحل لهذه المهمة إما إلى التطبيق الجذر أو
fastify-cli .
قم ببدء تشغيل الخادم باستخدام
fastify سطر الأوامر
fastify :
node_modules/.bin/fastify start --log-level info src/server/server.js
لتبسيط حياتنا ، يمكننا إضافة هذا الأمر إلى قسم
scripts في ملف
package.json لدينا:
{ "scripts": { "start": "fastify start --log-level info src/server/server.js" } }
قبل بدء تشغيل الخادم فعليًا ، نحتاج إلى التأكد من وجود مجلد توجد به الموارد الثابتة. خلاف ذلك ، سوف
fastify-static خطأ. قم بإنشاء هذا المجلد:
mkdir src/ui
الآن يمكننا بدء التطبيق باستخدام الأمر
npm start والتنقل باستخدام المستعرض إلى
localhost:3000/api/time npm start localhost:3000/api/time .
إذا كان كل شيء يعمل بشكل صحيح ، في المتصفح يمكنك رؤية شيء مثل التالي:
{ "time": "2019-02-17T19:32:03.354Z" }
في هذه المرحلة ، يمكنك تقدير ميزة لطيفة أخرى من Fastify. يكمن في حقيقة أن تسلسل JSON ، في حالة قيام مسار معين بإرجاع كائن ، يتم تطبيقه تلقائيًا.
اكتمل الآن العمل على خادم API. دعنا نواجه الواجهة
إعداد الواجهة الأمامية
سيتم وضع جميع كود مشروعنا المتعلق بالواجهة الأمامية في مجلد
src/ui . سيتكون من 5 ملفات:
app.js - رمز تطبيق Preact.bootstrap.min.css - كود CSS لتصميم التطبيق (يؤخذ مباشرة من إطار Bootstrap).favicon.ico - ملف فافيكون. إذا كنت تقوم بتطوير تطبيق جاد ، فلا يمكنك الاستغناء عن ملف فافيكون جيد.index.html هو ملف HTML الرئيسي لتطبيقنا المكون من صفحة واحدة.preacthtm.js - رمز مكتبات Preact و htm.
أولاً ، ضع الملفات في المجلد ، وهي الأنماط والمكتبات وأيقونة فافيكون:
curl "https://unpkg.com/htm@2.0.0/preact/standalone.js" > src/ui/preacthtm.js curl "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > src/ui/bootstrap.min.css curl "https://github.com/lmammino/fastify-preact-htm-boilerplate/blob/master/src/ui/favicon.ico?raw=true" > src/ui/favicon.ico
قم الآن بإنشاء ملف
src/ui/index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/bootstrap.min.css" /> <title>My awesome server time</title> </head> <body> <div id="app"></div> <!-- JavaScript --> <script src="/preacthtm.js"></script> <script src="/app.js"></script> </body> </html>
أمامنا صفحة HTML عادية جدًا يمكننا من خلالها تحميل جميع الموارد (CSS و JS) وإنشاء عنصر
<div> فارغ باستخدام
app المعرف ، والذي سنخرج به تطبيقنا أثناء تنفيذ المشروع.
ألقِ نظرة الآن على رمز التطبيق ، والذي يجب أن يكون في ملف
src/ui/app.js :
/* htmPreact */ const { html, Component, render } = htmPreact class App extends Component { componentDidMount() { this.setState({ loading: true, time: null }) fetch('/api/time') .then(response => response.json()) .then(data => this.setState({ loading: false, time: data.time })) } render(props, state) { return html` <div class="container mt-5"> <div class="row justify-content-center"> <div class="col"> <h1>Hello from your new App</h1> <div> ${state.loading && html` <p>Loading time from server...</p> `} ${state.time && html` <p>Time from server: <i><font color="#999999">${state.time}</font></i> </p> `} </div> <hr /> <div> Have fun changing the code from this boilerplate: <ul> <li>UI code available at <code>/src/ui</code></li> <li>Server-side code available at <code>/src/server</code></li> </ul> </div> </div> </div> </div> ` } } render( html` <${App} /> `, document.getElementById('app') )
يوجد مكون واحد فقط في هذا التطبيق يسمى
App . تتضمن حالة هذا المكون متغيرين:
loading هو متغير منطقي يستخدم للإشارة إلى ما إذا كان قد تم تنفيذ طلب إلى خادم API في وقت معين للحصول على معلومات حول وقت الخادم.time - سلسلة تحتوي على أحدث معلومات وقت تم تلقيها من الخادم.
إذا كنت معتادًا على React ، فيمكنك بسهولة فهم الكود أعلاه.
باستخدام Preact و htm ، يمكننا إنشاء مكونات من خلال الإعلان عن الفئات التي تمد فئة
Component المدمجة.
في هذه الفئة ، يمكننا وصف سلوك أحد المكونات باستخدام أساليب دورة الحياة مثل
componentDidMount() ، وكذلك استخدام طريقة تتصرف مثل طريقة التقديم العادية
render() من React.
في حالتنا ، بمجرد إرفاق المكون بالصفحة (طريقة
componentDidMount() ) ، نقوم بتعيين خاصية
loading الحالة وتنفيذ طلب API باستخدام
fetch .
بعد اكتمال الطلب ، قمنا بتعيين قيمة خاصية حالة
time وإعادة تعيين خاصية
loading إلى
false .
يتم استدعاء طريقة
render() تلقائيًا في كل مرة تتغير فيها حالة المكون أو عندما يتم تمرير خصائص جديدة إليها. في هذه الطريقة ، نصف مكون DOM باستخدام htm.
تتيح لك مكتبة htm وصف عقد DOM باستخدام حرفية القوالب الموسومة بعلامة خاصة -
html . ضمن قالبنا الحرفي ، قد تكون التعبيرات الديناميكية موجودة ، كتلك التي نستخدمها للتحقق من الحالة ولتحديد ما يجب عرضه إذا كان التطبيق يقوم بتحميل البيانات من الخادم ، وإذا كانت البيانات موجودة بالفعل محملة.
تجدر الإشارة أيضًا إلى أننا نحتاج إلى إنشاء مثيل للتطبيق وعرضه على صفحة HTML. يتم ذلك باستخدام دالة
htmPreact render() للكائن العمومي
htmPreact .
الآن اكتمال العمل على تطبيق الواجهة الأمامية. يمكنك إعادة تشغيل الخادم ، والانتقال إلى
localhost:3000 وتجربة ما أنشأناه للتو. على سبيل المثال ، يمكنك تطوير الخاصة بك على أساس هذا التطبيق. وعندما يبدو ما تصنعه ممتعًا بدرجة كافية لإظهاره لشخص آخر ، فمن المحتمل أن يكون من المفيد لك أن تقوم بحزم تطبيقك في حاوية Docker.
حاويات التطبيق
أعتقد أن أفضل طريقة لإظهار الآخرين لمشاريعك الصغيرة الجديدة هي استخدام قدرات Docker لهذا الغرض.
بفضل Docker ، سيتم تحرير أي شخص يحاول تشغيل تطبيقك في المنزل من التفكير فيما إذا كان لديه الإصدار المناسب من Node.js و NPM مثبتًا ، فلن يحتاج إلى تنزيل شفرة مصدر التطبيق لرعاية ذلك عن طريق إدخال التسلسل الصحيح للأوامر ، تثبيت تبعياته وبدء تشغيل الخادم.
لحزم التطبيق في حاوية Docker ، نحتاج إلى إنشاء
Dockerfile بسيط جدًا في المجلد الجذر
Dockerfile :
FROM node:11-alpine WORKDIR /app COPY . /app RUN npm install --production EXPOSE 3000 CMD ["npm", "start"]
نحن هنا وصف الإجراءات التالية:
- يتم إنشاء الصورة بناءً على صورة Node.js 11 ، المبنية على أساس Alpine Linux.
- يتم نسخ كل شيء من المجلد الحالي إلى مجلد
/app الحاوية. - بعد ذلك ، نقوم بتشغيل الأمر
npm install لتنزيل وتثبيت التبعيات. يؤدي استخدام علامة - --production إلى حقيقة أنه سيتم فقط تثبيت التبعيات اللازمة لنشر المشروع في الإنتاج. هذا يسرع إنشاء الصور إذا كان المشروع يستخدم العديد من تبعيات التنمية. - نشير إلى أن الحاوية يجب أن تحتوي على مسام مفتوح 3000 ، حيث يعمل الخادم افتراضيًا.
- في النهاية ، نصف أمرًا ،
npm start ، سيتم تنفيذه عند بدء تشغيل الحاوية. انها تطلق التطبيق.
لجمع الصورة للحاوية ، قم بتنفيذ الأمر التالي:
docker build -t server-time .
بعد بضع ثوانٍ ، يجب أن تكون الصورة جاهزة ويجب أن تكون قادرًا على بدء تشغيل الحاوية:
docker run -it -p 3000:3000 server-time
يسمح لك
-p بتكوين الاتصال بين منفذ الحاوية 3000 والمنفذ المحلي 3000. سيسمح لك ذلك بالوصول إلى التطبيق الذي تم
localhost:3000 في حاوية على
localhost:3000 المحلي
localhost:3000 .
أنت الآن جاهز لمشاركة طلبك مع أشخاص آخرين. لتشغيله في بيئة Docker ، يكفي ، شريطة أن يتم تثبيت Docker على الكمبيوتر ، لتنفيذ الأمرين المذكورين أعلاه في مجلده.
النتائج
في هذه المقالة ، تحدثنا عن كيفية إنشاء بيئة للتطوير السريع لتطبيقات الويب باستخدام Fastify و Preact. بالإضافة إلى ذلك ، تحدثنا عن كيفية مشاركة التطبيق مع أشخاص آخرين يستخدمون Docker.
كما ذكرنا أعلاه ، تم تصميم الأدوات المقترحة للنماذج الأولية السريعة ، لذا قد تتساءل الآن عما هو مفقود هنا لتطوير تطبيقات حقيقية. على الأرجح ، عندما تتحدث عن "تطبيقات حقيقية" ، تقصد الميزات التالية:
- تجميع موارد الجزء الأمامي من التطبيق: إنشاء ملفات محسّنة (حزم) ، ربما باستخدام Webpack أو Babel أو أدوات أخرى.
- التوجيه في النهاية الأمامية للتطبيق.
- تقديم الخادم
- وسائل التخزين الدائم للبيانات.
لم تتم إضافة كل هذه الإمكانيات لتطوير تطبيقات حقيقية إلى مجموعة التقنيات التي تمت مناقشتها هنا ، لذلك أرى أنها أداة لتطوير النماذج الأولية في الوقت الحالي. أنا متأكد من أنك إذا أحببت ما رأيته ، واعتبرت ذلك كله أساسًا للتطبيقات المستقبلية التي تحل المشكلات الحقيقية ، يمكنك بسهولة العثور على ما تحتاج إليه وإنشاء تطبيقات جاهزة لـ Fastify و Preact الافراج عن الإنتاج.
أعزائي القراء! كيف النموذج الأولي لتطبيقات الويب؟
