بناء SDK لمتصفحات الويب: 3 أشياء تعلمناها

تُعد حزم SDKs المدمجة في المتصفح طريقة رائعة لإيصال مشروعك إلى الويب وتبسيط طريقة وصول مطوري التطبيقات إلى خدماتك.

في الواقع، قام عدد من الشركات الكبيرة ببناء مكتبة حول واجهات برمجة التطبيقات الخاصة بهم بهذه الطريقة.

تتيح أمازون، على سبيل المثال، للمطوّرين إنشاء خدمات AWS في تطبيقات الويب الخاصة بهم باستخدام كود JavaScript الذي يعمل في المتصفح. يقوم كل من Facebook و Stripe و Twilio بأشياء مماثلة.

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

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

النصيحة رقم 1: WebAssembly هو السبيل للمضي قدمًا إذا كانت شفرتك البرمجية كثيفة الحوسبة

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

جاء جزء كبير من هذا التعزيز في الأداء مع اعتماد WebAssembly على نطاق واسع، وهو معيار جديد للويب يعمل جنبًا إلى جنب مع JavaScript لتجميع التعليمات البرمجية منخفضة المستوى بحيث يمكن للمتصفحات تنفيذها بشكل أسرع. (1)

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

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

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

بصرف النظر عن تحسين الأداء، فإن تجميع شفرتك البرمجية إلى WebAssembly يجلب لنا

• زيادة الأمان: يتم تشغيل WebAssembly في بيئة آمنة محمية بصندوق رمل ويصعب هندستها عكسيًا أكثر من JavaScript بسبب تنسيقها البايتيكود.
• إمكانية الوصول وقابلية التشغيل البيني: أصبح WebAssembly مؤخرًا معيارًا رسميًا لاتحاد شبكة الويب العالمية (W3C) (تمامًا مثل HTML و CSS).
• قابلية النقل: يمكن تشغيل WebAssembly خارج المتصفح أيضًا، على مجموعة متنوعة من أنظمة التشغيل وبنى مجموعة التعليمات.

تمت كتابة الكود المصدري لمجموعات تطوير البرمجيات الخاصة بنا بلغة C++، ولكن يمكنك تجميع WebAssembly من Rust وGo وAssemblyScript والعديد من اللغات الأخرىأيضًا.

إليك نظرة عالية المستوى لما تبدو عليه العملية. ستلاحظ أننا اخترنا متصفح كروم لتوضيح وجهة نظرنا لأنه المتصفح المفضل لحوالي ثلثي مستخدمي الإنترنت في العالم. (2)

ومع ذلك، علينا التفكير في الثلث المتبقي. وهذا يعني التطوير مع مراعاة التوافق بين المتصفحات.

نصيحة رقم 2: تعامل مع مشكلات توافق المتصفح من خلال تحسين مجموعة أدوات تطوير البرمجيات تدريجياً

غالبًا ما يؤدي العمل مع واجهات برمجة تطبيقات المتصفح الجديدة أو تقنيات مثل WebAssembly إلى تعثر بعض ميزاتك في بعض المتصفحات، إما لأنها محظورة من قبل شيء ما أو غير مدعومة على الإطلاق.

على سبيل المثال، لن يعمل استدعاء واجهة برمجة تطبيقات WebRTC لمعالجة الفيديو في الوقت الحقيقي في كروم على أي جهاز آيفون يعمل بنظام iOS 14.2 أو أقدم لأن WebView من Apple لا يدعمه.

لنفترض أنك تنشئ مجموعة تطوير البرمجيات SDK لعقد مؤتمرات الفيديو للويب. لديك الآن مشكلة بين يديك لأن مستخدمي iPhone الذين لم يقوموا بتحديث برامجهم منذ بضعة أشهر لن يتمكنوا من الانضمام إلى اجتماع في أي شيء سوى Safari.

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

التحسين التدريجي في الممارسة العملية

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

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

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

سيساعدك ذلك إذا قمت بتخطيط رحلة المستخدم من المربع الأول وتحديد ما يحدث إذا فشل تحميل إحدى الميزات ومتى يفشل تحميلها. إليك كيفية تصميمنا للتدفق قبل إنشاء SDK:

اكتشاف ما إذا كان المتصفح يدعم ميزة ما

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

للقيام بذلك، يمكنك إما تنفيذ الاختبارات الخاصة بك أو استخدام مكتبة موجودة مثل Wasm-feature-detect من جوجل. نستخدمها لتحميل حزمة WebAssembly المناسبة لمستخدمينا في وقت التشغيل، من الأكثر توافقًا إلى الأكثر أداءً. فيما يلي مثال على كيفية التحقق مما إذا كانت SIMD، وهي إحدى ميزات WebAssembly، مدعومة أم لا.

<script type="module">
import { simd } from "https://unpkg.com/wasm-feature-detect?module";
simd().then(simdSupported => {
if (simdSupported) {
/* SIMD is supported */
} else {
/* SIMD isn't supported */
}
});
</script>

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

النصيحة رقم 3: تجنب العمل الممل مع البرمجة الوصفية

إذا كنت تخطط لبناء العديد من حزم SDKs (أو حتى تطبيقات الويب) التي تشترك في وظائف متشابهة، فقد ترغب في النظر في البرمجة الوصفية.

البرمجة الوصفية هي تقنية يتعامل فيها برنامج الكمبيوتر مع البرامج الأخرى كبيانات خاصة به. وهي تتيح لك أتمتة الأعمال التي تستغرق وقتاً طويلاً وغالباً ما تكون مملة من خلال كتابة برامج تقوم هي نفسها بكتابة برامج.

وكمثال على ذلك، فإن حزم SDK الخاصة بنا داخل المتصفح لها بنية متشابهة ولكنها تحل مشاكل مختلفة تمامًا. تساعدنا البرمجة الوصفية على تحويل ملفات جافا سكريبت الحالية وحتى إنشاء ملفات جافا سكريبت جديدة لكل مجموعة تطوير البرمجيات SDK إلى:

• إنشاء كود برمجي نموذجي من مستودع تعريف واحد
• أضف ميزة جديدة مرة واحدة واجعلها تعمل في كل مكان
• إصلاح الخلل في مكان واحد وتغيير السلوك غير المرغوب فيه في جميع حزم SDKs
• تغيير مفاتيح الترخيص بشكل مجمّع، وتعديل المسارات إلى ملفات WebAssembly، إلخ.

نحن نستخدم تقنيتين مختلفتين للبرمجة الفوقية، اعتمادًا على نطاق التغييرات التي يجب إجراؤها: البرمجة الفوقية للقالب (TMP) ومعالجة شجرة بناء الجملة المجردة (AST).

تكون البرمجة الوصفية للقوالب مفيدة عندما تحتاج إلى إنشاء ملفات JavaScript متعددة من ملف واحد عام.

يعد استخدام ASTs لمعالجة التعليمات البرمجية مفيدًا في تعديل ملفات التعليمات البرمجية المصدرية الموجودة مع الالتزام بأسلوبها وبنية التعليمات البرمجية.

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

المتصفحات، المكان المناسب للتواجد فيه

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

نأمل أن تساعدك النتائج التي أوجزناها أعلاه في بناء واحدة خاصة بك – مع مراعاة الأداء وسهولة الوصول والهندسة الذكية.

هل تستمتع بالعمل على أقراص SKDs المذهلة داخل المتصفح؟ تعال واعمل معنا